The Support Forums will be in read-only mode for a scheduled maintenance window on 01 September 2016 14:00 UTC - 20:00 UTC. More information.

Easy FancyBox
[resolved] Easy Fancy Box and YouTube videos (3 posts)

  1. BadTrt
    Posted 4 years ago #


    I use <img src> with youtube generated thumbs.
    I like the way this plugin works since its enabling various manipulation with thumbs before lightbox pops out.

    Does the issue with youtube videos regarding stacking order still exist?

    I mean - "X" (close) button is beneath the video and "navigation" arrows can not be seen. Using arrows on the keyboard influence the movie(seeking) only.Passing ?wmode with link has no result.

    Tried using "fancybox for wordpress" which doesnt suffer from stacking order (since its embedding them and putting them in <div>) but suffers from being unable to play 3 differet clips on same page - it plays only the first one, no matter which clip you click on.And, there's no support for it.

    So, 3 youtube videos on same page, u click on one - it pops out in lightbox, u can use arrows in lightbox to get to next one, etc...

    Is there a way to do this?

    Thank you.


  2. RavanH
    Plugin Author

    Posted 4 years ago #

    Hi, I'm afraid there is nothing I can do about the stacking order. Wmode does not have any effect, nor does z-index. This is because the content of the iframe (the new preferred embedding method for Youtube and others) is not of the same DOM tree and it gets loaded later than the wrapping page so the browser stacks it on top of everything else, no matter what.

    The only way to not let the close button slide behind the movie is to set a border. Tip: fill out in the border color field transparent and in the background color field rgba(200,200,220,0.1)}#fancybox-content div{background-color:white to give your youtube borders a sort of aero/glass effect. (this does not work for all browsers)

    There is also a trick to move the navigation arrows to just outside (left and right) of the movie frame. Add something like this to your themes stylesheet (or use a plugin like Custom CSS) to make the arrozws move to the bottom corners:

    #fancybox-left:hover span {
      left: -15px;
      top: 100%
    #fancybox-right:hover span {
      right: -15px;
      top: 100%;
      left: auto
  3. BadTrt
    Posted 4 years ago #

    Worked 100%.

    Many, many thanks, RavanH.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic