• Skip to primary navigation
  • Skip to main content
Sal Ferrarello
  • About Sal Ferrarello
  • Speaking
  • Connect
    Mastodon GitHub Twitter (inactive)
You are here: Home / Programming / WordPress YouTube oEmbed Not Working on Firefox

WordPress YouTube oEmbed Not Working on Firefox

Last updated on January 22, 2014 by Sal Ferrarello

I came across an interesting issue today.

In Firefox the YouTube oEmbed Can Not be Clicked

This issue arose in Firefox 25.0 on a Mac when loading a YouTube oEmbed within an element using CSS transform: translate().  This seems to be a known bug.

General Solution

The general solution, as outlined on this Stack Overflow Thread, is to add the URL parameter html5=1 to the iframe src attribute, thus encouraging the YouTube iframe to use the HTML5 player if possible.  Unfortunately, this can not be added via the WYSIWYG editor when using a YouTube oEmbed.

WordPress Solution

The WordPress solution is to add a filter (as so often WordPress solutions are).

<?php
// add parameter html5=1 to oembed YouTube requests as per
// http://stackoverflow.com/questions/17747443/css-transform-translate-breaking-youtube-embedded-video
// using modified version of code on http://www.alittleofboth.com/2013/06/modifying-youtube-video-display-in-wordpress/
add_filter( 'oembed_result', 'youtube_oembed_html5_parameter', 10, 3);
function youtube_oembed_html5_parameter($data, $url, $args = array()) {
// add &html5=1 parameter
$data = preg_replace('/(youtube\.com.*)(\?feature=oembed)(.*)/', '$1?' . apply_filters("hyrv_extra_querystring_parameters", "feature=oembed&amp;html5=1&amp;") . 'rel=0$3', $data);
return $data;
}
view raw youtube-oembed-html5-param.php hosted with ❤ by GitHub
Sal Ferrarello
Sal Ferrarello (@salcode)
Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.

Share this post:

Share on TwitterShare on FacebookShare on LinkedInShare on EmailShare on Reddit

Filed Under: Programming Tagged With: WordPress

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2023 · Bootstrap4 Genesis on Genesis Framework · WordPress · Log in