WebSite X5Help Center

 
Reza M.
Reza M.
User

Youtube object lazy loading  en

Autor: Reza M.
Besucht 1660, Followers 1, Geteilt 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

Gepostet am
8 ANTWORTEN
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

-----

Mehr lesen
Gepostet am von 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.

Mehr lesen
Gepostet am von 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.

Mehr lesen
Gepostet am von Daniel W.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats ESNutzer des Monats 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

.

Mehr lesen
Gepostet am von  ‪ 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. =)

Mehr lesen
Gepostet am von 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

Mehr lesen
Gepostet am von Reza M.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats ESNutzer des Monats 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

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪