What is the best way to set up the youtube embed so it loads in the best way please
Add this filter to functions.php. It removes the src attribute value and add a data-src-defer
// defer loading of videos
function defer_video_src_to_data($data, $url, $args) {
$data = preg_replace('/(src="([^\"\']+)")/', 'src="" data-src-defer="$2"', $data);
return $data;
} // end function defer_video_src_to_data
add_filter('oembed_result', 'defer_video_src_to_data', 99, 3);
add_filter('embed_oembed_html', 'defer_video_src_to_data', 99, 3);
then add this javascript to your site which resets the src value after the page is loaded
// load defered videos
(function($){
$(window).load(function(e) {
$('[data-src-defer]').each(function(index, element) {
$(element).attr('src', $(element).attr('data-src-defer'));
});
});
})(jQuery);
@john Huebner,
I came to this post because I see a huge difference in pageload when using Oembed video on my homepage.
The PHP function you provided removes the video completely. That’s Ok because you provided the javascript to reset the src value after the page is loaded.
The problem on my site is, that the src values aren’t reset after the page is loaded. This means the video isn’t displayed.
I’ve put the javascript code in the header.php.
What i’m doing wrong?
Regards,
Roland
Are these youtube videos you are trying to defer? It may be that it does not work with some video types.
Are you loading jQuery on the page in question? My JS depends on jQuery. I usually put the script in a “site.js” file that is enqueued for the site and set the depends argument array('jquery)` If you are not using jQuery then the script would need to be rewritten to use vanilla JS.
Hi JOhn,
Yes, i’m using YT video’s.
Yes, I have jQuery running (link to jQuery library in header.php).
I also tried the javascript in my site-main.js file without any luck.
Probably the script is the issue, nut I do not have any knowledge of javascript myself.
regards,
Roland
if you inspect the element and the src value is not being reset then the script is not running. Given the information I have I don’t know why
Commenting to remind others like myself: don’t forget to set ‘jquery’ as the dependency when enqueueing John’s script. Otherwise, you might receive “Uncaught TypeError: url.indexOf is not a function”.
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_script('load-deferred-videos-js', get_template_directory_uri() . '/static/js/load-deferred-videos.js', ['jquery']);
});
Notice ['jquery'] as the third argument to wp_enqueue_script.
P.S.
If you only want to load this script on a custom post type, such as “car”, then wrap the wp_enqueue_script function inside an if-clause.
if (is_singular('car')) {
wp_enqueue_script('load-deferred-videos-js', get_template_directory_uri() . '/static/js/load-deferred-videos.js', ['jquery']);
}
When it comes to optimizing YouTube embeds for the best loading performance, there are a few key considerations to keep in mind. Firstly, it’s recommended to use the iframe embed code provided by YouTube, as it offers improved compatibility and automatic responsiveness for different devices. Additionally, you can enhance loading speed by specifying the video dimensions to match the container size on your website, reducing unnecessary rendering and resizing. Enabling lazy loading can also be beneficial, as it defers the loading of the YouTube player until the user interacts with it, improving initial page load times. Lastly, leveraging caching techniques, such as browser caching or content delivery networks (CDNs), can help deliver the video content more efficiently. By implementing these strategies, you can ensure a smooth and optimized YouTube embedding experience for your website visitors. Happy embedding!
