WebSite X5Help Center

 
Reza M.
Reza M.
User

Youtube object lazy loading  en

Autor: Reza M.
Visited 1661, Followers 1, Udostępniony 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 ODPOWIEDZI
Daniel W.
Daniel W.
User

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

-----

Czytaj więcej
Posted on the from Daniel W.
Daniel W.
Daniel W.
User

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.

Czytaj więcej
Posted on the from Daniel W.
Daniel W.
Daniel W.
User

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.

Czytaj więcej
Posted on the from Daniel W.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca ESNajlepszy Użytkownik miesiąca 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

.

Czytaj więcej
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. =)

Czytaj więcej
Posted on the from Joabe Arruda
Reza M.
Reza M.
User
Autor
 ‪ 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

Czytaj więcej
Posted on the from Reza M.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca ESNajlepszy Użytkownik miesiąca 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

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪