Performance issue on my page

support
7

You can create a image of youtube thumbnail and add javascript code so that only when you click on the thumbnail it will load the youtube iframe.

See the preview here: Build a Bad USB Device using Raspberry Pi Pico | Aftab Sama

Source code: aftab700.github.io/layouts/shortcodes/youtube.html at main · Aftab700/aftab700.github.io · GitHub

You can use this shortcode:

{{- $videoID := .Get "id" | default (.Get 0) -}} <!-- Video ID: first argument or id="" -->
{{ $apiKey := getenv "YouTube_Data_API_key" }} <!-- Replace with your YouTube Data API key: $Env:YouTube_Data_API_key = "AIz***" -->
{{ $url := printf "https://www.googleapis.com/youtube/v3/videos?id=%s&key=%s&part=snippet" $videoID $apiKey }}
{{ $json := getJSON $url }}
{{ $title := index (index $json.items 0).snippet.title }}
{{ $thumbnails := index (index $json.items 0).snippet.thumbnails }}

{{- $videoResKey := .Get "res" | default "maxres" -}} <!-- Video Thumbnail Resolution: res="" | default maxres | available options: [ default, high, maxres, medium, standard ] -->
{{ $thumbnail := index $thumbnails $videoResKey }}
{{- $videoWidth := .Get "width" | default $thumbnail.width -}} <!-- Video width:  width="" | default is taken from $videoResKey -->
{{- $videoHeight := .Get "height" | default $thumbnail.height -}} <!-- Video height: height="" | default is taken from $videoResKey -->

<!-- <img src="{{ $thumbnail.url }}" alt="YouTube Thumbnail" width="{{ $videoWidth }}" height="{{ $videoHeight }}"> -->

{{ with resources.GetRemote $thumbnail.url }}
{{ with .Resize (printf "%vx%v webp q100" $videoWidth $videoHeight) }}
<div class="youtube-thumbnail" data-video-id="{{ $videoID }}">
    <img src="{{ .RelPermalink }}#center" width="{{ $videoWidth }}" height="{{ $videoHeight }}">
</div>
{{ end }}
{{ end }}

<script>
    document.addEventListener("DOMContentLoaded", function () {
        var thumbnails = document.querySelectorAll('.youtube-thumbnail');
        thumbnails.forEach(function (thumbnail) {
            thumbnail.addEventListener('click', function () {
                var videoID = this.getAttribute('data-video-id');
                var iframe = document.createElement('iframe');
                iframe.setAttribute('width', '100%');
                iframe.setAttribute('height', '315');
                iframe.setAttribute('src', 'https://www.youtube-nocookie.com/embed/' + videoID + '?rel=0&autoplay=1');
                iframe.setAttribute('frameborder', '0');
                iframe.setAttribute('loading', 'lazy');
                iframe.setAttribute('title', 'YouTube video player:' + videoID);
                iframe.setAttribute('referrerpolicy', 'no-referrer');
                iframe.setAttribute('allowfullscreen', true);
                this.innerHTML = '';
                this.appendChild(iframe);
                console.log("Ok");
            });
        });
    });
</script>