UDT fix for YouTube iframe z-index issue

[gocreative]

When YouTube videos are embedded into websites using the new iframe method, it can often cause layout issues due to the Flash content inside the iframe. For example, dropdown menus may be overlapped by the video. Unfortunately, z-index cannot always fix this problem.

The solutions offered online include:

1. jQuery - search for the iframe and add "wmode=opaque" (or "wmode=transparent") to the end of the iframe SRC URL. However, this doesn't always work across all browsers.

2. Manually adding the "wmode" string to the end of the SRC URL. However, this isn't exactly a suitable solution for my clients.

So, my solution was to create a UDT which automatically appends the wmode parameter to the URL. The HTML (the full YouTube iframe code) is passed to the UDT, the parameter is added, and the new HTML is output instead.

Here's the UDT:

Code: Select all

// get the html value and assign it to a nice short variable
$html = $params['html'];

// invoke Smarty
$smarty = cmsms()->GetSmarty();

// check that the assigned html is actually an iframe
if (strpos($html, "<__iframe" ) !== false) {
    
    $search = array('" frameborder="0"', '?hd=1?hd=1');
    $replace = array('?hd=1&wmode=transparent" frameborder="0"', '?hd=1');
    $html = str_replace($search, $replace, $html);
    
    // make variable visible for CMSms
    $smarty->assign('youtube_fix', $html);
    
} else {
    
    // make variable visible for CMSms
    $smarty->assign('youtube_fix', $html);
    
}

In my case, I'm using ListIt to allow clients to copy/paste the YouTube HTML into a plain textarea with an alias of 'video', so I call the function and output the new HTML in my ListIt template as follows:

Code: Select all

{youtube_fix html=$item->video}
{$youtube_fix}

I realise this isn't strictly a CMSMS trick, but I hope it helps someone! Any suggested improvements are very welcome.

[faglork]

When YouTube videos are embedded into websites using the new iframe method, it can often cause layout issues due to the Flash content inside the iframe. For example, dropdown menus may be overlapped by the video. Unfortunately, z-index cannot always fix this problem.

I don`t get it.

Why not simply a CSS rule:
iframe.youtube {width: 100%}
or something similar?

Cheers,
Alex

[gocreative]

Because that doesn't work. The issue is specifically the fact that the Flash video inside the iframe has a window mode set to "opaque", and the only solution is to change this to "transparent".

Here's what it's all about if you want more explanation:

https://www.google.com.au/#q=youtube+if ... ex+problem