I have a youtube video embedded on my landing page (focus.brainbeat.com/adhd). It works just fine on desktop and on Android phone but it does not play on iPhone or iPad. Below is the code that's being used...
<div class="Lightbox Lightbox--demo" id="demo">
<div class="Lightbox-wrapper">
<p class="Lightbox-close">Close</p>
<iframe id="demo-iframe" src="https://www.youtube.com/embed/058eNc41xVk?wmode=opaque&version=3&enablejsapi=1" height="450" width="800" allowfullscreen="" frameborder="0"></iframe>
</div>
<script src="https://www.youtube.com/player_api"></script>
Why isn't it working?
Thanks for your help!
Related
I have a video display issue on this page of my site, only when viewing on iOS mobile devices.
The strange thing is that I have another video element on the same page and that one plays fine. Same format, same css, html, attributes, etc. Both videos were rendered in AE with the same settings, so codecs are also the same.
Here is the section of code containing both videos:
<div id="sec-04" class="project-section">
<div class="projectvid" id="wipeAnim">
<video preload playsinline autoplay loop muted><source src="/assets/truChef_wipeAnimation_16x9.mp4" type="video/mp4"></video>
</div>
</div>
<div id="sec-05" class="project-section">
<div id="imgCont-05" class="projectimg"><div id="img-05" class="img"></div></div>
</div>
<div id="sec-06" class="project-section">
<div class="projectvid" id="explodedAnim">
<video preload playsinline autoplay loop muted><source src="/assets/truChef_explodedView_16x9.mp4" type="video/mp4"></video>
</div>
</div>
Note:
Both videos play fine in Chrome Dev tools device simulation.
Both videos do not play at all in browserstack.com's real cloud iPhones.
On my actual iPhone 6, the first video (id="wipeAnim") is not playing,
the second video (id="explodedAnim") is playing.
Does anybody know why this first video isn't playing/showing up at all on iOS? I can't figure it out - it just doesn't make sense to me.
I'm trying to run the following code on iOS simulator (WebView inside a mobile app):
<html>
<body>
<div>
<img src="https://files.geektime.co.il/wp-content/uploads/2017/12/GettyImages-139807042-1513776960-1024x680.jpg" alt="alt" style="width: 375px; height:auto;">
</div>
</body>
</html>
However, I'm getting an empty result.
On another browsers & mobile browsers it works as expected.
Any ideas?
I’m linking to a video on my web site that’s hosted on youtube. It was playing fine, however now it does not seem to play. There was a flashing black circle in the upper left corner for a while. Now when I click the play button, nothing happens.
I can say that I did add a responsive div to show what properly on mobile devices, but that did not fix it initially. I’m not sure if I also need to wait for to come back.
Is there something I might need to change in my YouTube settings? If anyone knows what I need to do to resolve this issue, I would very much appreciate it.
<div class="col-md-12 hidden-xs">
<center>
<iframe width="480" height="270" src="https://www.youtube.com/embed/1LohCR8Nj00?rel=0" frameborder="0" allowfullscreen></iframe>
</center>
</div>
<div class="col-xs-12 hidden-md hidden-sm hidden-lg">
<center>
<iframe width="280" height="160" src="https://www.youtube.com/embed/1LohCR8Nj00?rel=0" frameborder="0" allowfullscreen></iframe>
</center>
</div>
You can only have a video once on a page apparently. i corrected the css to be responsive and now it works
I'm developing a Cordova / Phonegap app. In some point of my app I load a page where I want a google calendar to be shown so user can see the agenda.
I just copy-pasted the iframe from google calendar, but, while it shows correctly my calendar in browser testing, when I create iOS app, it doesn't show itself, nor in simulator, nor in device.
Why is this happening?
....
</div>
<iframe src="https://www.google.com/calendar/embed?src=whitedragongroup%40gmail.com&ctz=Europe/Madrid" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
</body>
PS:
I tried placing div inside previous div but result is the same.
This works fine in any Browser, but not on iOS6 (did not try it with iOS5)
I got an iFrame with a YouTube Video in it, situated in an overlay. After playing the video and toggle the overlay, the video again is broken. The video will playback in the background (you will hear the sound), but its not visible anymore.
Here's a minimal example:
http://jsfiddle.net/s9M6J/2/
<script>
/* jQuery */
$(document).ready(function() {
$('a').click(function() {
$('.videowrapper').toggleClass('hidden');
});
});
</script>
<style>
.hidden{
display: none;
}
</style>
<body>
toggleVideo
<div style="background: green; width: 500px; height: 500px;">
<div class="videowrapper">
<div id="video1">
<iframe width="500" height="315" src="http://www.youtube.com/embed/HMrlFLZFdnQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</body>
Does anyone know a workaround for that?
Got a similar issue when embedding a Brightcove video on a jQuery Mobile page which is shown/hidden via javascript. Works on all desktop browsers and android but not Safari on iOS 6.
According to http://forum.brightcove.com/t5/General-Development/Video-in-show-hide-div-does-not-play-on-iOS/m-p/17558#M2352 a workaround is to hide your videowraper by moving it out of the screen using some CSS like position:absolute;top:-9999px then back to normal positioning when you want to show it.
For jQuery Mobile users it means embedding video iframes on multiple <div data-role="page"> on a single page structure won't work, need to put them on separate html pages.