since some days my vimeo iframe will not autoplay anymore. I know the chrome update, which will block autoplay videos with sound. Is the block already active?
The Vimeo Example code doesn't work:
<iframe src="https://player.vimeo.com/video/12345?autoplay=1&loop=1&autopause=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
But netflix.com and vimeo itself has an autoplay video on the homepage, which works.
EDIT: Chrome version 66.0.3359.139 macOS High Sierra 10.13.4
Does anyone have an idea or answer?
Thanks!
Annotating the <iframe> with an allow attribute worked for me:
<iframe ... allow="autoplay; fullscreen"></iframe>
It's called "Iframe delegation" and is described here: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes.
You need to add &muted=1 to the iFrame src path and you need to add the attribute allow="autoplay" to the iFrame. Now the Vimeo video starts automatically again in Chrome.
yes, according to their documentation it is.
https://help.vimeo.com/hc/en-us/articles/115004485728-Autoplaying-and-looping-embedded-videos
EDIT:
Advance browsers like FireFox, Chrome and Safari are now blocking video autoplay by default.
CHROME Auto-Play Policy:
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
The Media Engagement Index, or MEI for short, a way of Chrome is to allow AutoPlay audio on your page to be based on your previous interactions with this webpage as a user. You can see what this looks like by going to
chrome://media-engagement/
MEI is calculated per user profile, and is persisted to incognito mode.
WEBKIT/SAFARI Auto-Play Policy:
https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/
FIREFOX Auto-Play Improvements:
https://www.ghacks.net/2018/09/21/firefox-improved-autoplay-blocking/
NOTE:
Don’t assume a media element will play, and don’t show the pause button from the start. Look at the Promise returned by the play function on HTMLMediaElement to see if it was rejected:
var promise = document.querySelector('video').play();
if (promise !== undefined) {
promise.catch(error => {
// Auto-play was prevented
// Show a UI element to let the user manually start playback
}).then(() => {
// Auto-play started
});
}
Autoplay + Mute + Start at time x sec =
<div>
<iframe src="https://player.vimeo.com/video/342787403?&autoplay=1&loop=1&title=0&byline=0&portrait=0&muted=1&#t=235s" style="position:absolute;top:0;left:0;width:100%;height:100%;" width="1400" height="900" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
#t parameter must be the last one.
Now the autoplay video just works if the audio is muted, you need to add the muted parameter into your api or iframe code &muted=1, you can change your browser preferences to allow autoplay unmuted videos:
chrome://flags/#autoplay-policy
Change the default option to "No user gesture is required"
If the user clicks the video you can unmuted it!!
If you are paid member and want to use video as a background, this is probably what you need:
?background=1: This parameter automatically disables all elements in the player (play bar, buttons, etc), autoplays, loops, and mutes your video on load. Please note: the background parameter is only supported for videos hosted by paid members. Learn more here.
Or, if you are not:
?muted=1 This parameter will automatically mute your video on load. Once your video plays, viewers can manually un-mute by clicking on the volume bar within the player.
BUT, I still can't make it work on the phone.
muted parameter fixed my issue:
<iframe src="https://player.vimeo.com/video/xbackground=1&autoplay=1&loop=1&byline=0&title=0&muted=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay; fullscreen"></iframe>
I have just learned that YouTube live stream URL is randomly changing. I found this on stackoverflow "YouTube Live Streaming embed code keeps changing"
so I know the the static embed link is this https://www.youtube.com/embed/live_stream?channel=[channel ID]
What I would like know is how to add autoplay=1 to the embed link and any other functions like this.
30/7/2017 Update - this method does not work on ios V10.3.3 tested on an iPhone 6+ the player crashes safari and chrome !
It's really simple, just add the parameter autoplay=1 at the end:
https://www.youtube.com/embed/live_stream?channel=[channel ID]&autoplay=1
allow autoplay and add it to the end of the embed src.
<iframe width="560" height="315" src="https://www.youtube.com/embed/ldy3VEPIRk0?autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
I am currently using the vimeo embed code for iframe and all has been working fine until recently. All of the sudden the fullscreen button on the player no longer works. Same thing is occurring on Windows with FireFox version 41.0.2, but conversely works on Mac OSX. Chrome fails to go fullscreen on both Windows and OSX.
Try adding the html5 fullscreen attributes to your iframe:
<iframe src="//player.vimeo.com/video/VIDEO_ID" width="WIDTH" height="HEIGHT" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true"></iframe>
I am using following code to embed a Youtube video with HTML5 player. It is working fine in Chrome and IE but failing in Firefox.
<iframe width="560" height="315" src="http://www.youtube.com/embed/mwG7z_aowKw?html5=1" ></iframe>
Version of Firefox is 26.0
Is there any error in the iframe code?
Is there any work-around possible?
update - Working in safe mode with addons disabled.
But Problem still persist when disabled all addons in normal mode.
How to debug this problem?
Works for me - FF 27. There is no error in iframe I would say there is something wrong with yours FF.
I ran into a problem with a Youtube video not running on my Wordpress site, www.marcoislandscene.tv. It works fine on Chrome and IE.
YouTube generated the following code:
<iframe width="640" height="360" src="https://www.youtube-nocookie.com/embed/afOCUx-xnsw?rel=0" frameborder="0" allowfullscreen></iframe>
This code would display the preview but the video wouldn't run. I removed "-nocookie" from the code and it runs fine on FF, IE and Chrome.
Vimeo videos are flash, is there a way to render the videos differently depending on the browser/device?
Here is the embed code Vimeo gives me:
<div class="video-holder"> <iframe src="http://player.vimeo.com/video/#####"
width="561" height="316" frameborder="0" webkitAllowFullScreen mozallowfullscreen
allowFullScreen></iframe></p>
What HTML/CSS would I need to use to ensure renderability in multiple browsers? Or is it better to convert from source?
You are embedding inside an iframe. So if Vimeo supports the devices you target, it will display the appropriate content for those devices. Vimeo supports iOS and Android devices, possibly others as well. I think by default, if there is no support for Flash, it defaults to its H264 player, which means you are safe.
BTW, notice you have not closed your div.