Fix videos that overlap image lightboxes

When viewed in some browsers, embedded Youtube videos can sometimes overlap your lightbox, as shown in this example:

Youtube 1

The fix for this is outlined here.

To remove the overlap, you must append ?wmode=opaque to the URL that appears in the embed code of the video.

For example, your embed code will look something like this:

<iframe width="420" height="315" src="https://www.youtube.com/embed/1orMXD_Ijbs" frameborder="0" allowfullscreen></iframe>

So you need to add ?wmode=opaque to the end of the URL, found within the src attribute, as shown here:

<iframe width="420" height="315" src="https://www.youtube.com/embed/1orMXD_Ijbs?wmode=opaque" frameborder="0" allowfullscreen></iframe>

When you do that, you'll see that the lightbox no longer overlaps with the Youtube video.

Youtube 2

Want to discuss this page?

Visit the Shopify Community