[How to] Make Auto-embedded Youtube Videos Obey z-index
WordPress allows you to embed videos so easily using oEmbed. You can easily add videos to your post just pasting their URL to your post. WordPress handles all the object and embed HTML for you. But this code is missing wmode parameter which is necessary for CSS z-index to work.
Here I will show you how to filter the HTML for the embedded video and add this parameter so easily. For this we will use the oembed_dataparse filter which is run when a user adds a video to the post. Put the following code to your functions.php
file:
function stf_embed_filter( $html, $data, $url ){ $html = preg_replace('!(<object[^>]*>)(.*?)</object>!is', "$1$2<param name="wmode" value="opaque"></object>", $html); $html = preg_replace('!(<embed[^>](.*?)>)(.*?)</embed>!is', "<embed $2 wmode="opaque">$3</embed>", $html); return $html; } add_filter('oembed_dataparse', 'stf_embed_filter', 90, 3 );
This function filters the output html and automagically adds wmode parameter to the video HTML code. And your videos will then obey the z-index values in your CSS code. If this code is missing your videos will allways show on top of other elements on your page.
Deal Notice: We are using A2 hosting for all of our websites, and we are really happy with their service. So we wanted to share you this discount link for you to try it out. If you get a hosting using this link, you will also help us build better content for you: SSD Hosting - 300% Faster Than Standard Hard Drives