TL;DR – Embedding a YouTube video to your website lets you add dynamicity to your site without having to worry about format compatibility issues.
Iframe not loading? Go directly to the tool page, here. Did you find this helpful? What else would you like to see? Did you find any bugs? A regular YouTube embed code looks something like this: What we need to do is add a question mark to the end of that, to allow for parameters (options), and then we add the option to make the video autoplay.
Contents
Why Not HTML video Tag?
HTML5 has a native <video> tag that allows you to include videos in your webpage by defining a source. However, there's a risk the user's browser won't support the format of your video, and adding multiple sources might be a bit of a hassle.
Understanding how to embed a YouTube video in HTML can save you a lot of trouble. The trick is using an iframe instead of the
<video>
tags:The iframe stands for an inline frame and allows you to embed one webpage into another – in this case, a YouTube page. This way, you don't need to worry about whether your file format is supported or not.
Step by Step: How to Embed a YouTube Video
To embed a video from YouTube, open its page and find the Share button under the video player:
As you click it, you will see a few sharing options, including various social media platforms. The very first on the list is Embed. Click on it with your cursor:
YouTube will generate a code for you to use automatically. The <iframe> tag will have the URL of the video source, height and weight of the player and a few more attributes included:
In our case, the code looked like this:
<iframe width='560' height='315' src='https://www.youtube.com/embed/RuckLtuInNY' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>
All you need to do now is click Copy and paste the code into your HTML page.
Theory is great, but we recommend digging deeper!
Customizing a YouTube Video in HTML5
Now that you know how to embed a YouTube video in HTML, you should also understand how to modify the way it works. By adding some parameters to the end of the URL in the embedding code, you can affect the behavior of the player. To use a parameter, include a question mark (
?
) at the end of the URL, and then add one or multiple parameters along with their values.![Iframe Iframe](https://i.stack.imgur.com/Q1tmQ.jpg)
The
autoplay
parameter allows you autoplay YouTube embedded videos on your web page. Adding autoplay=1
to the URL will make the video start playing immediately after the main page and the video loads, while autoplay=0
will not.The
loop
parameter lets you loop the video indefinitely or until the user stops it manually. Using loop=1
makes the video start over again after it ends, while loop=0
means it will stop after playing once.The
playlist
parameter specifies if multiple YouTube videos should be played one after another in consecutive order. This allows you to create a personal playlist on your site.See a few more handy parameters you can use in a table below:
Parameter | Definition |
---|---|
color | When set to white, the already watched part of the video will be highlighted in white in the progress bar |
disablekb | When set to 1, the video player will not react to keyboard controls |
fs | When set to 0, the fullscreen button will stay visible |
modestbranding | When set to 1, the video player will not show the YouTube logo |
How to Embed a YouTube Video: Useful Tips
- Before copying the code from YouTube, you can choose a specific time to start playing the video from instead of the beginning. You can also choose whether to include video controls.
- Don't forget the copyrights – it's illegal to use the creations of other people to make a profit without their permission.
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.
Related Post: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.
The Markup with the Script
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.
Browser Support:
Chrome 39.0 - Yes | Firefox 34.0 - Yes | Internet Explorer 10 - No | Safari - No
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. Raw converter 2 5 1.
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. Presonus studio one pro 3 2 3.
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.
![Youtube Iframe Autoplay Youtube Iframe Autoplay](https://worldclassmedia.com/wp-content/uploads/youtube-autoplay-embed-video.jpg)
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 Omnifocus mac. for the player.
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.
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);
You may also like:How to Embed YouTube Video in a Webpage without IFrame
Youtube Iframe Autoplay
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.
Thanks for reading ☺.
← PreviousNext →
Youtube Iframe Autoplay Download
Youtube Iframe Autoplay Not Working Mobile
Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.