Ref: YouTube Player API Reference
The API provides the necessary JavaScript functions and properties, with which you can control the behavior of the player and the video. For example, you can reduce or increase the players volume, play or stop the video any time, run the video in a loop, auto play video etc.
How to Embed YouTube Video in a Webpage without IFrame
Let’s get started.
Embed YouTube Video with Properties such as Mute, setVolume and AutoPlay
In the first example, I’ll show you how to embed a YouTube video with some features such as AutoPlay, Sound Muted and we’ll also see how to set a value for the volume, when the page loads with the video.
I have explained the properties after the script section of this example.
In the markup section, you will have to add the API source inside the <head> tag. We have to first load the YouTube IFrame API. The API loads asynchronously with the rest of the page. I have also added a <div> element inside the <body> section, which will hold the player.
<html>
<head>
<title>YouTube IFrame API Example</title>
<!--LOAD YouTube "iframe_api" ASYNCHRONOUSLY.-->
<script async src="https://www.youtube.com/iframe_api"></script>
</head>
<body>
<div id="div_YouTube"></div>
</body>
<script>
function onYouTubeIframeAPIReady() {
var player;
player = new YT.Player('div_YouTube', {
videoId: 'nfk6sCzRTbM', // THE VIDEO ID.
width: 560,
height: 316,
playerVars: {
'autoplay': 1,
'controls': 1,
'showinfo': 0,
'modestbranding': 0,
'loop': 1,
'fs': 0,
'cc_load_policty': 0,
'iv_load_policy': 3
},
events: {
'onReady': function (e) {
e.target.mute();
e.target.setVolume(50); // YOU CAN SET VALUE TO 100 FOR MAX VOLUME.
}
}
});
}
</script>
</html>Browser Support:
Chrome 39.0 - Yes | Firefox 34.0 - Yes | Internet Explorer 10 - No | Safari - No
Note: The mute() method does not work in IE 10.
To use the properties and methods provided in the API, we have to first add a pre-defined JavaScript function called onYouTubeIframeAPIReady(). That is the only function that I have added inside the <script> tag in the above example. The function will create the Players object for YT.Player, when the page loads.
While initializing the player, I have defined few parameters that I’ll explain.
1) Container holding the Player: The first parameter is the id of the <div> element (added inside the <body> section), where the API will include the <iframe> element. The <iframe> will contain the player.
2) The Video ID: Every YouTube video has a unique id. The second parameter is the video’s id that I am going play on my website. You can easily get the id of the video. Just go to the YouTube video page and in the browsers address bar you will see the id at end of the URL (followed by the “=” sign). For example, if this is the URL for the video, https://www.youtube.com/watch?v=nfk6sCzRTbM, simply copy the last (bold) characters, that is nfk6sCzRTbM, and paste it against the videoId parameter inside the JavaScript function like this.
videoId: 'nfk6sCzRTbM'
3) Width and Height: Next, I have defined the width and height of the player. The figures are in pixels. It also has a default value, that is, 640 for width and 390 for its height. API will assign default values, if you do not explicitly define any value.
4) playerVars Object: I have defined few more properties to customize my player using the playerVars object.
a. autoplay: If you set the value to 1, the API will Auto play the embed video when the page loads. Set it 0 and your users will have to manually play the video.
b. controls: If set to 1, it will show the pause and play buttons in the player.
c. showinfo: You can hide or show the title of the video. I have set the as 0 as I do not want the title to cover the video.
d. modestbrading: You can hide or show the YouTube logo by setting this parameters value to either 1 or 0.
e. loop: Set the value to 1, if you wish to loop the video or run the video repeatedly.
f. fs: The parameter, when set to 1 will add the full screen option to the player. You will see two square braces at the right bottom corner of the player.
g. cc_load_policy: Show or hide closed captions.
h. iv_load_policy: Show or hide video Annotations.
5) onReady Event Finally, I have defined an event called onReady. It fires the event when the player becomes ready to roll. Within this event, I have set two more parameters. The first parameter sets the player as mute and second parameter set a default volume for the player.
events: {
'onReady': function (e) {
e.target.mute();
e.target.setVolume(50);
}
}I have set the volume as 50, that is, 50% of the max value. You can see the volume at 50% once you un-mute the button on the player. You can adjust or set the player’s volume by assigning a lower value for reduced sound or maximum (such as 100) value for louder sound.
Embed youtube video with onStateChange
The YouTube IFrame API provides many useful events. I have explained about the onReady event in the above example, and here I’ll show how to add the onStateChange event to stop the video after a specified duration.
This event fires whenever the player’s state change. Simply add the below code in the script section.
<script>
function onYouTubeIframeAPIReady() {
var player;
var done = false;
player = new YT.Player('div_YouTube', {
videoId: 'nfk6sCzRTbM',
width: 560,
height: 316,
events: {
'onStateChange': function (e) {
if (e.data == YT.PlayerState.PLAYING && !done) {
setTimeout(e.target.stopVideo(), 5000);
done = true;
}
}
}
});
}
</script>The player’s state is defined with its data property. Here in the above example, I am using a pre-defined namespaced variable to check the state of the player (if it has started playing). If yes, I’ll set a timer to the stop the video after 5000 milliseconds (or 5 seconds).
setTimeout(e.target.stopVideo(), 5000);
How to Embed YouTube Video in a Webpage without IFrame
That's it. The examples here in this article are just the tip of the iceberg. It shows some basic features on how to embed a YouTube video with its sound muted when the page loads, how to AutoPlay a video, how to set a default volume and how to add and use couple of events that the API provides, which will help customize the player on your website.
🙂