I’m using Fancybox as a lightbox. I have videos set up in external html docs and are loaded in the Fancybox when the link is clicked from the main doc. The problem is Fancybox is somehow preventing “autoplay” in Chrome. Firefox seems to be working ok.
From index.html
Fancybox script:
<script type="text/javascript">
$(document).ready(function() {
$(".video").fancybox({
'overlayOpacity': 0.9,
'hideOnContentClick': true
});
}); //ready
</script>
Body code:
<li><a class="video" href="video/healthcarevideo1.html">Smart Outsourcing (HIPPA 5010, EMR)</a></li>
<li><a class="video" href="video/healthcarevideo2.html">Guaranteed Rejection of Claims (HIPPA 5010)</a></li>
-->From healthcarevideo1.html:
<video width="640" height="360" controls autoplay>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
<source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg"></video>
Any ideas on what the issue may be here?
Thanks!
EDIT: JFK, below, is correct. Final code:
<script type="text/javascript">
$(document).ready(function() {
$(".video").fancybox({
'overlayOpacity': 0.9,
'width': 640, //or whatever
'height': 360, //or whatever
'type' : 'iframe',
'scrolling': 'no'
});
}); //ready
</script>
Thanks everyone for your help.
Have you try setting
'type':'iframe'in your custom fancybox script? (you may need to set thewidthandheighttoo) like: