0

I have this code to show a youtube video when i click in a small image, but the problem is that the youtube controls like volume and full screen and that things are not working...but i think everything is ok! Only the Youtube play button works, the volume and other controls dont work!

<script type="text/javascript">
    $(document).ready(function($) {
        $(".fancybox").fancybox({
            type: "iframe",
            iframe : {
                preload: false
            }
        });
    }); 
</script>


<a class="fancybox" rel="group"  href="//www.youtube.com/embed/29tFKSylaGE"  title="Image Veg"><img  src="imagens/pic4.jpg" alt="Image1" title="Image 1"></a>
codingrose
  • 15,563
  • 11
  • 39
  • 58
andyB
  • 99
  • 2
  • 9

2 Answers2

1

I had the same problem as you: Youtube in an iframe, and although the video would play, the controls 'seemed' to not be working. I just searched forever for the answer. What finally solved my problem was this:

https://github.com/fancyapps/fancyBox/issues/516

The solution is quite simple, really. The transparent fancybox element, .fancybox-nav, is covering up the Youtube controls. Reduce the size of that transparent nav element, and the controls 'underneath' it, will be accessible.

You'll need to edit the following file in your project: jquery.fancybox.css

Personally, I changed the values to this:

top: 45%;
width: 20%;
height: 10%;

I also have web pages in my iframes and I need to be able to click on parts of the html within my iframes, so I can't have enormous transparent nav blocks over my content. If you're just doing Youtube, you can get away with larger nav elements.

The values add to 100%, so to keep your nav icon centered, your top value, times 2, plus the height, should equal 100%. HTH.

Burgundy
  • 11
  • 1
-1

change 

<a class="fancyYoutube" href="http://i1.ytimg.com/vi/92c3dX-AoXs/default.jpg"><img src="http://i1.ytimg.com/vi/92c3dX-AoXs/default.jpg"></a>

to

<a class="fancyYoutube" id="img1" href="http://i1.ytimg.com/vi/92c3dX-AoXs/default.jpg"><img src="http://i1.ytimg.com/vi/92c3dX-AoXs/default.jpg" alt="img1"></a>

set id for a tag, then set alt for img tag as that id

Anh Tú
  • 636
  • 7
  • 21