Home › Forums › General Issues › Youtube embed deffer loading
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
Solved my problem by using this post: https://support.advancedcustomfields.com/forums/topic/oembed-change-iframe-src-to-data-src/
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']);
}
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
🚨 The 2023 ACF Annual Survey closes tomorrow! This is your last chance to complete the survey and help guide the evolution of ACF. https://t.co/0cgr9ZFOJ5
— Advanced Custom Fields (@wp_acf) May 18, 2023
© 2023 Advanced Custom Fields.
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.