Download videos (without plugin)

If you like to include a lot of videos in your articles (and who doesn't nowadays?), you will quickly face the problem of loading times. Google does not like content that blocks the rest of the content, as is often the case with pictures and videos. In short: Content of a website is downloaded one after the other and displayed to the visitor, videos and pictures block this process. So if one type of content takes longer to download, it stops all other processes, the display takes time, elements are missing or are displayed incorrectly. To prevent this, images and videos can be reloaded.

Basically a kind of lazy load, although this does not mean the classic loading in the visible area. With lazy load for videos (without a plugin), videos are only retrieved when the website has loaded completely. So until the blog is not displayed correctly, videos are not loaded either. This has the advantage that the videos no longer block the loading process. How this works with pictures, I had you in a separate article already showed. Today it's the turn of videos and the system is basically the same, only this time it's about iframes, not simple img tags.

Lazy Load for videos very simple

Just like when reloading the images, the Data Src attribute is also used here. In plain text, this means that the correct link is output in the data src attribute, while the src attribute, which is used by default by the browser, is first replaced with an empty placeholder. Here the smallest and purest form of Base64 is used, so the image or placeholder is extremely tiny and can be loaded quickly, so there is no blocking of content, as is often the case with normal graphics. If the website has loaded correctly, the script activates and retrieves the correct link.

So the Src-attribute is automatically replaced and the placeholder is replaced with the correct video. Very minimalistic but very effective, because no framework like jQuery is used. Only javascript and a small entry in the functions.php of WordPress. Lazy Load for videos very simple and efficient.

Add the following to the functions.php of your theme:

function add_video_load( $content ) { if( is_feed() || is_preview() || ( function_exists( 'is_mobile' ) && is_mobile() ) ) return $content; if ( false !== strpos( $content, 'data-src' ) ) return $content; $placeholder_image = ( data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' ); $content = preg_replace( '#]+?)src=[\'"]?([^\'"\s>]+)[\'"]?([^>]*)>#', sprintf( '', $placeholder_image ), $content ); return $content; } add_filter( 'the_content', 'add_video_load' );

At the end of the page, before the closing insert:


More performance through Lazy Load

Of course, Lazy Load for videos (without plugin) only makes sense if you really include a lot of videos. If there is a video in every post, this will cause noticeable delays. Just think about what has to be loaded here. Especially Youtube loads much more than "only" the video. Tracker and analysis tools are added, as well as various other connections and requests that need to be broken down first.

This all takes time, but what is much worse - it blocks the rest of the content. But since videos in general are rather unimportant and don't have to be loaded first, they can be pushed backwards and then it's not their turn until later. This makes sense and brings performance, depending on how intensively you use videos in your posts. It's definitely worth a try.

How it works with pictures, I explain in this article.

About Christian

My name is Christian and I am co-founder of the platform fastWP. Here in the magazine I am responsible for the more "technical" topics but I like to write about SEO, which has been my passion for over 10 years now.

1 thought on “Lazy Load für Videos (ohne Plugin)”

Leave a Comment

Your email address will not be published. Required fields are marked *

en_GB