I currently involve in a website project that put videos as its primary contents. My involvement is not primary on the design. I'm just helping a little. What I like from the process is to find solution. One of the problem is on the navigation menu. It's very common to have navigation with sub-menus. Without having special objects like flash, everything should be under control. But, not this time.
When embedding a video from YouTube (in this case, using the iframe method), the navigation is broken because it sits behind the video. The same result with the old embed code. See the screenshot below:
It's wrong. The menu should be displayed above the video. It should be like the image below:
So, is there a simple way to fix this problem? Yes.
The solution is pretty easy. You only need to add a parameter for the embed code. It's
wmode=transparent. I will use an example here. This is an embed code from Serabi Solo video at YouTube:
The code above should me modified by adding
wmode=transparent parameter. The final code will be like this:
It's easy, right? But, what if you want to use the old embed code? You can fix the problem using a same method. For example, this is YouTube's old embed code from the same video:
You need to add a parameter. Just add
The final code will be like this:
3 replies on “Floating CSS menu on YouTube Flash Videos”
Makasih, Thom. Aku muter-muter nyari solusi ini. Ternyata gampang ya.
Tom, apakah solusi ini bisa diterapkan juga ketika saya menggunakan Vimeo?
Iya Mas, seharusnya ini juga bisa jalan di Vimeo, karena pada prinsipnya
ini untuk mengatasi problem di flash content gitu. Sudah coba?