Okay
  Public Ticket #1268813
Youtube Fullscreen Problem
Closed

Comments

  • julius started the conversation
    August 9, 2017 at 6:29am

    When you click on the full screen button of a youtube video, parts of the website appear above the video and make it difficult to use or see.

  • [deleted] replied
    August 9, 2017 at 12:23pm

    Hi Julius,

    With much difficulties i removed some of the elements that where showing when youtube player was in fullscreen mode.

    Please add the code below to your Custom CSS area:

    .laborator-woocommerce .product-single .product-left-info {
    z-index: 0;
}
.laborator-woocommerce .product-single .entry-summary .price {
    z-index: -1;
}
.laborator-woocommerce .product-single .entry-summary .share-product li
a {
    z-index: -1;
}

  • julius replied
    August 9, 2017 at 8:30pm

    Seems to work but then on other pages there are different elements that are above the video also. So we would need to edit the z-index of every item.

    How can we edit the z-index of the video?

  • [deleted] replied
    August 10, 2017 at 7:58am

    Hi julius,

    The z-index of youtube video is almost impossible to edit, if it was easily possible i would have send you the code.

    Can you please write URL of this exact page where you have problems please?

    Thanks!

  • [deleted] replied
    August 16, 2017 at 12:47pm

    Hi Julius,

    Can you please add the following CSS;

    .laborator-woocommerce .product-single .col-sm-6 {
    z-index: 0;
}

    This should solve this issue. I have tried it and worked for me:

    http://drops.laborator.co/EUeBlQ

  • julius replied
    August 16, 2017 at 5:23pm

    that worked to remove the image over the video but how can i do that for the other items below? You might not see it on yours because of the bottom panel but you still see the share buttons and the stuff in the product descriotion when you have the window maximixed 

  • [deleted] replied
    August 18, 2017 at 7:13am

    Hi Julius,

    I have tried every single trick and google around for about 1 hour. I couldn't find any fix on this!

    Its very strange, whatever CSS I apply it is not working for the video, you can see many people have this problem:

    https://www.google.com/search?q=youtube+z-index+embed

    I am not sure what is wrong here.

    It only works if you also add this CSS:

    .laborator-woocommerce .product-single .product-tabs-container,
    .laborator-woocommerce .product-single .entry-summary .share-product {
        z-index: -1;
        position: relative;
    }