I’ve been experimenting with optimizing page load speed on my Shopify store. One thing that seemed to work really well was lazyloading the YouTube embed. The problem is doing so is distorting the video dimensions for some reason. I made no change to iframe height or width in the HTML, just changed src to data-src and added class=”lazyload”

Regular YouTube embed on product page:

r/web_design - Lazyloading Video Embed Distorts Video Dimensions?

After lazyload test on another page:

r/web_design - Lazyloading Video Embed Distorts Video Dimensions?

You can see that the screencap is zoomed in and distorted with black borders on the top and bottom of the embed.



Source link

Write A Comment