Need help with Youtube "Lazyload" embed

Webdesign Help
1

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”>
/div>

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

You can see the effect on my page:

www.MixMasterandMore.com/postwork.html

Thanks for any insight anyone may have!

2

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
3

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.

4

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.

5

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.