0

YouTube video iframe can be embeded for example this way: https://stackblitz.com/edit/angular-youtube-video-in-iframe?file=src%2Fapp%2Fapp.component.ts

Basically YouTube embeds drastically reduce page load speeds, especially on mobile. Since we use them on many of our pages this is an issue.

Is there a way to set a screenshot image with a play button in the place of the YouTube embed in Angular, and only load the actual YouTube video when the user clicks it?

Gladi
  • 137
  • 2
  • 13
  • you can use amp for youtube player, or try lazy loading – amirhe Mar 22 '21 at 15:28
  • I believe this is rather a question related to youtube, i would say using this questions response https://stackoverflow.com/a/2068371/4217907 As you suggest make an image placeholder and replace with iframe on click – Simplicity's_Strength Mar 22 '21 at 15:34
  • I would like to have that solution not only for youtube, it would be nice to have it work with iframe vimeo etc. – Gladi Mar 22 '21 at 15:43
  • Different media platforms may not have thumbnails available or the url might differ, i believe this needs to be asserted per provider. Maybe switch case in your code to find the thumbnail url based on the video url – Simplicity's_Strength Mar 22 '21 at 15:52
  • 1
    Hmm, ok. What about any solution to just insert any image (not thumbnail). Where you in effect load just a placeholder image,the user then clicks play, and then the content of the iFrame is loaded instead ? Do you know if that solution is possible? If yes, where can i look for some examples or information how to implement it? – Gladi Mar 22 '21 at 16:08

1 Answers1

2

You can use srcdoc attribute inside your iframe tag to load an image. Please see the following example as reference:

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/Y8Wp3dafaMQ"
  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/Y8Wp3dafaMQ?autoplay=1><img src=https://img.youtube.com/vi/Y8Wp3dafaMQ/hqdefault.jpg alt='Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition'><span>▶</span></a>"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
  title="The Dark Knight Rises: What Went Wrong? – Wisecrack Edition"
></iframe>

Source:

How to lazy load a youtube video embedded on an iframe?

https://codepen.io/chriscoyier/pen/GRKZryx

https://css-tricks.com/lazy-load-embedded-youtube-videos/

Test Doe
  • 54
  • 5
  • It works. One more question is there a possibility to add my own class (for example .video) in srcdoc instead {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} ? i mean to have something like this: – Gladi Mar 23 '21 at 12:48