Is it possible to start a video automatically when it opens in a lightbox ?
When it is clicked, it opens a lightbox with the video of VIMEO, but I want it to be started when you open the link and not when you click play.
I put the iframe that VIMEO makes available and I put it, but it does not work. I also tried at the end of the link the ?autoplay=1 function also does not work.
Note: At the moment (08/19/205) the player is generating a script error when you select the trailer videos (the other videos are normal), the error is as follows:
Uncaught ReferenceError: NumberUtility is not defined - share2_combined.min.js? 34123595: 1
When you select the video in embed, you should click + Show options , as in the image:
Thiswillappear,selectitinautoplay:
Thecodeshouldlooklikethis:
<iframesrc="https://player.vimeo.com/video/75187319?autoplay=1&title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
And the URL should look like https://player.vimeo.com/video/75187319?autoplay=1&title=0&byline=0&portrait=0
Note: I recommend that in html use & instead of & , although html5 will normally accept & without amp; you may still have a number of possible problems , for example if you see an SVG on your page or something related to XML.
Note that if autoplay is not occurring it may be a sandbox issue in your lightbox that uses iframes.
To complement the response from @balexandre , you should use the fancybox.iframe in> within the class="" attribute, it should look like this:
<!DOCTYPE html>
<html>
<head>
<title>Exemplo</title>
<!-- Adiciona biblioteca jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script><!--AdicionaFancyBox--><linkrel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script>
$(document).ready(function() {
$(".fancybox-media").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
</head>
<body>
<a class="fancybox-media fancybox.iframe" href="https://player.vimeo.com/video/75187319?autoplay=1&title=0&byline=0&portrait=0">Play</a>
</body>
</html>
It should look like this (requires version 1.2.0), download the files link
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="nivo-lightbox.css" type="text/css" />
<link rel="stylesheet" href="themes/default/default.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><scriptsrc="nivo-lightbox.min.js"></script>
<script>
$(document).ready(function(){
$('a').nivoLightbox();
});
</script>
</head>
<body>
<a href="https://player.vimeo.com/video/75187319?autoplay=1&title=0&byline=0&portrait=0" data-lightbox-type="iframe">Carregar video</a>
</body>
</html>
I do not know which bookstore you're using for Lightbox, but with fancyBox an example with Vimeo and the video starts soon.
Live code: link
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script><!--Addmousewheelplugin(thisisoptional)--><scripttype="text/javascript" src="http://fancyapps.com/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script><!--AddfancyBox--><linkrel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script><!--Optionallyaddhelpers-button,thumbnailand/ormedia--><linkrel="stylesheet" href="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script><scripttype="text/javascript" src="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script></head><body><ul><li><aclass="fancybox-media" href="http://www.youtube.com/watch?v=opj24KnzrWo">Youtube</a></li>
<li><a class="fancybox-media" href="http://vimeo.com/36031564">Vimeo</a></li>
</ul>
</body>
</html>
Javascript:
$(document).ready(function() {
$('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
});