Need help with Youtube "Lazyload" embed

I am using PrintNinja’s “Youtube Lazyload” online component. When I click through the thumbnail the actual video is much smaller than the thumbnail. I would like to know how to control the size of the video so it matches the thumbnail. Here is the custom code in the Lazyload component:

div class=“youtube-container”>
div class=“youtube-player” data-id=“fduo9S3i0CU”>

(I had to remove the left < in order to make the code show in the forum.)

You can see the effect on my page:

Thanks for any insight anyone may have!

You have taken some of the css out of the original file:

#youtube-iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
1 Like

Thank you Richard! Your suggestion solved it.

It turns out that the newer “Lazyload-2020” component fixes the thumbnail image problem, but doen’st include the CSS from the original component. So I copied over the CSS and now it all works.

Thanks again for your help.

Sorry for chiming in late on this thread. Been away from the BSS forum for the last two weeks working on a big project.

I will add the CSS to the updated Lazyload component. Thanks for catching this.

UPDATE: I checked the YouTube Video Lazyload 2020 component and it contained the exact same CSS as the original YouTube Video Lazyload component. The code that @richards posted above is in the CSS file that is part of the YouTube Video Lazyload 2020 component, so I’m not sure why you were missing it.

FYI - I’ve deleted the original YouTube Video Lazyload component from the online library since it contained a link in the CSS to a dead URL.

Thanks for the response printninja, I don’t know why I was missing the CSS either, but this is my first ever website design, so I probably inadvertently deleted it. I’m still very much a BSS beginner.