Hi, first of all thank you for your library, helped a lot :)

There is a bug described in the title.
Here is PR that should fix it:
#69

It's documented but not in the API readme and it doesn't work

Steps to reproduce the issue on the demo page:

1. Change the max-width to 1000px for the container

.container {
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
}

2. Play a Vimeo video

The video won't occupy the full-space of the thumbnail image (see my screenshot):

This doesn't seem to affect Youtube's videos though.

Is there or will there be an option for 16:9 or 4:3?

Hello. How to get thumbnail to manipulate with image? Is there simple way to wait untill it download, and then to get it without timeout?

lazyframe('.lazyframe', {
apikey: '',
onLoad: function (lazyframe) {
console.log(lazyframe.settings.thumbnail); //undefined
setTimeout(function(){
console.log(lazyframe.settings.thumbnail); // good
}, 1000);
}
});

See vimeo example here: https://vb.github.io/lazyframe/

//edit
I see that it happens with videos that return "Video is not rated. Log in to watch." when opened.
Other videos still work.

Hey,
I love this little script, so simple but great for my visitors.

I've noticed that my videos are no longer autoplaying when clicked.
I think this is only in Chrome and related to their new autoplay policies.

are you able to add
allow='autoplay' to the iframe?
IE:

i think this can be done by adding:
n.setAttribute("allow","autoplay"),
directly after
n.setAttribute("allowfullscreen",""),

but I'm not sure if that has other impacts.
It did work for me in my limited testing though.

thanks!

It would be really handy to be able to load titles and thumbnails using a custom callback.

As far as I can see, the current set of callbacks we can provide can't change how this data is loaded. We have to crawl the DOM and set the data-title and data-thumbnail attributes manually.

Cheers!

My local images that are passed as data-thumbnail attributes to a vimeo-iframe are always loaded on pageload and not, when they come into view. I tried to set lazyload: false, it did not have any effect. Any idea, what the problem might be?
Example Page: https://www.praktikawelten.de/freiwilligenarbeit-ghana

Hello there.

We tried to use this plugin to lazyload a youtube video.

When we tried to use it, we noticed that it requires to do 2 clicks most of the time to launch the video. This is reproducible even with the provided demo. Screencast

However, we noticed that there https://github.com/paulirish/lite-youtube-embed is a plugin, where it works without a double click.

We debugged the current plugin and figured out that to solve the double click problem we need to do 2 things.

1. Add prefetch logic, which is here https://github.com/paulirish/lite-youtube-embed/blob/master/src/lite-yt-embed.js#L87-L99 in that plugin.
2. Add allow iframe attribute with at least 'autoplay' value, which is here https://github.com/paulirish/lite-youtube-embed/blob/master/src/lite-yt-embed.js#L111.

PR welcomed to solve this issue.

56fc8f4

Missing from README 😃

I'm not able to manually import this script with <script type="module" src="">. Is it planned to add this feat in the near future?

Hello. Demo-link https://viktorbergehall.github.io/lazyframe/ is not working

First of all thanks for this awesome library!

It seems that I need to tap twice to play a YouTube video, you can test it on the demo-page: https://vb.github.io/lazyframe/

Is this intended behavior?

I'm trying to use lazyframe to lazy load a youtube short. I'm not sure if anyone has been able to get this to work or if this is a feature that would need to be added to the library.

Hi Victor,

Thank you for your code - i'm hoping I can ask you an integration question. I'm making an ajax call into a modal using the Featherlight modal which works fine.

After it's open I use a callback to re-initialize your lazyframe function and bind it to the .lazyframe' class. Everything works except it doesn't pull the thumbnail from the Youtube API, but i can play the video just fine.

The only difference with a stand-along page of the same content I have working with lazy frame, is the background image isn't populated with the image from the youtube API.

I thought i'd field a question if you have any thoughts. Thanks!

In my use of lazyframe, I found that I needed to make some css changes when the iframe loads. Mainly just want to ensure that my own background pops into place, the play button is hidden if an odd aspect-ratio video loads, etc.

In the unminified lazyframe.js, I did this, which seems to work:

        function n(e) {
            var t = this;
            if (e instanceof HTMLElement != !1 && !e.classList.contains("lazyframe--loaded")) {
                var n = {
                    el: e,
                    settings: i(e)
                };
                n.el.addEventListener("click", function() {
                    n.el.appendChild(n.iframe);
                    n.el.classList.add("lazyframe--frame-loaded");
                    var i = e.querySelectorAll("iframe");
                    n.settings.onAppend.call(t, i[0])
                }), d.lazyload ? l(n) : u(n, !!n.settings.thumbnail)
            }
        }

(if it's not clear, the single line change is n.el.classList.add("lazyframe--frame-loaded");
I guess two questions:

• Is this correct-ish?
• Could this, or a more appropriate option, be made a feature?

Library get's hqdefault image throu YT API, any chance to set another quality like maxresdefault?

Thanks

I am sure this just user error but could you help debug why my autoplay isn't working.

https://codepen.io/cluke009/pen/mdjwLgW

On Chrome in Ubuntu only youtube plays after interacting. On Firefox on Ubuntu both autoplay fine.

I also checked Edge on Windows 11 and neither autoplay.

In all instances your demo page behaves as it should.

Its a pretty straight forward setup so I am not sure what I am doing wrong.

Could you add background-position: center to the CSS (.lazyframe) for the cover image? Otherwise the cover image doesn't look great in some situations, like with the following code:

<div class="lazyframe" data-src="https://www.youtube.com/embed/3n35a28WL4s" data-vendor="youtube"></div>

Results in this:

With background-position: center applied, it looks correct as below:

Matt

Hello,

Any way to set these up (to disable related videos at the end, hide controls etc)? Adding those at the end of data source url does not seem to work.

?rel=0 gets ignored when added to the end of the youtube video url. It should disable related videos

hello,
I'm getting this error and neither the thumbnail nor the video information are loaded

Uncaught TypeError: Cannot read property 'split' of undefined
at o (lazyframe.min.js:1)
at i (lazyframe.min.js:1)
at n (lazyframe.min.js:1)
at t (lazyframe.min.js:1)
at testconfiltros.php:987

Hi,
On video https://www.youtube.com/watch?v=99MNIv1Jojw I get the following error in Chrome

Uncaught TypeError: Cannot read property 'url' of undefined at Object.thumbnail (lf.js:1) at lf.js:1 at XMLHttpRequest.i.onload (lf.js:1)

I have not checked your js-code very well, but can Youtube API spit out different Thumbnail data?

Hello,

Great plugin. The only issue I'm having is with Vimeo. As soon as I swop out your example I'm getting the error,

Oops!
The embed code for this video is not valid.
https://vimeo.com/17079380

Can you help?

All the best, Stephen

Also is there anyway of setting the wmode, showinfo & modest branding?

Hello,

I have a small problem with lazy loader and slick carousel initialization. I want to put 0..N videos inside slick like this

Problem is obvious. SOmetimes happen that some semi-visible parts are "red backgrounded". Is there any way how to get rid of that and load thumbnails for semi-visible videos? (Or load and paste thumbnails for all lazyloaded videos?)

Thank you for your time.

Previously I was on 2.2.4.

What I see in node_modules now:

No src folder, no scss files.

My js code:

$(document).ready(function() {
    //YouTube lazy load
    let elements = $('.lazyframe');
    lazyframe(elements, {
        apikey: 'my-api-key,
    });

});

No changes in code except loading css with @import '~lazyframe/dist/lazyframe.css';, but now all YT videos isn't working:

Videos don't play, clicks don't work.

What is it?

Hi, can this be used with a video locally hosted on the server an mp4 file?