My website has a player for multiple videos. I've been adapting the code to use YouTube's iframe API as the player. I can't get the videos to autoplay.
Here's the relevant code:
<body>
<iframe id="existing-iframe-example"
width="640" height="360"
src="https://www.youtube.com/embed/-SFcIUEvNOQ? autoplay=1&;enablejsapi=1"
frameborder="0"
autoplay="1"
style="border: solid 4px #37474F"
></iframe>
<div id="player"></div>
<div id="movieButtons" class="movieButtons">
<button class="movieButton" data-movieAdr="1-VjtC939_Q">Memorial Slide Show</button>
The rest is standard YouTube iframe API script. You can see I tried setting autoplay=1 as both an iframe parameter and as part of the iframe src. I've also tried including it in the data in the button. None of these seems to work. The vids load when the buttons are clicked, but they don't autoplay.
It's not working since April of 2018 because Google decided to give greater control of playback to users. You just need to add &mute=1 to your URL.
Autoplay Policy Changes
<iframe
id="existing-iframe-example"
width="640" height="360"
src="https://www.youtube.com/embed/-SFcIUEvNOQ?autoplay=1&mute=1&enablejsapi=1"
frameborder="0"
style="border: solid 4px #37474F"
></iframe>
Update :
Audio/Video Updates in Chrome 73
Google said :
Now that Progressive Web Apps (PWAs) are available on all desktop platforms, we are extending the rule that we had on mobile to desktop: autoplay with sound is now allowed for installed PWAs. Note that it only applies to pages in the scope of the web app manifest.
https://developers.google.com/web/updates/2019/02/chrome-73-media-updates#autoplay-pwa
mute=1 or muted=1 as suggested by #Fab will work. However, if you wish to enable autoplay with sound you should add allow="autoplay" to your embedded <iframe>.
<iframe type="text/html" src="https://www.youtube.com/embed/-ePDPGXkvlw?autoplay=1" frameborder="0" allow="autoplay"></iframe>
This is officially supported and documented in Google's Autoplay Policy Changes 2017 post
Iframe delegation A feature policy allows developers to selectively
enable and disable use of various browser features and APIs. Once an
origin has received autoplay permission, it can delegate that
permission to cross-origin iframes with a new feature policy for
autoplay. Note that autoplay is allowed by default on same-origin
iframes.
<!-- Autoplay is allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay">
<!-- Autoplay and Fullscreen are allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen">
When the feature policy for autoplay is disabled, calls to play()
without a user gesture will reject the promise with a NotAllowedError
DOMException. And the autoplay attribute will also be ignored.
This code allows you to autoplay iframe video
<iframe src="https://www.youtube.com/embed/2MpUj-Aua48?rel=0&modestbranding=1&autohide=1&mute=1&showinfo=0&controls=0&autoplay=1" width="560" height="315" frameborder="0" allowfullscreen></iframe>
Here Is working fiddle
<iframe src="https://www.youtube.com/embed/2MpUj-Aua48?rel=0&modestbranding=1&autohide=1&mute=1&showinfo=0&controls=0&autoplay=1" width="560" height="315" frameborder="0" allowfullscreen></iframe>
https://jsfiddle.net/YoJey_Thilipan/6naLm0yc/6/
it is working fine with me thanks.
You can use embed player with opacity over on a cover photo with a right positioned play icon. After this you can check the activeElement of your document.
Of course I know this is not an optimal solution, but works on mobile devices too.
<div style="position: relative;">
<img src="http://s3.amazonaws.com/content.newsok.com/newsok/images/mobile/play_button.png" style="position:absolute;top:0;left:0;opacity:1;" id="cover">
<iframe width="560" height="315" src="https://www.youtube.com/embed/2qhCjgMKoN4?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in- picture" allowfullscreen style="position: absolute;top:0;left:0;opacity:0;" id="player"></iframe>
</div>
<script>
setInterval(function(){
if(document.activeElement instanceof HTMLIFrameElement){
document.getElementById('cover').style.opacity=0;
document.getElementById('player').style.opacity=1;
}
} , 50);
</script>
Try it on codepen: https://codepen.io/sarkiroka/pen/OryxGP
For those who are attempting to use autoplay property on mobile view:
Autoplay function for mobile devices is a serious thing and it is disabled for most cases. The various reason includes data usage, spam advertisement, etc.
Related
i have a playcanvas experience made and hosted on a link. which uses gyroscope for vr experience. if i open the link directly in android device. it's working with gyro and all.
but when i embedd the link in an iframe and open that page in mobile. the gyroscope is not working.
code i used for embedding iframe is :
<iframe id="the_iframe" class="bg" allowvr="yes" allow="vr; xr; accelerometer; magnetometer; gyroscope; autoplay;"
allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" frameborder="0"></iframe>
what worked for me is adding "webxr" to allow list.
<iframe id="the_iframe" class="bg" allowvr="yes" allow="vr; xr; accelerometer; magnetometer; gyroscope; webvr;webxr;"
allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" frameborder="0"></iframe>
although it works for android. not working in ios devices.
I have page where all I need is a simple, full-width embedded google map. When I set the custom size of the map to 1980px x 240px, and put the iframe on my page, the width of the map is 1200px by default.
When I open Chrome DevTools window and find the iframe there, there is a style forced to the iframe, that is not in the original iframe I pasted from google maps.
The website is build on Wordpress. Link: https://zubar-litomerice.cz/
The original iframe:
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12061.22772549553!2d14.12158474671251!3d50.54234042444077!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47097f6dc0e9276d%3A0xa7e584e5a1a520cc!2sHavlov%C3%A1+Hana+MUDr.!5e0!3m2!1sen!2scz!4v1533828352977" width="1980" height="240" frameborder="0" style="border:0" allowfullscreen></iframe>
Forced style:
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12061.22772549553!2d14.12158474671251!3d50.54234042444077!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47097f6dc0e9276d%3A0xa7e584e5a1a520cc!2sHavlov%C3%A1+Hana+MUDr.!5e0!3m2!1sen!2scz!4v1533828352977" width="1980" height="240" frameborder="0" style="border: 0px; width: 1200px; height: 145px;" allowfullscreen=""></iframe>
I have searched for answers before asking and could not find anything, but maybe you can help me find the answer I am looking for.
Loop feature is not working.Example
Only a playlist can loop.
As such, there is a workaround by creating a playlist of the video.
https://www.youtube.com/embed/X03jlFijeQ0?playlist=X03jlFijeQ0&autoplay=1&controls=0& modestbranding=1&rel=0&showinfo=0&loop=1
You are welcome to test and play with it here
Also note that you need to set rel=0 as well.
Here is the iframe tag you can use, this is just your video in 'VIDOE_ID' & put repetable video id in 'REPEAT_VIDEO_ID_AGAIN'. It will work 100%.
<iframe width="600" height="315" src="https://www.youtube.com/embed/VIDOE_ID?rel=0&controls=1&showinfo=0&autoplay=1&loop=1&iv_load_policy=3&playlist=REPEAT_VIDEO_ID_AGAIN" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
I have a tumblr with many YouTube video posts. I am wondering how I could use CSS to select the {Video-400} post code and hide the automatic controls that show up on the video.
Here is an example of the automatic controls/visible title I am referring to. They only go away once you play the video: http://jaspingo.tumblr.com/post/105022194129/lol-that-last-one-though.
Also, here are a couple of CSS selectors that might be of use (I don't know the exact differences between them).
#content .video{
}
.video{
}
#content .video iframe{
}
And below is the corresponding HTML.
<div id="content">
<div class="posts">
{block:Posts}
<div class="entry">
{block:Video}
<div class="video">
{Video-400}
</div>
{/block:Video}
</div>
{/block:Posts}
</div>
</div>
Any help would be appreciated. I need to understand the difference between the CSS selectors to fully comprehend the way the code works. And yes, i have tried custom embed code from YouTube, but the same problem exists.
I don't know how Tumblr does their embeds, but you can grab the embed code from YouTube without the controls. A typical embed code looks like:
<iframe width="560" height="315" src="//www.youtube.com/embed/F8Z-ayQkK2A" frameborder="0" allowfullscreen></iframe>
If you want to remove the controls after the fact, you need to add ?controls=0 to the end of the src URL. It becomes:
<iframe width="560" height="315" src="//www.youtube.com/embed/F8Z-ayQkK2A?controls=0" frameborder="0" allowfullscreen></iframe>
To demonstrate, here's the same video using the control parameter outside of an embed code.
The only issue you could run into is with Tumblr using the YouTube API to call the video rather than the embed code. In that case, I'm not sure there's much you can do about it unless you have access to the source and the method for pulling the video into your blog.
IE seems to ignore elements with higher z-indexes, when they overlap an iframe.
Have read various other posts that suggest adding a combination of &wmode=transparent to the iframe src, and wmode="opaque" attribute to the iframe itself; though IE doesn't seem to like either of these.
<iframe title="YouTube video player" class="media-youtube-html5" type="text/html" width="500" height="300" src="http://www.youtube.com/v/9W82sMSMJJg?hd=1&wmode=transparent" wmode="opaque" frameborder="0"></iframe>
http://jsfiddle.net/7fd8Y/
Any help would be much appreciated.
I have updated your code. Now working fine in IE, just added the wmode parameter through
javascript
jsfiddle
$('iframe').each(function(){
var url = $(this).attr("src");
$(this).attr("src",url+"?wmode=transparent");
});
Refer This post
Your link is wrong, the default link word should be embed,
<iframe src="http://www.youtube.com/embed/9W82sMSMJJg" frameborder="0"></iframe>
but not just v (v-link ignores z-index):
<iframe src="http://www.youtube.com/v/9W82sMSMJJg" frameborder="0"></iframe>
Here is an example for IE:
http://jsfiddle.net/7fd8Y/21/