Tips/Trick SMF 2.1.x: Optimise Youtube player

[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:

Code Select Expand

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:

Code Select Expand

/* 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,
),

[Speed King]

Already applied to my forum, works perfectly 

Example: in this posting there are 6 youtube videos, the page loads instantly:

https://bg-nacionalisti.org/BNF/index.php?msg=768

[Butiks]

Google Search Console say:

New Videos structured data issues detected for `myforum.com`

Search Console has identified that your site is affected by 3 Videos structured data issue(s). The following issues were found on your site.

Code Select Expand

Top critical issues*
Missing field 'name'

Missing field 'uploadDate'
*Critical issues prevent your page or feature from appearing in Search results.

Code Select Expand

Top non-critical issues‡
Missing field 'description'
‡Non-critical issues are suggestions for improvement, but do not prevent the page or feature from appearing on Google. Some of these issues can affect your appearance on Search; some might be reclassified as critical issues in the future.

We recommend that you fix these issues when possible to enable the best experience and coverage in Google Search.

FIXED!

Removed `Schema.org` micro-markup (itemscope, itemtype, itemprop)

Use this optimized code:

Code Select Expand

array(
    'tag' => 'youtube',
    'type' => 'unparsed_content',
    'content' => '<div class="videocontainer"><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:#fff;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></iframe></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,
),

[cookdandbombd]

Thank you for this.  Does the switch to a thumbnail also protect people's algorithms? 

[Butiks]

Thank you for this.  Does the switch to a thumbnail also protect people's algorithms? 

The YouTube player is inactive until the user clicks on it.