CODEWITHSUNDEEP
iframeyoutube
aniruddh kadia
aniruddh kadia

Reputation: 11

How to Make page speed hight with youtube iframe

At first I have use video from HTML tag. at time time my google page speed (https://developers.google.com/speed/pagespeed/insights/) is for desktop 95.

E.g:

<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="Content/video/RangamOverview.mp4" type="video/mp4">
</video>

After this I have use above same video from youtube. at time time my google page speed (https://developers.google.com/speed/pagespeed/insights/) is for desktop 65.

E.g:

<iframe id="myvideo" height="500" src="https://www.youtube.com/embed/LCDXR1HMUtE?rel=0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" style="border: 0px; width: 100%; display: block;"></iframe>

Now I want to know how to get high speed with using same youtube video.

Upvotes: 1

Views: 1113

Answers (1)

Patrick from NDepend team
Patrick from NDepend team

Reputation: 13842

This small script helps improving pagespeed because it defers video player loading until the user click the video picture. But then the user needs to click a second time to start the video which is not nice. Trying to find a better solution on the web:

<iframe
    width="640"
    height="386"
    src="https://www.youtube.com/embed/kKCKuMuj1W4?vq=hd1080"
    srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/kKCKuMuj1W4?autoplay=1><img src=https://img.youtube.com/vi/kKCKuMuj1W4/hqdefault.jpg alt='NDepend Dependency Matrix'><span>▶</span></a>"
    frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen="allowfullscreen"
    title="NDepend Dependency Matrix"
></iframe>

Upvotes: 1

Related Questions