I have an little site with a video. Its a YouTube Video.
But if fancybox show up, the video it will not autostart.
Here is my code:
<section class="contact bg-primary" id="video">
<div class="container">
<h2>Videoteaser</h2>
<a data-fancybox data-width="640" data-small-btn="true" data-height="360" class="btn btn-outline2 btn-xl js-scroll-trigger"ata-small-btn="true" href="https://www.youtube.com/watch?v=MkCbpgUpkMo">Videoteaser</a>
</div>
</section>
To open up automatically I have this little JS on the bottom of the site:
$('[data-fancybox]').eq(0).trigger('click');
The Problem ist that the video do not autostart. No matter if I click on the button or if I use the little JS to autoopen the fancybox.
Only after klicken the Play-Button the Video do start.
How can I make ist autostart?
You are using Chrome, right? Then the answer is simple - it will not start due to Autoplay Policy Changes, see https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Other then that - it works fine https://codepen.io/anon/pen/pqyzEM?editors=1000
Related
I'm trying to use Fancybox 3 for opening vimeo embedded clips. I've Tried to replace an online image herf with the vimeo url but it doesn't work, how can I fix it?
<a class="fancybox" href="https://player.vimeo.com/video/179809192" data-fancybox >
<img src="video_preview/berlin_preview.png" class="berlin_preview"></a>
Thanks a lot ;)
I have an iPhone app where I am playing youtube videos.
I have tableview where I am listing all videos.
I am using below code to play youtube vide.
<html><style>iframe {position:absolute;top:0px;left:0px;}</style>
<body>
<iframe src='http://www.youtube.com/embed/rxSwgvMg-H4?rel=0&html5=1' width='100' height='75' frameborder='0' >
</iframe>
</body>
</html>
All is working fine.
However client is insisting to remove share and text of video that are coming on the top.
Any idea how can I get this done?
try this code
<iframe src='http://www.youtube.com/embed/rxSwgvMg-H4?modestbranding=1&showinfo=0&fs=0' width='300' height='175' frameborder='0' >
</iframe>
working link:
http://jsfiddle.net/Bh4ac/
Remove Red color from play button:
<center><iframe src="https://www.youtube.com/embed/HAR49CWiEjY?modestbranding=1&title=&autoplay=0&re l=0&controls=0" type=”application/x-shockwave-flash” frameborder="0" width="600" height="400"></iframe></center>
i'm working on a restaurant's website and have run into this annoying problem when visiting the site on my phone. here's what i see: http://i.imgur.com/rc1sS.png (reproducible in iOS5, iOS6, some Androids)
the menus are .JPG's loading in Twitter Bootstrap modals, and the code looks like this:
<div id="menu" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
</div>
<div class="modal-body">
<img src="assets/menus/brunch.jpg">
</div>
</div>
<a data-toggle="modal" href="#menu" >BRUNCH</a></p>
everything loads fine in all desktop browsers, and weirdly enough they appear on the mobile Chrome app in iOS6. i've asked a couple of my Android using friends, and it's about 50%. i have no idea why there doesn't seem to be a pattern. is it an issue with how the images are being called? (i don't think it has anything to do with the modal itself?)
help!
ok, turns out the images were CMYK, which mobile does not like. changed to RGB and everything loads fine now!
When I place a link on top of the HTML5 Video Tag. This will work on Safari, desktop browser, but on iPad and iPhone I can't click on it what so ever. Does someone know a work around for this?
<div class="video-wrapper">
<video id="mainVideo" poster="resources/videos/poster.jpg" controls="controls">
<source src="resources/videos/video.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<a id="example" href="javascript:alert('ok')">Hello World</a>
</div>
when I use the HTML5 <video> element in the iPhone iOS Safari browser and I click on the placeholder it in order to play the video, the full-screen video player is started...
The problem is that especially when user is connected over GPRS/EDGE bearer it takes some time until the video can be started (something must be cached...).
If the user meanwhile presses the "Done" button and returns back to the page and then tries to launch the video player again nothing happens until some part of the video is cached and from user point of view it looks like the video link does not work... Is there any way how to deal with it? Listening for some event, etc.
<html>
<head>
<script type="text/javascript">
function playvideo()
{
var elem = document.getElementById("id-video");
elem.play();
}
</script>
</head>
<body>
<video
id="id-video"
width="200"
height="160"
src="space.mp4"
>
</video>
<input type="button" value="HTMLPlay" onClick="playvideo()"/>
</body>
</html>
BR
Petr
The only thing you can easily do is reduce the size of the video file. This doesn't have to effect all users, just those on slow internet connections (which you can detect this way).