Youtube z-index IE issue fix

If you have a YouTube video embedded within your web page that ignores the z-index of fixed or absolutely positioned DIV elements then here is both the html and the JavaScript (jquery) fix.

Instead of embedding the youtube iframe like this

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI" frameborder="0" wmode="Opaque">

 add ?wmode=transparent to the embedded link like this:

Add wmode to fix youtube iframe zindex

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">

 Or, add the following Jquery javascript youtube iframe z-index fix:

Add wmode to fix youtube iframe zindex

$(document).ready(function(){
    $('iframe').each(function(){
          var url = $(this).attr("src");
          var char = "?";
          if(url.indexOf("?") != -1){
                  var char = "&";
           }
         
          $(this).attr("src",url+char+"wmode=transparent");
    });
});

Bingo, your youtube video will now acknowledge it's z-index and will appear below your other div elements that have a higher z-index.
Location: Bangalore, Karnataka, India

Comments

Post a Comment

Popular posts from this blog

CSS Equal Height Columns, Three Different Ways

Image
Here, we look at three different ways to achieve equal height columns with just CSS. This is a common scenario that troubles a lot of people, so I’m going to demonstrate some elegant pure CSS solutions. Achieving equal height columns with just CSS is such a common scenario with a few simple solutions. In projects that follow a standard content-sidebar layout, it just helps to have both of the containers seemingly stretch to the bottom of the page. It just looks better, cleaner, and more complete. I’m going to highlight three different ways that this can be achieved, using strictly CSS. No JavaScript, no jQuery to calculate the height of one and set it on the other. Just plain old beautiful CSS. First, let’s look at some graphics below that show us the problem and the desired solution. The Problem The Solution Diving In It’s common for designs/developers to want to achieve this look just purely for aesthetic purposes. It often finishes the page nicer, and makes ever...
Read more

The Simplest Way To Center Elements Vertically And Horizontally

Flexbox is a relatively new addition to the CSS world and we keep finding more and more excellent applications for it. We can even solve the age-old problem with centering an element both vertically and horizontally with CSS. It is easier than you can imagine – it is only three lines of code, doesn’t require you to specify the size of the centered element and is responsive-friendly! This technique works in all modern browsers – IE10+, Chrome, Firefox and Safari (with the -webkit- prefix). See the full compatibility table here . The HTML The idea, of course, revolves around flexbox. First, we create a container in which we want everything to be centered: <div class="container"> <h3> All content in here will be centered. </h3> </div> You can place this container div anywhere you want. In the live example above we’ve made it take up the whole width and height of the page. The CSS As we said earlier, we will be u...
Read more

User Avatar Image and User name and Email in LIferay Theme

It's possible to add logged in user image to Liferay portal. We need to add this in themes. Add the following line of code to portal_normal.vm file or any of the velocity file(.vm) where ever the user image needs to diplay. <img src="/image/user_male_portrait?img_id=$user.portraitId&amp;" alt="User Name" width="25"> You can change the width of the image as per your requirement. You can get the user name and user email address with the following code. $theme_display.getUser().getFullName() - This will give us Logged in user full name; $theme_display.getUser().getDisplayEmailAddress() - This will give us Logged in user email address.
Read more