How to make a responsive YouTube player for Captivate 8

How to make a responsive YouTube player for Captivate 8

Posted on Jul 31, 2015
Comments

Captivate 8 is one of the leading e-learning authoring tools on the market at the moment. Adobe’s package is one of the few that makes it easy to create truly responsive e-learning.

(When we say truly responsive, we don’t mean just shrunk-down, we mean designed to look great on every device.)

Captivate 8 supports a number of different formats to make elearning engaging and interactive including voiceover, video content, and HTML5-based animation.

Video content can sometimes be problematic when it comes to elearning: mix large video files with feeble 3G and you’ve soon lost the attention of your frustrated learner. Fortunately, Captivate has a widget that allows you to embed any YouTube video into your course – meaning you can take advantage of YouTube’s servers and intelligent streaming capabilities.

The YouTube widget is not, however, responsive.

Much to the frustration of the product champions at flick, and after a few hours of scouring the Adobe forums, we decided to come up with our own workaround that makes use of Adobe Edge Animate – Adobe’s own HTML5-animation software included in their Creative Cloud Subscription.

Adobe Edge Animate publishes as HTML5, meaning it’s very easy to make your animation responsive. It also means that we can use this .html output to embed a responsive YouTube player.

Using Adobe Edge Animate to create a responsive video player in Adobe Captivate.

Step 1:

Open a new file in Adobe Edge Animate. Tweak the size of the file to the same size as your primary display in Adobe Captivate. And make sure that ‘Responsive Scaling/Both’ is selected.

New file in Adobe Edge Animate

Step 2:

Save the file to your computer, and then go to the location where the file is saved. You’ll notice that it actually saves a number of files, including an .html file. This is what we’re going to work on.

Save file to your computer

Step 3:

Open the html file in Dreamweaver (or another editor).

And we’re going to insert an iframe into the code after <head>:

<link href="myIframe.css" rel="stylesheet" type="text/css">

<div class='myIframe' >

<iframe width="1152" height="648" src="https://www.youtube.com/embed/xxxxxxxxxxx?rel=0&amp;showinfo=0;autoplay=1;modestbranding=1" frameborder="0" allowfullscreen></iframe>

</div>

Step 4:

Go find the YouTube video you want to embed and copy the last string of letter, numbers and symbol that comes after the equals sign.

Find the YouTube video you want to embed

And paste it into the code where the string of Xs are.

Code

And save the file.

(Note: there are a number of tweaks you can make to the YouTube player. We’ve turned autoplay on, removed the suggested videos at the end, and switched on modest branding by default, but you can have a play around. See more on YouTube Embedded Players and Play Parameters.)

Step 5:

When you paste the code in, it will create a css style sheet called ‘myIframe.css’. But if you click on it, it will say ‘myIframe.css is not on the local disk.’

myIframe.css

Don’t panic, all we need to do is open up notepad and paste in the following code.

@charset "utf-8";

.myIframe {

position: relative;

padding-bottom: 56.25%;

padding-top: 0px;

height: 0;

overflow: auto;

-webkit-overflow-scrolling:touch; //<<--- THIS IS THE KEY

border: solid black 0px;

}

.myIframe iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

Save the file into the same folder as your html file and name it ‘myIframe.css’ (making sure you have ‘Save as: all files’ selected.

Save the file

This CSS file will make sure that the player is the responsive to the width of the display – perfect for working in Captivate.

Step 6:

Open up the .an file in Adobe Edge Animate. You may get a message that reads ‘Responsive Video Player.html was changed outside of Edge Animate. Do you want to reload the composition? You will lose any unsaved changes.’

Just click yes.

Go to File>Publish Settings and make sure ‘Animate Deployment Package’ is ticked.

Click publish.

Publish Settings and make sure ‘Animate Deployment Package’ is ticked

Step 7:

In your Captivate project click ‘Media>HTML5 Animation’.

Media>HTML5 Animation

Go to the location of your animation files, then publish>animate_package and then select your .oam file.

Resize it to whatever size you like, and set your ‘Width’ to a percentage and ‘Height’ to auto.

And that’s it! You have a responsive video player.

Listening Skills - Responsive Video

 

If you want to see what these responsive videos look like in our courses, why not demo flick today? Just click here.

 

Related articles 

What is data protection?

 

 What is HTTPS and how can it keep you safe?

  

Cookies and data

 

 What is data protection and how does it relate to cookie law?

 

Related courses

Data protection training cover

 

  data protection

 

Listening skills cover

 

  listening skills

 

 

 

categories

6 hours, 30 minutes ago

Improve your work, personal and community relationships with flick's listening skills training course.… https://t.co/6JRV73yhGe

1 day, 3 hours ago

It’s a sad day for women. A report from Equal Measures 2030, an independent civil society and private sector-led pa… https://t.co/806Hr8sEuS

3 days, 5 hours ago

Police officers detained and interviewed vulnerable suspects without an appropriate adult present more than 100,000… https://t.co/1vf8uzFfQK

Flick Learning Ltd

Fargo Studios, 54 Grafton Street, Coventry, West Midlands, CV1 2HW. Copyright 2019 All Rights Reserved. Company No. 09270577