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).
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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&html5=1&") . 'rel=0$3', $data); | |
| return $data; | |
| } |
Leave a Reply