HTML5 and YouTube video

To embed a YouTube Video

  • Go to YouTube and open the video you want to embed.
  • Click the Share button under the video window.
  • Click the Embed button.
  • Set the window size, then copy the code.

The code should look similar to this (the video I am using is Outputting HTML5/CSS3 Panoramas Tutorial):

<iframe width=”480″ height=”390″ src=”http://www.youtube-nocookie.com/embed/oJzlix1uGWw” frameborder=”0″ allowfullscreen></iframe>
  • Open the skin Editor and add a text box, you may want to give it an ID of Video Player.
  • Change the text box size to match your video, in this example 480 x 390 and paste the above code in the text field.

When making a skin for the iPhone or iPod Touch, make the text box/video player window small enough to fit the screen, it does not matter that it will be small as with these devices the panorama will hide and the video will fill the screen. Closing the video will return back to the panorama, a text box size of 200 x 160px worked ok in my tests.

Make sure the text box is the same size as the video window. If you open the HTML5 output in a flash enabled web browser, you will see the flash video in the HTML5 panorama. Open it in an iPad and you will see HTML5 Video.

Tip: use a Set Text action to play the video and a Set Text action with no text to unload the video to stop it playing when the text box is closed.