• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 3 posts ] 
Author Message
 Post subject: UDT fix for YouTube iframe z-index issue
PostPosted: Thu Nov 08, 2012 10:11 pm 
Offline
Power Poster
Power Poster

Joined: Mon Mar 14, 2011 1:16 am
Posts: 265
Location: Brisbane, Australia
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: UDT fix for YouTube iframe z-index issue
PostPosted: Wed Nov 14, 2012 11:06 am 
Offline
Power Poster
Power Poster

Joined: Fri Mar 03, 2006 1:32 pm
Posts: 610
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: UDT fix for YouTube iframe z-index issue
PostPosted: Thu Nov 15, 2012 9:01 pm 
Offline
Power Poster
Power Poster

Joined: Mon Mar 14, 2011 1:16 am
Posts: 265
Location: Brisbane, Australia
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 3 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Hosting Nation - Managed CMSMS Hosting