UDT fix for YouTube iframe z-index issue
Posted: Thu Nov 08, 2012 10:11 pm
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:
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:
I realise this isn't strictly a CMSMS trick, but I hope it helps someone! Any suggested improvements are very welcome.
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);
}Code: Select all
{youtube_fix html=$item->video}
{$youtube_fix}