WordPress.org

Ready to get started?Download WordPress

Forums

YouList - YouTube playlist shortcode
[resolved] [Plugin: youList - Youtube playlist shortcode] Can you do something about the z-index? (10 posts)

  1. gavinwebb
    Member
    Posted 2 years ago #

    Hiya. I was wondering if you could do something about the z-index in the css of the iframe. The video thumb overlaps many of the elements of the page, for example the EU cookies (http://3doordigital.com/wordpress/plugins/eu-cookie-law/) and speakpipe (www.speakpipe.com) tabs. I can't seem to get any changes to work via css myself.

    I've had this problem with youtube overlapping before, but the developer was able to put it right.

    Thanks.

    http://wordpress.org/extend/plugins/youlist/

  2. birgire
    Member
    Plugin Author

    Posted 2 years ago #

    Hi, thanks for reporting

    I'm working on the plugin so you can use your own styling, fx:

    [youlist pid="PL3FF15AA7ED356D9F" style="width:300px;height:400px;z-index:1;"]

    I will try to upgrade the plugin today with these changes.

  3. birgire
    Member
    Plugin Author

    Posted 2 years ago #

    Version 1.0.2 is ready with these changes.

  4. gavinwebb
    Member
    Posted 2 years ago #

    Hello @birgire.

    Thanks for the update - it's working fine on Firefox, but not for Chrome, IE9 or Safari. For example, the the speakpipe tab has a z-index: 100000; so the youlist video should definately fall behind this tab, but for some reason it isn't.

    The tab falls in front of the youlist video in Opera, but perhaps that's because the video isn't displaying (as per my other support thread).

    Thanks. Gavin.

  5. birgire
    Member
    Plugin Author

    Posted 2 years ago #

    Hi @gavinwebb

    It looks ok on mac (chrome+firefox) with these two plugins.

    On pc it looks ok in Chrome (21.0.1180.55 beta-m).
    In Firefox the youtube videos are in front of the eu + speakpipe popups.
    Still have to check in Opera and IE.

    I will have to dig into the html code that is coming from YouTube through the iframe.

    Do you have the link to the youtube plugin you mentioned earlier?

  6. gavinwebb
    Member
    Posted 2 years ago #

    Hi @birgire

    Here's the code that I've included in a do_shortcode text widget setup:
    [youlist vid="N_ZFETatNTY,-4TJBTddP3A,g2axLFDjTgo,qXOrJtn1h2M,0n4E2tAQBVE,ej5L3aJMlPA,A3YxvySQqkk,F5_N86Pblj0" width="288" height="250"]

    How would I apply the z-index to the above shortcode?

    This can be found at http://www.indylibs.com.

    It displays fine but still having problems with the z-index. On a 64bit PC the video float over the speakpipe tab using:
    - Chrome 20.0.1132.57 m
    - IE9 9.0.8112.16421
    - Safari 5.1.7 (7537.57.2)

    It works fine in Opera 12.00 (64bit) and Firefox 13.0.1 and 14.0.1.

    Thanks. Gavin.

  7. patmak
    Member
    Posted 2 years ago #

    Howdy Y'all

    There is a work around for this issue. Simply add "&wmode=transparent" to the playlist ID as listed below.

    [youlist pid="PLE05FCA2B84905AEC&wmode=transparent" style="width:610px;height:400px;z-index:1;"]

    This should take care of this issue for most browsers.

    Cheers,
    Patmak

  8. birgire
    Member
    Plugin Author

    Posted 2 years ago #

    @patmak

    that's great, thanks for sharing

  9. birgire
    Member
    Plugin Author

    Posted 2 years ago #

    Mabye it would be helpful if I would add an extra attribute for wmode?

    For example

    [youlist wmode="transparent" ]

    someone one stackoverflow also suggested wmode=opaque

  10. birgire
    Member
    Plugin Author

    Posted 1 year ago #

    the wmode parameter is now available in version 1.0.5

    1.0.5

    * added: vq parameter to change the video quality, (fx hd720) (Props cjgrasso)
    * added: https parameter to enable the secure protocol
    * added: nocookie parameter to disable cookies
    * added: wmode parameter to handle z-index issues (Props patmak)
    * added: parameters parameter for custom parameters
    * changed: updated the readme.txt with better description of the parameters

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.