Problem with embedded youtube video....

User 2014613 Photo


Registered User
14 posts

Hi all,
I'm having a problem SCCP store I'm building. I've embedded a youtube video (by html) into the product description.
The video works fine, however the product images no longer behave properly once they're enlarged by clicking on them. They don't open "on top" of the youtube video. In other words the embedded video overlaps and obscures the product images.
I should add it seems to work fine when viewed on an ipad. But when viewed on PC's (I've tried two) the problem arises.
I think an embedded video about the product would help encourage a customer to purchase, so I'd appreciate any help.
Please Ignore the current text images and video, as this is just a test site. If you click on the green knife on the homepage you should see what I mean. www.turn5.com.au/salty

BTW, sorry if this topic has been raised before, I searched as best I could but the search menu wasn't working properly.
Thanks in advance,
User 2147626 Photo


Ambassador
2,958 posts

This may work ...

In your iframe code:
<iframe width="400" height="225" src="//www.youtube.com/embed/Kk899m5KVFg?rel=0" frameborder="0" allowfullscreen></iframe>

add the wmode parameter so it looks like this:
<iframe width="400" height="225" src="//www.youtube.com/embed/Kk899m5KVFg? wmode=transparent rel=0" frameborder="0" allowfullscreen></iframe>


Let us know how it comes out. :cool:
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com
User 2014613 Photo


Registered User
14 posts

Hi Gunsmoke, :)
Thanks for the suggestion, though unfortunately I seem to be getting the same results.
I've embedded another video (using the suggested code) below the original video for comparison.
I appreciate your advice so far, any other suggestions?

Thanks.
User 2147626 Photo


Ambassador
2,958 posts

Well, lets try this...take a look at this article and see if you can make it work. I'll keep looking but they say this works. It may be that I didn't quite get the example right. :P
http://manisheriar.com/blog/flash_objects_and_z_index
Let me know if this works for you.
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com
User 187934 Photo


Senior Advisor
20,266 posts

Looks fine to me. At least in FX.:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2014613 Photo


Registered User
14 posts

Eric Rohloff wrote:
Looks fine to me. At least in FX.:)

Thanks Eric,
It also works fine on my iPad, but on the 3 PC's running IE the problem occurs.
User 2014613 Photo


Registered User
14 posts

Gunsmoke wrote:
Well, lets try this...take a look at this article and see if you can make it work. I'll keep looking but they say this works. It may be that I didn't quite get the example right. :P
http://manisheriar.com/blog/flash_objects_and_z_index
Let me know if this works for you.

Thanks for the link Gunsmoke. I'll study it detail shortly, though I did notice it assumed the video was flash. From what I understand the youtube video is another format (html5 maybe). I think so it will work on i devices. I'm in over my head a bit here so I could be remembering wrongly.
Thanks again.
User 2147626 Photo


Ambassador
2,958 posts

Flash or HTML shouldn't matter. The problem I think is that the zindex of the video needs to be higher, or the colorbox zindex needs to be lower, but not negative. That article, or another, suggested using the wmode option, which worked for the user, or it said to use 'opaque' instead of transparent. You might try that.
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com
User 187934 Photo


Senior Advisor
20,266 posts

Works fine for me in IE 10. With compatibility mode off or on.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2147626 Photo


Ambassador
2,958 posts

Eric, you sure ?? It's not working for me. You clicking on the knife and getting the colorbox popup to show 'on top' of the youtube videos ??
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.