You can easily embed Youtube video with autoplay function when page load but listen – autoplay function of youtube embedded video doesn’t work on mobile devices. I mean when you open your page in the desktop, laptop, then autoplay function works but when you open your website page on mobile devices, then youtube video doesn’t start automatically.
On a computer, go to the YouTube video you want to embed. Under the video, click SHARE.; Click Embed.; From the box that appears, copy the HTML code. Creating a video iframe. Next, we need to create our iframe. Use document.createElement to create a div, and innerHTML to setup the YouTube iframe inside it (I copy/pasted this from YouTube). We’ll use the videoId value for the video’s ID in the embed string. We’ll also add &autoplay=1 at the end of the video src to make the video autoplay.
Here is the code for embedding youtube video with an autoplay function. Just copy whole code and paste it in your website page, must replace with your own Youtube video URL ID with current video URL ID – https://www.youtube.com/embed/WrsyXjiuQMI
Just put “?autoplay=1” in the URL of embedded youtube video code to autostart or autoplay youtube video without clicking on the play button.
After adding code, your URL would be looking like this – :
In case, if you want to disable the autoplay function of Youtube video, then just change the code ?autoplay=1 to ?autoplay=0
I hope you understood how to embed youtube video with autoplay or autostart function.
You can embed or add your favorite YouTube video on your website using YouTube IFrame Player API. Its very easy to use and it comes with many ready to use features, that would allow you to customize and control the embedded video. In this article, I’ll show you how to embed a YouTube video on a web page with its sound muted, when the page loads. Along with it, the example here shows how to set a default volume to the player and how with the onStateChange Event you can control the player's behavior.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. Isnapshot 3 4 0.
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. Calendar pro 3 64.
I have explained the properties after the script section of this example.
![Youtube Iframe Autoplay Youtube Iframe Autoplay](https://worldclassmedia.com/wp-content/uploads/2014-YouTube-Marketing-Info-Graphic.jpg)
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. Imusic 2 0 7 1 – music manager & downloader. 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.
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.
![Youtube Iframe Autoplay Youtube Iframe Autoplay](https://i.stack.imgur.com/4TRRe.png)
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.
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
Youtube Iframe Autoplay Muted
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
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 Autoplay Embed
Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.