WebSite X5Help Center

 
Reza M.
Reza M.
User

Youtube object lazy loading  en

Autor: Reza M.
Visitado 1659, Seguidores 1, Compartilhado 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

Publicado em
8 RESPOSTAS
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

-----

Ler mais
Publicado em de 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.

Ler mais
Publicado em de 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.

Ler mais
Publicado em de Daniel W.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuário do mês ESUsuário do mês 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

.

Ler mais
Publicado em de  ‪ 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. =)

Ler mais
Publicado em de 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

Ler mais
Publicado em de Reza M.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuário do mês ESUsuário do mês 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

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪