Deferring YouTube Videos with Gutenberg

  • Hi everyone,

    I used to always defer the loading of YouTube videos on my site. I used to do this via a shortcode I created myself, were I simply put in the video URL, manipulated it so that it would look like this:

    <iframe id=”youtube_video” width="560" height="315" src="" data-src="https://www.youtube.com/embed/Hpv3jqmYRjk" frameborder="0" allowfullscreen></iframe>

    And then making the YouTube player load with this JS function:

    function deferVideos() {
    setTimeout(function () {
        var vidDefer = document.getElementsByTagName('iframe');
        for (var i = 0; i < vidDefer.length; i++) {
            if (vidDefer[i].getAttribute('data-src')) {
                vidDefer[i].setAttribute('src', vidDefer[i].getAttribute('data-src'));
            }
        }
    }, 200);
}
window.onload = deferVideos;

    However, I want to be able to defer YouTube videos that have been inserted with the Gutenberg editor block for YouTube videos.
    This one:
    2020-05-09-14h19-01

    How do I defer the loading of YouTube videos that were embedded with the Gutenberg block?

    • This topic was modified 4 years, 10 months ago by Beef Supreme.
    • This topic was modified 4 years, 10 months ago by Beef Supreme.
Viewing 3 replies - 1 through 3 (of 3 total)

  • @polymathy

    I doubt it can be done wit the block as the content won’t validate.

    Your options are:
    – to use a Custom HTML block
    – write your own Block for the Block Editor that renders the code as you prefer and passes validation
    – use another filter for the WordPress post content to add deferring for your videos

    Thread Starter Beef Supreme

    (@polymathy)

    I actually did it with a filter now, as you suggested. I did surpass my previous Regex skills there I guess, but it works like a charm!

    @polymathy
    would you mind sharing where you found that filter, or what code you created?
    Can’t find any resources on the web!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Deferring YouTube Videos with Gutenberg’ is closed to new replies.