Picture gallery and embedded video overlapping

  • 1
  • Question
  • Updated 6 years ago
  • Answered
When I click on the picture gallery (and the large picture is viewed), an embedded video is in the way, covering part of the picture. How can this be fixed? (I don't really want to move the video for the layout of the page itself.)
Photo of Karen Dickson

Karen Dickson

  • 5 Posts
  • 0 Reply Likes

Posted 6 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi karen,

Can you let us know the site address. This may be fixed by pre-configuring the reserved canvas size for the video.
Photo of Karen Dickson

Karen Dickson

  • 5 Posts
  • 0 Reply Likes
Sure thing.
http://www.crossroadsoffaith.org/fpu.php

I've noticed that depending on how far down I scroll before I look at the picture, different amounts of overlap occur.

The picture is the one that shows "What's in the membership kit" on the top right of the page. The video is below under the heading, "I'm normal, right?"

Thanks!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Karen,

I can't see the problem. The picture in the gallery opens in a modal window that isn't influenced by another element.

Have you checked this with various browsers? and what browser and version are you using to look at your site. That may give a clue.

Photo of Karen Dickson

Karen Dickson

  • 5 Posts
  • 0 Reply Likes
The problem that I mentioned happens when the screen is not scrolled to the top. It happens in IE, because the picture takes up most of the screen in that browser for some reason.

So when I scroll a few clicks down and then click the picture, the video overlaps a bit.

Photo of Karen Dickson

Karen Dickson

  • 5 Posts
  • 0 Reply Likes
Sorry, the IE version is 8.
In google chrome the picture and video don't overlap, because the picture appears smaller.

Photo of Karen Dickson

Karen Dickson

  • 5 Posts
  • 0 Reply Likes
oops again, IE version 9. I apologize for the typo.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Karen,

I can see your issue too if I am not at the top. I have no idea how to fix this.

I'm hoping another can sort this out with you wrt IE9. I have XP so can't look at it in IE9. Apologies for this.

Gop.
Photo of Frank

Frank

  • 111 Posts
  • 31 Reply Likes
Hello Karen, don't know if this will fix it, you could try it if you want.

There are two elements you need to add to your video code to override this issue.

Step 1:

Add <param name="wmode" value="opaque" /> directly after your opening "object" tag.

Step 2:
Add wmode="opaque" within your embed tag.

Here is an example of how your video code might look with the fix in place:

<object width="425" height="344">
<param name="wmode" value="opaque" />
<param name="movie" value="http://www.youtube.com/v/rUJx8Y5Mm7w&hl=en&fs=1"></param>
<param name="allowFullScreen" value="true"></param>

<embed wmode="opaque" src="http://www.youtube.com/v/rUJx8Y5Mm7w&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed>
</object>

This fix works in IE6+, Firefox 2+, Safari, and Opera.