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?
Related
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>
I'm in way over my head on this one.
The goal is to be able to hit spacebar for play/pause, and f for fullscreen when the page loads.
I'm loading the YouTube embed like this:
<script src="https://www.youtube.com/iframe_api"></script>
<iframe
id="player"
frameborder="0"
allowfullscreen="1"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
width="1280"
height="720"
src="https://www.youtube.com/embed/<?php echo $video_id; ?>?autoplay=1&modestbranding=1&iv_load_policy=3&enablejsapi=1">
</iframe>
The question is, can I focus the iframe controls using postMessage? Or any other method?
If so which element in the iframe do I need to focus to be able to get it done? I think it's html5-video-container > video.
Don't think I even need the YouTube jsapi, but it's there for now.
I've been over this SO question about a dozen times and many others, as well.
You can't do it because you cannot insert the javascript required for postMessage to work into youtube's iframe.
Yes, I see that you created the iframe yourself on your page, but that's not how it works.
I want to take a screenshot from iframe which is playing a youtube video with a click of a button.
As a small code given below, What I want to do is, Whenever I click on the button it should take a screenshot of whatever is getting played at that particular time so that I can upload it to the server.
<iframe id="video" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>
<button>Take Screenshot</button>
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>
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.