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

-----

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.

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.

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

.

.

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

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

...  ...  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

.