Remove unused Javascript base.js (Youtube iframe api)

Question

Google PageSpeedInsights flags Base.js as unused Javascript in my report. It's pretty substantial at 487kb. Appears to come from including the Youtube player iframe api. Is this file needed and if so, does anyone know why it is being flagged as unused JS in the report?

Iframe API: https://developers.google.com/youtube/iframe_api_reference

Large file that gets flagged on PageSpeedInsights as unused JS: https://www.youtube.com/s/player/c88a8657/player_ias.vflset/en_US/base.js

Answer 1

If you want to fix it with just HTML you can setup the embed to load when the video clicked using the srcdoc attribute.

You basically write an HTML link inside the attribute and the video won't load until the link inside srcdoc is clicked.

Here's an example:

<!-- Reference: https://vumbnail.com/examples/srcdoc-iframe-for-lighthouse -->
<iframe
    srcdoc="
        <style>
            body, .full {
                width: 100%;
                height: 100%;
                margin: 0;
                position: absolute;
                display: flex;
                justify-content: center;
                object-fit: cover;
            }
        </style>
        <a
            href='https://www.youtube.com/embed/Q-X_ED4LHrQ?autoplay=1'
            class='full'
        >
            <img
                src='https://vumbnail.com/Q-X_ED4LHrQ.jpg'
                class='full'
            />
            <svg
                version='1.1'
                viewBox='0 0 68 48'
                width='68px'
                style='position: relative;'
            >
                <path d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z' fill='#f00'></path>
                <path d='M 45,24 27,14 27,34' fill='#fff'></path>
            </svg>
        </a>
    "
    style="max-width: 640px; width: 100%; aspect-ratio: 16/9;"
    frameborder="0"
></iframe>

It can be a bit clunky to write HTML inside an attribute but it gets the job done.

If you don't want to have to go in and replace all the YouTube IDs I wrote a simple builder here: https://vumbnail.com/embed-builder