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
Related
I've just added some toasts to a website I'm working on. They show absolutely fine, exactly when they should do, but they don't autohide. Doesn't seem to matter how I define the properties.
According to the documentation:
data-bs-autohide has a default value true
data-bs-delay has a default value 5000 (5s)
I striped things right back to basics and added:
<div class="toast show" role="assertive" aria-live="polite" aria-atomic="true">
<div class="toast-header">
<svg class="rounded me-3" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
<rect fill="#62c462" width="100%" height="100%" class="me-3 rounded"></rect>
</svg>
<strong class="me-auto">TITLE</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
some body text
</div>
</div>
to the homepage to see what would happen... the toast appears in the top left corner when the page loads (as expected) but does not disappear after 5 seconds.
I added
data-bs-animation="true" data-bs-autohide="true" data-bs-delay="2000" to the main toast DIV, expecting that there would be some sort of change in behaviour (some sort of animation on load/hide and that it would auto-hide after 2 seconds), but nothing... just stays there indefinitely just like before I added the additional data-bs-xxx tags.
I saw some other posts talking about this, and they were using Bootstrap 5.0.2 (I'm using 5.2.0) so I tried with the older BS5 distribution, but still exactly the same behaviour.
Any help here would be great - clearly I'm missing something simple/obvious.
Thanks...
Solved it...
I got rid of the .show class from the main toast and initialise the toasts with JavaScript instead... then the parameters in the data-bs-xxx are working exactly as expected.
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 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!
I copied the google maps example out of the jquerymobile-docs. I need fixed toolbars (header and footer), but when I include the iframe-popup in the content, then the toolsbars are scrolling and jumping back on the right position. It works well in desktop browsers but not on iPhone 5.
This is the popup which causes the problems:
<div id="popupMap" class="popupMap" data-role="popup" data-overlay-theme="a" data-theme="a" data-corners="false" data-tolerance="15,15">
<iframe id="mapIframe" src="http://view.jquerymobile.com/1.3.2/dist/demos/widgets/popup/map.html" width="480" height="320"></iframe>
</div>
I've created a full demo: here
Please copy the code and run it on iPhone to see what I mean. Then remove the popup-code (iframe) and compare the results.
Is there a workaround for it?
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.