Strange issue.

[a5mith]

Hey buddy, I'm creating a plugin to utilise lazyYT on some Bulletin Board software (nodebb) but have run into an issue that I can't seem to get my head around, for some reason, when you click the div to load the video, the iFrame comes out in completely the wrong order. The ' + id + ' comes out in between the end of the height and before the src of the iFrame, it's also been changed to all lowercase, which, isn't good.

From

$el.on('click', function (e) {
    e.preventDefault();
    if (!$el.hasClass('lazyYT-video-loaded') && $el.hasClass('lazyYT-image-loaded')) {
        $el.html('<iframe width="' + width + '" height="' + height + '" src="//www.youtube.com/embed/"' + id + '?autoplay=1&' + youtubeParameters + '"></iframe>')
            .removeClass('lazyYT-image-loaded')
            .addClass('lazyYT-video-loaded');
    }
});

to

<iframe width="640" height="360" ld3a3qcpxd4?autoplay="1&amp;&quot;" src="//www.youtube.com/embed/"></iframe>

However the div class IDs etc all display the correct video ID of ld3A3QCpXd4, and in the right place.

The actual lazyYT code isn't touched (apart from me playin with the iFrame issue), I just use Regular Expression to pull the video ID from a normal youtube link and add it into the div as normal using this approach

Thanks for any assistance in advance.

[a5mith]

Ok, managed to solve this by not supplying a width and a height in the iFrame and instead wrapping the iFrame in a div and giving that the height and width instead. Will mark this as closed. Thanks.

[tylerpearson]

Hmm, I'll look into this more too. It may have resulted from https://github.com/tylerpearson/lazyYT/pull/4