Making YouTube Videos Interactive

I do a lot of YouTube videos and they are all how to use some piece of software or how to code something so I was thinking to myself, wouldn’t it be cool to prompt the user with a question in the middle of the video and have the user interact with the content and when done it just continues with the video.

So this is basically in the moment quizzing. Instead of waiting till the end have the user review what they just learned. I liked the idea so much I built a template you can download from my downloads page or at the end of this post. Once you have the template you simply open up the JS file found in the js folder called info.js. I am basically giving you all the source code so you could customize to your hearts content.

In the JS file you change the value of each item you want to change. Do not delete the quotes those need to stay in there for the code to work but for example if you want to change the title of the video you find this line

pageTitle: “<strong>SAMPLE VIDEO TITLE</strong>”

And you change the text within the quotes and when you preview the interaction again it will have the new title. To change which YouTube video you want to play you simply change the following line of code.

videoID:”U9t-slLl30E”,

You find the ID of the YouTube video you want to play (Usually the ID is either at the end of the YouTube URL or end of the share link) and then preview the index.html file again and you have a new video. I placed my current favorite YouTube video from Bad Lip reading which os hilarious! My favorite line in that video is “I saw a big log and when I turned that log over I saw a small stick and I was like, That log had a child”.

Alright so back to the matter at hand. You can then change what comes up in the questions by adjusting everything in the questions section from the time the question shows to what the possible choices are and question. That is it! You can then place these files on a website somewhere, embed them in a Storyline or Captivate course or even place them in a SCORM wrapper and upload them to your LMS. I am hoping to make more of these kind of templates so let me know what you think and what kind of other templates you would like to see.

If you are interested I used the following code libraries to make this happen.

  • Handlebars to pull in the JSON data
  • Featherlight to handle the question pop ups
  • Skeleton CSS to handle the responsiveness
  • YouTube API to trigger the questions at certain points of the video
  • Of course jQuery to reference different stage elements

Here is the template if you want to get it:

 


Watch the video below.

Leave a Reply

Your email address will not be published. Required fields are marked *