When video option is turned on, the lazy load image is too big

Hi, again…

Also the spinner and fade-in add a large square space where the image should be. This is causing havoc with logos I have in sliders as it makes the slider size jump around while logos are loading.

See screenshot of the issue here
https://www.digitalsignageexpo.net/wp-content/uploads/a3_lazy_load_attendee_logo_issue.jpg

I have had to disable the lazy loader plugin for now.

Your assistance is appreciated.
CommMgr

I have the same issue with the Divi theme video module.

It adds height and width to iframe that is huge.

Hello @jinsley8

Sorry I don’t have the divi theme to check what the issue is here – can you link to a page on your site where I can see that issue

Steve

Hi, Steve…

I had to disable your plugin because of the issue as that page was live. Perhaps jinsley8 has a page you can review.

I would really like to use your plugin, so hoping you’ll be able to figure it out.

CommMgr

@a3rev This page is going live in 24 hours but video is on this page.

https://wordpress-239388-1181465.cloudwaysapps.com/

@jinsley8 @commmgr

Thanks – have looked and it appears that the Divi Video block creates and iframe and adds a width and height attribute to it. From the Screenshot that @commmgr post and the video on your site it is the same value

Example
<div class="et_pb_video_box"><iframe class="lazy lazy-hidden" title="Computer Guided Bone Augmentation" width="1080" height="608" data-lazy-type="iframe"

a3 Lazy Load when activated changes src to the very small placeholder and then lazy loads the original src again when it’s on viewport.

You are seeing the 1080 x 608 size because that is the src attribute set by the divi video module. a3 Lazy Load does not change on that, and it loads that size because that is what the src tells the browser to do.

Looking @commmgr site I can see that the videos are not actually loaded – it loads a placeholder image. Then when the image is clicked it loads the iframe video. Is that a lazyload feature of Divi for video or have you install a plugin to do that?

If it is Divi video lazy load you could just deactivate a3 Lazy Load Video iframe feature and use the divi video feature.

• This reply was modified 4 years, 8 months ago by Steve Truman.

This is the iframe code when A3 Lazy Load is active:

<div class="et_pb_video_box">
<iframe class="lazy-loaded" title="Computer Guided Bone Augmentation" width="1080" height="608" data-lazy-type="iframe" data-src="https://www.youtube.com/embed/Ho9bESMNmts?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" src="https://www.youtube.com/embed/Ho9bESMNmts?feature=oembed"></iframe>
<noscript><iframe title="Computer Guided Bone Augmentation" width="1080" height="608" src="https://www.youtube.com/embed/Ho9bESMNmts?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></noscript>
</div>

Now this is the video module code when lazy load is turned off:

<div class="et_pb_video_box">
<div class="fluid-width-video-wrapper" style="padding-top: 56.2963%;">
<iframe title="Computer Guided Bone Augmentation" src="https://www.youtube.com/embed/Ho9bESMNmts?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" name="fitvid0"></iframe>
</div>
</div>

Lazy Load strips that fluid-width-video-wrapper div and adds width/height.

First, @jinsley8…thank you for providing a working page so Steve could see the Divi video module.

Second, @steve…on the first screenshot I provided, the videos on the top are what the videos look like using the Divi video module. The size is correct with just the Divi module…and the size is responsive.

It is only when I activate your plugin that the video thumbnail images are enlarged.

See this screenshot of the Divi Module code, without your plugin:
https://www.digitalsignageexpo.net/wp-content/uploads/a3_lazy_load_video_size_issue2.jpg

Also, there is also the issue of the size of your “spinner” adding a large graphic space when an image is loading, and if that image is not the same height/width as your spinner size, it makes images on a slider jump around.

Thanks for your assistance.
CommMgr

@jinsley8…thanks for posting that code.

CommMgr

@commmgr @jinsley8

Thanks for your work on this.

Re this:

on the first screenshot I provided, the videos on the top are what the videos look like using the Divi video module. The size is correct with just the Divi module…and the size is responsive.

It is only when I activate your plugin that the video thumbnail images are enlarged.

What the divi video module does is on first load it load the video image – It is only when you click on the image that it loads the Youtube iframe embed code – this is the code that divi run when you click on the image

<div class="fluid-width-video-wrapper" style="padding-top: 56.2963%;">
<iframe title="Computer Guided Bone Augmentation" src="https://www.youtube.com/embed/Ho9bESMNmts?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" name="fitvid0"></iframe>
</div>

That script that they run on click removes the Youtube iframe width and height attribute and adds the fitvid script.

a3 Lazy Load cannot see that script it just gets the Youtube video embedded iframe which has the width and height attribute, which is why the size is not responsive.

I do not know why they don’t use the WordPress core oembed script for the video module? It has built in auto support for resize. To show you what I mean I have created a demo page with @commmgr Youtubes.

The demo is WordPress 5.3.2 with default 2019 theme, I have use Kadence Row Block to create the Video cards. The site also has a3 Lazy Load.

The first row of blocks has the videos embedded with the WordPress Youtube block, just add the block and copy the video url into it and click embed.

The second row the videos are created with the just copy and paste the youtube video URL into a paragraph block. Columns are created with the row block.

Here is a link to the demo

There is another demo that you can look at that show how is the video is added via the youtube embed code that it also cannot resize – its the third video and you can see what I mean in a phone view – here is that demo. That one relates to this support ticket

So long story short – is that the way that the Divi Video block is made that no lazy Load plugin can work with it (because it gets the Youtube embed iframe which has width and height attribute and that is what the browsers load).

The only thing that can lazy load the video in a responsive size is the divi script which is far from ideal.

In addition they also do not have either of the universal exclude classname or attribute which would allow a3 Lazy Load or any other lazy load to exclude the videos. If this was present then any Lazy Load plugin could just ignore the videos and let divi lazy load them.

Those are:
Exclude by classname <video class="skip-lazy">
or
Exclude by attribute <video data-skip-lazy>

If they where to add support for one of those then all would be good.

Hope that info helps

Steve

Thanks for you time checking this out. I can send this thread to Divi support now and see what they say about the issue.

Hello @jinsley8

OK great – please let me know what they come back to you with.

Steve

Hello @jinsley8

Do you have any update on feedback on this from the Divi people?

Steve

No, Elegant Themes support is useless.

They told me just to use Smush or Smush Pro lazy load. This lazy load causes the exact same issue.

I told them this then they said just disable the video lazy load in A3 then. I said I’m using it because I NEED video lazy load.

So then they transferred me to another guy who said then just use one of these:
https://divi.space/plugins/top-6-lazy-load-plugins-to-make-your-wordpress-site-faster/

haha, nothing works.

Hello @jinsley8

Yes I did say in an earlier reply after digging into their video module code

So long story short – is that the way that the Divi Video block is made that no lazy Load plugin can work with it (because it gets the Youtube embed iframe which has width and height attribute and that is what the browsers load).

and you have confirmed that now with your testing.

The only work around and I don’t know if this is something you can do is to rebuild the pages that you have the videos on with the Gutenberg editor like I showed you in the 2 demos in this reply

I will change the status of your ticket to ‘Resolved’ …. not that it is – but as you have exhausted every avenue of trying to get the Divi Video Module developers to make something that 3rd Party Lazy Load plugins can work with – there is nothing more we can do.

You can still reply if you wish.

Steve