Last active
June 17, 2021 09:47
-
-
Save markhowellsmead/74c726cabc71173c6028045359c0ca24 to your computer and use it in GitHub Desktop.
Uses the technique from https://css-tricks.com/lazy-load-embedded-youtube-videos/ to add an srcdoc attributes to YouTube embeds. This code is intended for WordPress through the use of the embed_oembed_html filter hook.
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 | |
| /** | |
| * Uses the technique from https://css-tricks.com/lazy-load-embedded-youtube-videos/ to add an srcdoc | |
| * attribute to YouTube embeds, which prevents the content of the YouTube iframe from loading until | |
| * the user clicks on the video link. This code is intended for WordPress through the use of the | |
| * embed_oembed_html filter hook. | |
| * | |
| * Although the autoplay code is correct, current browsers appear to block the autoplay feature when | |
| * loading the iframe content when the link is clicked. This means that the visitor will need to click | |
| * twice; once to load the iframe content, and once to start the video. | |
| * | |
| * mark@sayhello.ch | sayhello.ch | June 2021 | |
| * | |
| * @param string $html | |
| * @param string $url | |
| * @return string | |
| */ | |
| function youtube_srcdoc($html, $url) | |
| { | |
| if (strpos($html, "<iframe") === false || strpos($url, 'youtube.com') === false) { | |
| return $html; | |
| } | |
| $domDocument = new DOMDocument(); | |
| $domDocument->loadHTML(mb_convert_encoding($html, 'HTML-ENTITIES', 'UTF-8')); | |
| $xpath = new DOMXpath($domDocument); | |
| foreach ($xpath->query('//iframe') as $iframe) { | |
| $src = $iframe->getAttribute('src'); | |
| $path = parse_url($src, PHP_URL_PATH) ?? ''; | |
| if (!empty($path)) { | |
| $bits = explode('/', $path); | |
| if (count($bits) === 3 && !empty($bits[2])) { | |
| $youtube_id = $bits[2]; | |
| $src = "https://www.youtube.com/embed/${youtube_id}?autoplay=1"; | |
| $title = $iframe->getAttribute('title'); | |
| $allow = $iframe->getAttribute('allow'); | |
| if (strpos($allow, 'autoplay') === false) { | |
| if (!empty($allow)) { | |
| $allow = "{$allow} ; autoplay"; | |
| } else { | |
| $allow = "autoplay"; | |
| } | |
| $iframe->setAttribute('allow', $allow); | |
| } | |
| $iframe->setAttribute('srcdoc', "<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href={$src}><img src=https://img.youtube.com/vi/{$youtube_id}/hqdefault.jpg alt='{$title}'><span>►</span></a>"); | |
| $body = $domDocument->saveHtml($domDocument->getElementsByTagName('body')->item(0)); | |
| return str_replace(['<body>', '</body>'], '', $body); | |
| } | |
| } | |
| } | |
| return $html; | |
| } | |
| add_filter('embed_oembed_html', 'youtube_srcdoc', 10, 2); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment