HTML5 Video Solutions for YouTube

YouTube does not embed in HTML5 video the way regular video files do. This is annoying because HTML5 gives greater control over video playback. below are some solutions

Embedding Controls Within an iFrame

YouTube has a method for embedding videos within HTML or other environments, using a combination of an <iframe> tag and properties can be set by including them in the URL. Example

Basic iFrame tag (the karats have been removed):

iframe width=”560″ height=”315″ src=”; frameborder=”0″ allowfullscreen

You can adjust the width and the height by changing the numbers. Here’s an iFrame tag that tells the video to autoplay, loop and remove the controls:

iframe width=”1280″ height=”720″ src=”; frameborder=”0″ allowfullscreen

Here autoplay=1 controls = 0 and loop=1 appear in the text of the URL, following a ? (question mark). You will often see question marks in URLs – they pass values to a function on the source page. For example,  if you shop for new sneakers on Amazon, you might go to Amazon, select SHOES and then select ATHLETIC SHOES. You will often see a question mark in the URL of the search page, with your search criteria following. For example:


MediaElements is a Javascript library (much like JQuery). You must install a link to the library, a script and a .css to make it work.

1. Download the source files at
. If you have not already, link to the JQuery Library in your tag. You can use this:

<script src=””></script&gt;

3. Link to the mediaelement-and-player.min.js script file. (It’s in the download.) Make sure this script appears AFTER the link to the JQuery Library.

4. Add a link to the mediaelementplayer.css file to yourtag (It’s in the download):

 < link rel ="stylesheet" href = "mediaelementplayer.css" />

Style normally, using the “player1” ID:

<video width="640" height="360" id="player1" preload="none">
    <source type="video/youtube" src="" />

This blog is for exploring new models of journalism using technology and community participation.

Posted in Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: