Other than that, autoplayed media tend to annoy and distract some site visitors, apply it wisely. In case you are certain in your decision, follow the steps below to make embedded YouTube videos autoplay: 1. Open YouTube in your browser and find the video you’d like to embed. Click Share under the video. Pick the Embed sharing option. The iframe tag below would load a 640x360px player that would play the YouTube video M7lc1UVf-VE. Since the URL sets the autoplay parameter to 1, the video would play automatically once the. YouTube autoplay does come with one main disadvantage though. For many people, it simply doesn’t work. There’s nothing more annoying than watching a video on YouTube, and expecting more similar videos to play afterwards, only to find that the room goes silent and that nothing happens. In this quick video, I’ll show you how to embed a YouTube video in HTML, how to make it responsive on any sized device and I’ll reveal how you can easily adj. Here Mudassar Ahmed Khan has explained with an example, how to play (embed) YouTube Videos without using IFRAME in HTML Page. In order to play (embed) YouTube Videos without using IFRAME, the EMBED element needs to be used as the HTML5 Video tag is not meant to play videos from other domain URLs and hence the only solution other than IFRAME is the EMBED tag.
- Youtube Iframe Autoplay App
- Autoplay Youtube Iframe Ios
- Youtube Iframe Autoplay Off
- Youtube Iframe Autoplay Link
- How To Autoplay Youtube Videos
- Youtube Iframe Autoplay Mobile
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.
Youtube Iframe Autoplay App
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). Dombratuner 1 1 – kazakh dombra tune. 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. Cronette 1 9 – launch tasks automatically. 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.
![Autoplay youtube iframe ios Autoplay youtube iframe ios](https://i.ytimg.com/vi/SVSf8fNp_kg/maxresdefault.jpg)
b. controls: If set to 1, it will show the pause and play buttons in the player.
Autoplay Youtube Iframe Ios
![Youtube Youtube](https://i.ytimg.com/vi/9GO8xfxjGMA/maxresdefault.jpg)
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 Off
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.
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 Link
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.
How To Autoplay Youtube Videos
Thanks for reading ☺.
← PreviousNext →
Youtube Iframe Autoplay Mobile
Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.