I am trying to embed the new iframe version of a YouTube video and get it to auto play.
As far as I can tell, there is no way of doing this by amending flags to the URL. Is there a way to do it by using JavaScript & the API?
This question is related to
javascript
html
iframe
youtube
youtube-api
The embedded code of youtube has autoplay off by default. Simply add autoplay=1
at the end of "src" attribute. For example:
<iframe src="http://www.youtube.com/embed/xzvScRnF6MU?autoplay=1" width="960" height="447" frameborder="0" allowfullscreen></iframe>
Since April 2018, Google made some changes to the Autoplay Policy. You not only need to add the autoplay=1
as a query param, but also add allow='autoplay'
as an iframe's attribute
So you will have to do something like this:
<iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1" allow='autoplay'></iframe>
To have the accepted answer by mjhm working on Chrome 66 in May 2018, I added allow=autoplay
to the iframe and enable_js=1
to the query string:
<iframe allow=autoplay width="420px" height="345px" src="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1&enable_js=1"></iframe>
Multiple queries tip for those who don't know (past me and future me)
If you're making a single query with the url just ?autoplay=1
works as shown by mjhm's answer
<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1"></iframe>
If you're making multiple queries remember the first one begins with a ?
while the rest begin with a &
Say you want to turn off related videos but enable autoplay...
This works
<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?rel=0&autoplay=1"></iframe>
and this works
<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1&rel=0"></iframe>
But these won't work..
<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?rel=0?autoplay=1"></iframe>
<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0&autoplay=1&rel=0"></iframe>
example comparisons
https://jsfiddle.net/Hastig/p4dpo5y4/
more info
Read NextLocal's reply below for more info about using multiple query strings
December 2018,
Looking for an AUTOPLAY, LOOP, MUTE youtube video for react.
Other answers didn't worked.
I found a solution with a library: react-youtube
class Video extends Component {
_onReady(event) {
// add mute
event.target.mute();
// add autoplay
event.target.playVideo();
}
render() {
const opts = {
width: '100%',
height: '700px',
playerVars: {
// remove video controls
controls: 0,
// remove related video
rel: 0
}
};
return (
<YouTube
videoId="oHg5SJYRHA0"
opts={opts}
// add autoplay
onReady={this._onReady}
// add loop
onEnd={this._onReady}
/>
)
}
}
<iframe width="560" height="315"
src="https://www.youtube.com/embed/9IILMHo4RCQ?rel=0&controls=0&showinfo=0&autoplay=1"
frameborder="0" allowfullscreen></iframe>
at the end of the iframe src, add &enablejsapi=1
to allow the js API to be used on the video
and then with jquery:
jQuery(document).ready(function( $ ) {
$('.video-selector iframe')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
});
this should play the video automatically on document.ready
note, that you could also use this inside a click function to click on another element to start the video
More importantly, you cannot auto-start videos on a mobile device so users will always have to click on the video-player itself to start the video
Edit: I'm actually not 100% sure on document.ready the iframe will be ready, because YouTube could still be loading the video. I'm actually using this function inside a click function:
$('.video-container').on('click', function(){
$('video-selector iframe')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
// add other code here to swap a custom image, etc
});
Nowadays I include a new attribute "allow" on iframe tag, for example:
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
The final code is:
<iframe src="https://www.youtube.com/embed/[VIDEO-CODE]?autoplay=1"
frameborder="0" style="width: 100%; height: 100%;"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
2014 iframe embed on how to embed a youtube video with autoplay and no suggested videos at end of clip
rel=0&autoplay
Example Below: .
<iframe width="640" height="360" src="//www.youtube.com/embed/JWgp7Ny3bOo?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
1 - add &enablejsapi=1
to IFRAME SRC
2 - jQuery func:
$('iframe#your_video')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
Works fine
To use javascript api,
<script type="text/javascript" src="swfobject.js"></script>
<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<script type="text/javascript">
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/OyHoZhLdgYw?enablejsapi=1&playerapiid=ytplayer&version=3",
"ytapiplayer", "425", "356", "8", null, null, params, atts);
</script>
To play the youtube with the id:
swfobject.embedSWF
reference: https://developers.google.com/youtube/js_api_referencemagazine
The flags, or parameters that you can use with IFRAME and OBJECT embeds are documented here; the details about which parameter works with what player are also clearly mentioned:
YouTube Embedded Players and Player Parameters
You will notice that autoplay
is supported by all players (AS3, AS2 and HTML5).
August 2018 I didn't find a working example on the iframe implementation. Other questions were related to Chrome only, which gave it away a little.
You'll have to mute sound mute=1
in order to autoplay on Chrome. FF and IE seem to be working just fine using autoplay=1
as parameter.
<iframe src="//www.youtube.com/embed/{{YOUTUBE-ID}}?autoplay=1&mute=1" name="youtube embed" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Source: Stackoverflow.com