I am a pro member of Vimeo using Background Videos through out a website. These videos have no audio, and loop at the top of the page. It works well, except on an ipad, which only plays the video once then stops.
Here is the code i'm using:
<div id="interiorHeaderVideo" class="vimeo-wrapper">
<iframe src="https://player.vimeo.com/video/408561072?background=1" frameborder="0">
</iframe>
</div>
I am loading Vimeo player.js in the header using:
<script async="true" src="https://player.vimeo.com/api/player.js"></script>
Here is an example of the video not looping at the top on ipad. (must view on ipad to see the issue, it does loop on other devices):
https://www.synteract.com/Therapeutic-Expertise/Neuroscience
I've tried to search why this might be. I know mobile devices don't like to auto play videos, but I haven't heard anyone say anything about mobile devices stopping a video from looping.
Is there any reason ipad would prevent looping while other devices allow it?
Related
I want to play youtube videos on a popup with auto-play. I add iframe autoplay works on desktop but not works on tablet and mobile device. How can I fix it?
I have one web page (React.js) with video on background.
<video
autoPlay
muted
loop
className="public-layout-video"
src="/video.mp4"
/>
I tested webpage on mobile, tablet, desktop and video is working. But when I run webpage in my Smart TV (Samsung Q80) browser, in the background is black screen and video not playing.
Solve somebody similar issue? I have integration to sentry and I checked logs but no logs found.
I used CSS and Youtube IFrame to make a background-video, but it doesn't start after I switch to mobile resolution (using F12 etc.).
Screenshot from Chrome, it is the same on mobile.
GitHub repo with my code.
<div class="video-background">
<div class="video-foreground">
<iframe src="https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
There is actually no way to autoplay a video on most mobile devices at the moment. This is actually in regards to the bandwidth of phones being used up.
I have found these params in which you can use to hide the play button as discussed in the comments. These are:
showinfo=0
controls=0
autohide=1
So this would make the full url: https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ&showinfo=0&controls=0&autohide=1
Mobile phones don't support autoplay bg-video. So i used to set an img while on mobile version.
When I attempt to embed a YouTube video as an IFRAME, the video dimensions always appear too small within the video frame when the video plays as HTML 5 Video. It looks fine when viewed in a browser with Flash enabled.
I'm wondering if there's some sort of workaround (that doesn't require Flash)?
The following jsFiddle demonstrates this problem. I've appended "html5=1" to the iframe src URL, which forces the video to play with HTML 5 in Chrome; Firefox seems to ignore the parameter so you'll have to disable Flash to see it.
Here's the jsFiddle:
http://jsfiddle.net/DML2T/
And here's the code you'll find there:
<iframe id="videoPlayer1" width="640" height="360" src="//www.youtube.com/embed/5Rxqv2pYS_U?autoplay=1&html5=1"></iframe>
I am using a web based html5 mobile app builder (tiggzi). I am using the youtube iframe api. When I install my app on my android devices the embedded video displays the placeholder image just fine. On my nexus 7 with android 4.2.2 if I hit play I hear the sound but do not see the video (black). If I hit the full screen I see the video play ok. On my android 4.0.4 bionic phone I see the video placeholder image but play just shows black and full screen does not respond (ultimately app crashes). On my desktop machine testing my app in chrome video plays fine.
my html:
<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/u1zgFlCw8Aw" frameborder="0">
</iframe>
Question is, how do I get video to play correctly as embedded in and html5 mobile app for both android 2+ and iphone/ipad? I thought the iframe api would work but it still falls back to flash which appears to be the problem in my case.