Simple Machines Community Forum

Customizing SMF => Tips and Tricks => Topic started by: Butiks on February 03, 2025, 06:02:35 PM

Title: Tips/Trick SMF 2.1.x: Optimise Youtube player
Post by: Butiks on February 03, 2025, 06:02:35 PM
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,
),
Title: Re: Tips/Trick SMF 2.1.x: Optimise Youtube player
Post by: Speed King on February 12, 2025, 12:26:33 AM
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
Title: Re: Tips/Trick SMF 2.1.x: Optimise Youtube player
Post by: Butiks on February 21, 2025, 08:50:04 PM
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.

Top critical issues*
Missing field 'name'

Missing field 'uploadDate'

*Critical issues prevent your page or feature from appearing in Search results.

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:

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,
),
Title: Re: Tips/Trick SMF 2.1.x: Optimise Youtube player
Post by: cookdandbombd on February 23, 2025, 07:21:47 PM
Thank you for this.  Does the switch to a thumbnail also protect people's algorithms? 
Title: Re: Tips/Trick SMF 2.1.x: Optimise Youtube player
Post by: Butiks on February 24, 2025, 07:29:52 PM
Quote from: cookdandbombd on February 23, 2025, 07:21:47 PMThank 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.