I have a landing page where I added a background video. This video is hosted on vimeo platform.
Video autoplay is completely working on all devices except iPhone mobile. So please suggest me the solution to autoplay background video on iPhone mobile.
Please check following iFrame code -
<iframe src="https://player.vimeo.com/video/479105292?autoplay=1&background=1&hd=1&loop=1&title=0&byline=0&portrait=0&muted=1&playsinline=1" frameborder="0" data-fullscreeneo="" frameborder="0"allow="autoplay; fullscreen" fullscreen webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
Related
I got this problem for almost 1 week without any solution working.
I have an ReactApp use iframe tag to play youtube video.
The request is to click another tag (such as thumbnail) then video will be played instead of clicking directly to iframe.
Thumbnail have z-index = 2; iframe z-index = 1. When click thumbnail, thumnail will be hidden (display=none).
I can do this by add '?autoplay=1&mute=1' to youtube embed url when click the thumbnail. This works well on desktop. BUT Because youtube not allow autoplay on mobile/tablet so user must click twice for video to play, first click on thumbnail, the next click on iframe.
Is there a way so that use can only click once on thumbnail then theo video will auto play?
My website have different domain with youtube so any way like accessing element inside iframe are not allowed.
This task should be completed with only vanilla javascript/typescript only. We don't prefer using third party like react-player because these player will impact app performance.
Below is codes similar to the real project. I would appreciate to any advice as I am really exhausted with this :)))
<div id="container">
<div id="thumbnail"></div>
<iframe width="1280" height="720" src="https://www.youtube.com/embed/9xwazD5SyVg?autoplay=1&mute=1" title="Dummy Video For YouTube API Test" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
I am making a website and I have to show a video on its homepage. The video exists on youtube and I need to embed it on my website.
<html>
<iframe width="560" height="315" src="https://www.youtube.com/embed/spPdelVEs_k?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</html>
Unfortunately my webpage shows a completely different video. It shows this one.
https://www.youtube.com/watch?v=7sNL0T93ItM
Does the URL convert to something different? Help me solve this problem.
Your code is fine. You just need to clear the cookies on your browser and then it should load fine for you.
This is the video your code goes to:
https://www.youtube.com/watch?v=spPdelVEs_k
I have an ionic 2 app which contains sections like Google Maps, html5 YouTube, Video, and Mp4 Video. Full Screen Control on all of them is not working and giving blank page. This is the YouTube example. I tried allowfullscreen="" or allowfullscreen="true" but still no luck. I tried to research but couldn't find a solution.
<iframe width="80%" height="600" [src]='CurrentResource.YoutubeIdURL'
frameborder="0"
allowfullscreen="allowfullscreen"
mozallowfullscreen="mozallowfullscreen"
msallowfullscreen="msallowfullscreen"
oallowfullscreen="oallowfullscreen"
webkitallowfullscreen="webkitallowfullscreen">
</iframe>
I have an iframe like so:
<iframe width="100%"
height="100%"
src="~/Video/video.mp4"
frameborder="0"
allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
I am running this on google chrome. Is there away with jquery or javascript to make this full screen when the video starts playing?
On my website, I embedded a Youtube video with this simple code:
<iframe width="560" height="315" src="//player.vimeo.com/video/72625639?wmode=opaque" class="st_public_video top1" frameborder="0" allowfullscreen=""></iframe>
Site Demo can be seen here at: https://testvillage.letsventure.com/dreamon
When in Chrome and I press the full screen button on that video, the video goes full screen and again restores automatically.
However, when I use Explorer or Firefox, full screen works just fine. So obviously I'm doing something wrong. Any help would be appreciated.
You need to change the allowfullscreen="" to allowfullscreen.
I have not verified this locally. But this property behaves similar to "selected" in the "select/options".
The following is the syntax from Vimeo.
<iframe src="//player.vimeo.com/video/VIDEO_ID" width="WIDTH" height="HEIGHT" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
Note the tags ebkitallowfullscreen, mozallowfullscreen, allowfullscreen.