I have a simple modal dialog:
User clicks on button.
Modal overlay shows.
YouTube <iframe> element is added.
All is good in most browsers - video starts playing, except Safari 11.1.
Safari has new auto-play policy that requires explicit click and video element to start playing it: https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/
Is there some way to make it autoplay for dynamically added YouTube (or Vimeo) iframe?
Example YouTube iframe:
<iframe frameborder="0" allowfullscreen="" allow="autoplay; encrypted-media; fullscreen" src="https://www.youtube-nocookie.com/embed/20iMzRklHNU?rel=0&controls=0&showinfo=0&autoplay=1&enablejsapi=1"></iframe>
Safari 11 now disables/blocks autoplay features. You have to manually go to the safari settings and Allow All Auto-Play.
Related
Is it possible to disable the video playing on fullscreen?
When I press play on the player on the iOS, it is playing the video in fullscreen mode, whereas in android it is playing in the normal mode.
Sharing the code I'm using
<div>
<iframe
src="https://player.vimeo.com/video/120061340?playsline=true"
frameborder="0"
allowfullscreen="false"
allow="autoplay; encrypted-media"
webkit-playsinline="true"
playsline="true"
playsinline="true"
style="position:absolute;top:0;left:0;width:100%;height:100%;"
controlsList="nofullscreen"
title="Sample Video">
</iframe>
</div>
<script src="https://player.vimeo.com/api/player.js">
</script>
Please let me know if I'm missing something here
You're loading an iframe and trying to put video element attributes on it. Instead of loading the iframe, you'd need to call the video file directly in your own video element. Alternately, you can add a mutation observer that waits for the Vimeo video element to be inserted into the page and which then adds the webkit-playsinline attribute to it.
Is it possible to have an embed YouTube clip on your website that auto-plays when you load the page and when you press the clip it starts from the beginning
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1">
</iframe>
I looked around but I can't find the specific functionality I am looking for.
Auto play policy has been changed.
( https://developers.google.com/web/updates/2017/09/autoplay-policy-changes )
If you want to autoplay, add "mute". (Tested in Chrome)
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>
And you can control the youtube video with JavaScript.
https://developers.google.com/youtube/iframe_api_reference
It can be implemented variously. I made a sample. (use "seekTo" API)
https://jsfiddle.net/raykim2414/uv7b6ty4/15/
i am trying to create a webpage which other than some other content also includes a video.
because of the reason that i have to append the video url dynamically i am using the <iframe> tag isntead of <video> tag.
it is working fine in chrome and other browser, But when i am checking it on internet explorer(11) the video is getting played on media player. NOT inside the webpage.
i am not using the html <video>. code is something as below.
<iframe class="video-responsive-iframe"
ng-src="http://trinilearn.vo.llnwd.net/o3/RV/RV-10723/05-profile.mp4"
frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
i am expecting it to open the video in the webpage itself , but it is always opened in the media player.
Try using the video tag instead.
<video class="video-responsive-iframe" src="http://trinilearn.vo.llnwd.net/o3/RV/RV-10723/05-profile.mp4" webkitallowfullscreen mozallowfullscreen allowfullscreen></video>
I am using below iframe to load the vimeo video.
<iframe src="https://player.vimeo.com/video/12345?title=0&byline=0&portrait=0" width="100%" height="349" frameborder="0" scrolling="no" class="example-video"
name="example-video" allowtransparency="true" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen>
</iframe>
White screen is shown on Internet explorer on page load, but the play/pause buttons are shown.
Video thumbnail is not shown on IE11 for the below versions:
11.0.9600.18954,
11.1155.15063.0,
11.2189.14393.0 and higher versions.
I found the issue is with the background image which is not being rendered only in IE versions (11.0.9600.18954 and 11.0.9600.19036 ) and the class 'vp-preview-cover' is not being added to the element with data attribute 'data-thumb'.
I am facing an security issue when i'm trying to open the background image in a new tab. Attached the screenshot of the same.
We have tested this across multiple versions of IE (with the highest being 11.492.16299.0) with your attached and were not able to reproduce. Without more information or a page as an example it is difficult for us to help you.
I'm using the YouTube iframe api to embed a video.
When playing the video on an iPhone, the video automatically switches to full screen mode. I was wondering if it's possible to force the same behavior on an Android? (currently the video is played inline, which doesn't look so good).
There is no way to automatically play the video fullscreen. The closest you could get is to put the player in a fullscreen div and autoplay it using the url params:
<iframe width="100%" height="100%" src="//www.youtube.com/embed/fSy6uh-GjCc?controls=0&autoplay=1&showinfo=0" frameborder="0" allowfullscreen></iframe>