WebSite X5Help Center

 
Reza M.
Reza M.
User

Youtube object lazy loading  en

Author: Reza M.
Visited 1082, Followers 1, Shared 0  

hi,

please advise how can you activate lazy loading on youtube objects?

i have so many embeded youtube videos on my website and and it pulls out so many resorces and caused my website to slow down and rank lower in SEO.

please provide a solution to lazeload youtube embeded videos

my website page:

https://novotechmachinetools.com/rebar-bender-and-cutter.html

Posted on the
8 ANSWERS
Daniel W.
Daniel W.
User
Best User of the month EN

Information and Youtube code change, see screenshot on the linked German website below.

-----

This optimizes the loading time for embedded YouTube videos

1. Paste the normal Youtube code as an iframe

2. Remove the link from the iframe src attribute so that only src="" is left

3. Add a data-src attribute to the Youtube link

German >> https://www.position-one.de/ladezeit-youtube-videos-optimieren-fuer-pagespeed.html

-----

Read more
Posted on the from Daniel W.
Daniel W.
Daniel W.
User
Best User of the month EN

4. Fügen Sie diesen Javascript Code im Footer der Seite ein:

-----

function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;

-----

This prevents the browser from reading the YouTube code until the image is clicked. Moving the video files can often save you dozens of file requests and resource downloads. This allows you to embed YouTube videos without having to sacrifice your page speed.

Read more
Posted on the from Daniel W.
Daniel W.
Daniel W.
User
Best User of the month EN

4. Paste this javascript code in the footer of the page:

-----

function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;

-----

Perhaps the English-speaking forum users can also link an English website on this topic.

Read more
Posted on the from Daniel W.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month PT

x Reza M., (It > En)  ... if you are interested in my invention, as it is(!), with my exclusive and unique EXTRA code, let me know...cool...
1) while reading the page, the ongoing loading of YT videos is eliminated;
2) a cover is applied, which on click restores the relative YT video and starts it;
Hello

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Joabe Arruda
Joabe Arruda
User
Daniel W.
Information and Youtube code change, see screenshot on the linked German website below. ----- This optimizes the loading time for embedded YouTube videos 1. Paste the normal Youtube code as an iframe 2. Remove the link from the iframe src attribute so that only src="" is left 3. Add a data-src attribute to the Youtube link German >> https://www.position-one.de/ladezeit-youtube-videos-optimieren-fuer-pagespeed.html -----

I tested here, I made some improvements and this works well, great trick, I will use in many projects. =)

Read more
Posted on the from Joabe Arruda
Reza M.
Reza M.
User
Author
 ‪ KolAsim ‪ ‪
x Reza M., (It > En)  ... if you are interested in my invention, as it is(!), with my exclusive and unique EXTRA code, let me know...... 1) while reading the page, the ongoing loading of YT videos is eliminated; 2) a cover is applied, which on click restores the relative YT video and starts it; Hello .

Kolasim,

i was hopping for a solution by incomedia to do it on the WEBSITE X5 without extra coding.

in your solution it seems that video thumbnail is disaapeard , right?

that would be helpful if you let us know how to do it

Read more
Posted on the from Reza M.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month PT

... cool ...  OK ... >>  >>

<script>
$( document ).ready(function() { //K>
/** === by KolAsim === **/
ritardoK=3;
setTimeout(function(){ //K1>
K =$("div[id^='imObjectVideo_'] iframe"); kk=[];
divK =$("div[id^='imObjectVideo_'] > div > div ");
for(var i = 0, TotK = K.length; i < TotK; i++){ //K2>
kk[i]= $(K[i]).attr("src");ii=i;
imageYTK = "https://cdn.pixabay.com/photo/2018/03/11/13/06/youtube-3216705__340.jpg";
$( divK[i]).prepend('<img id="imgK" onclick="playK(\' '+ kk[i]+ ' \', ' + ii + ' ) ;this.style.display=\'none\'" src= ' + imageYTK + ' width=100% height=100%  style="position:absolute;top:0px;left:0px;z-index:1000000; cursor:pointer" />');
$(K[i]).attr("src","");
} //K2<<
}, ritardoK*1000); //K1<<
}); //K<<
function playK (vv, zz) { //K3>
$(K[zz]).attr("src",vv);
$(K[zz]).click();
$(K[zz])[0].src += "&autoplay=1";
} //K3<<
</script>

.

.

ciao

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪