On January last week YouTube introduce a new API for embedding videos on web pages. To embed a video, use an iframe with YouTube video URL as its src attribute. The URL form http://www.youtube.com/embed/VIDEO_ID is used in iframe to load the video. For more details and examples refer 'A New Way To Embed YouTube Videos' posted on JULY 22, 2010.
Now a YouTube video can be embed in web pages without the support of flash, since it uses the HTML5 also. Now most of the browsers support HTML5. This API is compactable for IOS devices (iPhone, iPad) also. The YouTube uses HTML5 player rather than flash for mobile devices.
How to integrate the the new iframe API.
1) Include the javascript library 'IFrame Player API code'.
<script>
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>
This script will append the the API library to the head tag of the web page.
2) Add a container element to the web page, the iframe is is added to this container element.
<div id=”myVideo” ></div>
3) Use the API script to create the iframe in the container element.
<script>
var myPlayer;
function onYouTubePlayerAPIReady() {
myPlayer = new YT.Player('myVideo', {
height: '390',
width: '640',
videoId: 'u1zgFlCw8Aw',
playerVars: {
'start': 10
},
events: {
'onReady': callBack1,
'onStateChange': callBack2
}
});
}
</script>
The function onYouTubePlayerAPIReady is called by API while it is ready. YT.Player creates a javascript player object myPlayer and create an iframe inside the container element of specified id myVideo. It provides the options for customising iframe arrtibutes, player parameters and callback for Events from the player. we can use the js object myPlayer control the embed video throughout the js.
We can also embed video without a container element, include the iframe itself inthe webpage and use the API scrips. The element id is specified to the iframe.
<iframe id="myVideo" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1&origin=example.com"
frameborder="0"></iframe>
Here we have to enable the API by specifing in the video url
http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1 &origin=example.com.
Here it solves the problems such as 'How to embed a YouTube video for iPad/iPhone ?' , 'YouTube API for iPad/iPhone', 'YouTube API for HTML5 player', YouTube API for mobile devices. etc...
Reference
1.http://apiblog.youtube.com/2010/07/new-way-to-embed-youtube-videos.html
2.http://apiblog.youtube.com/2011/01/introducing-javascript-player-api-for.html
3.http://code.google.com/apis/youtube/iframe_api_reference.html
4.http://code.google.com/apis/youtube/js_api_reference.html
5.http://code.google.com/apis/youtube/player_parameters.html?playerVersion=AS3
Note: This post is for my reference, donate me by clicking the adds.
Now a YouTube video can be embed in web pages without the support of flash, since it uses the HTML5 also. Now most of the browsers support HTML5. This API is compactable for IOS devices (iPhone, iPad) also. The YouTube uses HTML5 player rather than flash for mobile devices.
How to integrate the the new iframe API.
1) Include the javascript library 'IFrame Player API code'.
<script>
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>
This script will append the the API library to the head tag of the web page.
2) Add a container element to the web page, the iframe is is added to this container element.
<div id=”myVideo” ></div>
3) Use the API script to create the iframe in the container element.
<script>
var myPlayer;
function onYouTubePlayerAPIReady() {
myPlayer = new YT.Player('myVideo', {
height: '390',
width: '640',
videoId: 'u1zgFlCw8Aw',
playerVars: {
'start': 10
},
events: {
'onReady': callBack1,
'onStateChange': callBack2
}
});
}
</script>
The function onYouTubePlayerAPIReady is called by API while it is ready. YT.Player creates a javascript player object myPlayer and create an iframe inside the container element of specified id myVideo. It provides the options for customising iframe arrtibutes, player parameters and callback for Events from the player. we can use the js object myPlayer control the embed video throughout the js.
We can also embed video without a container element, include the iframe itself inthe webpage and use the API scrips. The element id is specified to the iframe.
<iframe id="myVideo" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1&origin=example.com"
frameborder="0"></iframe>
Here we have to enable the API by specifing in the video url
http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1 &origin=example.com.
Here it solves the problems such as 'How to embed a YouTube video for iPad/iPhone ?' , 'YouTube API for iPad/iPhone', 'YouTube API for HTML5 player', YouTube API for mobile devices. etc...
Reference
1.http://apiblog.youtube.com/2010/07/new-way-to-embed-youtube-videos.html
2.http://apiblog.youtube.com/2011/01/introducing-javascript-player-api-for.html
3.http://code.google.com/apis/youtube/iframe_api_reference.html
4.http://code.google.com/apis/youtube/js_api_reference.html
5.http://code.google.com/apis/youtube/player_parameters.html?playerVersion=AS3
Note: This post is for my reference, donate me by clicking the adds.
