CMS Made Simple Forums
https://forum.cmsmadesimple.org/

UDT fix for YouTube iframe z-index issue
https://forum.cmsmadesimple.org/viewtopic.php?f=4&t=63878
Page 1 of 1

Author:  gocreative [ Thu Nov 08, 2012 10:11 pm ]
Post subject:  UDT fix for YouTube iframe z-index issue

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:

\$1:
// 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:

\$1:
{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.

Author:  faglork [ Wed Nov 14, 2012 11:06 am ]
Post subject:  Re: UDT fix for YouTube iframe z-index issue

gocreative \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.


I don`t get it.

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

Cheers,
Alex

Author:  gocreative [ Thu Nov 15, 2012 9:01 pm ]
Post subject:  Re: UDT fix for YouTube iframe z-index issue

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

Page 1 of 1 All times are UTC
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/