Tips/Trick SMF 2.1.x: Optimise Youtube player

Started by Butiks, February 03, 2025, 06:02:35 PM

Previous topic - Next topic

Butiks

Hello.
There's a slick trick to make forum pages load quicker when a thread contains multiple (players) YouTube videos.

Before backup ../Sources/Subs.php

After, Find code:
array(
'tag' => 'youtube',
'type' => 'unparsed_content',
'content' => '<div class="videocontainer"><div><iframe frameborder="0" src="https://www.youtube.com/embed/$1?origin=' . $hosturl . '&wmode=opaque" data-youtube-id="$1" allowfullscreen loading="lazy"></iframe></div></div>',
'disabled_content' => '<a href="https://www.youtube.com/watch?v=$1" target="_blank" rel="noopener">https://www.youtube.com/watch?v=$1</a>',
'block_level' => true,
),

Replace to:
/* array(
'tag' => 'youtube',
'type' => 'unparsed_content',
'content' => '<div class="videocontainer"><div><iframe frameborder="0" src="https://www.youtube.com/embed/$1?origin=' . $hosturl . '&wmode=opaque" data-youtube-id="$1" allowfullscreen loading="lazy"></iframe></div></div>',
'disabled_content' => '<a href="https://www.youtube.com/watch?v=$1" target="_blank" rel="noopener">https://www.youtube.com/watch?v=$1</a>',
'block_level' => true,
), */

array(
'tag' => 'youtube',
'type' => 'unparsed_content',
'content' => '<div class="videocontainer"><div itemid="https://www.youtube.com/embed/$1" itemscope itemtype="https://schema.org/VideoObject"><meta itemprop="thumbnailURL" content="https://img.youtube.com/vi/$1/hqdefault.jpg"><meta itemprop="contentURL" content="https://www.youtube.com/embed/$1"><div class="embed_OCR"><div class="container_OCR"><iframe width="560" height="315" src="https://www.youtube.com/embed/$1" srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}span{position:absolute;height:1.7em;font:28px/1.7 sans-serif;color:white;text-align:center;padding:0 0 0 4px;background:red;width:64px;top:50%;left:50%;border-radius:14px;transform:translate(-50%, -50%);}</style><a href=\'https://www.youtube.com/embed/$1?autoplay=1\'><div style=\'background:url(https://img.youtube.com/vi/$1/hqdefault.jpg) 0/100% 100% no-repeat;background-size:cover;width:100%;height:100%;\'></div><span>▶</span></a>" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen itemprop="contentUrl"></iframe></div></div></div></div>',
'disabled_content' => '<a href="https://www.youtube.com/watch?v=$1" target="_blank" rel="noopener">https://www.youtube.com/watch?v=$1</a>',
'block_level' => true,
),
SMF: 2.1.3
Mods: Optimus, Hide Content, Quick Spoiler, Avatars Display Integration, Similar Topics, Simple Colorizer

Advertisement: