WordPress.org

Ready to get started?Download WordPress

Forums

Dynamically change youtube iframe embeds to auto add transparent mode (8 posts)

  1. indierockmedia
    Member
    Posted 3 years ago #

    I asked this question but closed the topic before posting the solution (sorry I just started using WP forums). So here is my fix for others to find.

    Problem: when you paste the new youtube iframe html5 embed into the post editor, it doesn't have the wmode=transparent, so the videos display over menus or over lightboxes, etc. annoying, and if you're like me, your clients don't know HTML at all so I can't tell them to manually add the transparent code. PLUS, if there are no parameters in the youtube URL, you have to use "?wmode=transparent". but if you have parameters like "?hd=1", you have to use "&wmode=transparent" (the ? not &).

    See this site to see how to properly replace iframe code to make it transparent.
    http://www.jenkaufman.com/youtube-iframe-embed-video-problem-hides-menus-other-layers-546/

    ------

    So here is my fix, hope you find this useful. put it in your functions php file.

    function add_video_wmode_transparent($html, $url, $attr) {
       if (strpos($html, "<iframe title=" ) !== 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);
    
       		return $html;
       } else {
            return $html;
       }
    }
    add_filter('the_content', 'add_video_wmode_transparent', 10, 3);
  2. jetlej
    Member
    Posted 2 years ago #

    Thanks this was very helpful :)

  3. THEtheChad
    Member
    Posted 2 years ago #

    Really appreciate the info Indierock! I ran into a couple issue when trying to use the code exactly as you had it. Here's my version and an explanation as to the problems and how I fixed them.

    //Embed Video Fix
    function add_video_wmode_transparent($html) {
       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);
    
       		return $html;
       } else {
            return $html;
       }
    }
    add_filter('the_content', 'add_video_wmode_transparent', 10);

    The first problem was a PHP error. This was caused because WordPress was expecting 3 arguments and only received 1. I didn't see any reason to include $url or $attr so I removed them and rewrote add_filter to accept the standard number of arguments (1 by default).

    This got rid of the PHP errors, but the code still wasn't working. This is because your function was looking for "<iframe title=" in the HTML. None of the videos on my site had a title attribute so it never bothered to fix them. I rewrote that line to simply look for any iframe and that corrected the issue.

    Thanks again for the snippet and I hope my modifications can help others that run into the same issues!

  4. fembiz
    Member
    Posted 2 years ago #

    Hi guys,

    Thanks a lot for this. THEtheChad, I am using your code but I cannot seem to add the filter to the excerpt. Do you know how I can apply this function to the excerpt and not the content?

  5. THEtheChad
    Member
    Posted 2 years ago #

    Sorry for not getting back sooner, fembiz, I just noticed your reply. The same exact function can be used for the excerpt, you simply add the following line:

    add_filter('the_excerpt', 'add_video_wmode_transparent', 10);

    So, in your case, the entire block of code would look like this:

    //Embed Video Fix
    function add_video_wmode_transparent($html) {
       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);
    
       		return $html;
       } else {
            return $html;
       }
    }
    add_filter('the_excerpt', 'add_video_wmode_transparent', 10);
    add_filter('the_content', 'add_video_wmode_transparent', 10);
  6. fembiz
    Member
    Posted 2 years ago #

    Thanks for getting back to me. I actually tried that before I posted in the forum and it didn't work. The reason was because I have a function (get_post_vid) that looks in a post and retrieves the first video and displays it on the home page. The videos being retrieved by this function are not part of the excerpt hence the reason it wasn't working when I added the filter to the excerpt. I simply just put the following line in my home.php file

    echo add_video_wmode_transparent(get_post_vid());

    and it worked just fine.

    Thanks

  7. jerome008
    Member
    Posted 2 years ago #

    Hello !

    Thanks for this solution ! It's ok for iframe in post, but it's possible with an iframe in a custom field ?

    (sorry for my english, i'm french lol)

  8. josef.dalal
    Member
    Posted 2 years ago #

    Thanks for this post - its great.

    i was looking for this trick for long time, but still have some issues.
    is there a way to use it in a - Custom Fields?
    lets say my costume field name is video,
    in the theme i call to the <?php echo get_post_meta($post->ID, 'video', true); ?> and i cant use short-code there...

    any idea?
    thanks

    ref fore the site: http://www.tamaraerde.com/films/jericho/
    i insert the param wmode transparent manually for now - see the portfolio hover in ie or safari

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.