Existe-t-il un moyen de charger des vidéos YouTube intégrées plus rapidement sur mon site Web?

Il n'y a aucune question à obtenir plusieurs vidéos de différents sites Web prend du temps. Avez-vous essayé d'obtenir une copie de ces vidéos, de la télécharger sur votre serveur Web et d'intégrer vos vidéos de cette façon? Il peut augmenter la vitesse de rendu de vos pages si les vidéos proviennent d'une source unique.

Votre "méthode Ajax-y" sera le seul moyen de vous accélérer. Les grands sites vont utiliser un CDN et avoir une bonne mise en cache. Il n'y a aucun moyen de prendre beaucoup de fois que de grands fichiers ...

Garder l'objet ou la balise vidéo hors du code HTML, puis l'ajoutez-la après la charge de la page, améliorera les performances de charge de la page perçue. Peut-être échanger une image screengrab qui a la même taille que la vidéo éventuelle ...

Il est tôt pour la balise vidéo, mais il est possible que le délai d'initialisation soit éventuellement plus rapide que Flash, car il fait partie du navigateur et non un plug-in 3 tiers.

La majeure partie du temps de chargement vidéo dépend de la manière dont la vidéo a été codée / transférée qui est hors de votre contrôle, on dirait.

Le problème avec des vidéos YouTube intégrées est que le joueur lui-même doit être chargé. Vous pouvez ajouter des "contrôles = 2" dans l'URL du code d'intégration, mais qui ne ferait que des joueurs AS2 / 3 pour charger le joueur après avoir cliqué sur.

La solution de contournement Google+ a pour ce numéro n'est pas de charger le joueur du tout. Au lieu de cela, il charge une image miniature avec un bouton de lecture superposé. En cliquant sur le clic, l'image est remplacée par le joueur YouTube IFrame IFrame Incord Code et TI Charge et joue automatiquement.

Ceci peut être fait dans n'importe quel site en utilisant le simple JavaScript ci-dessous. https://skipser.googlecode.com/files/gplus-youtubeembed.js

La solution Google Plus est le seul moyen d'améliorer les performances: chargez un talon d'image, puis chargez le lecteur complet lorsque l'utilisateur clique sur.

bâtiment de la solution de @boschaarun Voici la solution que j'utilise: P >

<style>
div.video-container a img.playbutton {visibility: hidden;
  content:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE0AAABNCAQAAABJACE7AAAEvklEQVR4AdyYX0hbVxzHv5CH4kMZVUighTLxKXmMCBGF/MKC26Qy5x6njMEsGCgU8zBQygaDsJVC2IOCoIPhAqtjbFxmXsJl4EPgPpSGhTDSQDPXEbUNRSpGZ/6cwSHk5MaYa8498WGf39sVrt/c8/vz/R38X+mDE4PwwAsfxuEHwY9x+OCFB4Nwog9XjgMuuDEKsoxRuOGCA1fCADwg8Jic2VwyNvKJYvq4cHZULbNatXx2dFwopvMJY2NzaXKmIdGDAfSUWxgB/1cri5mtN8+ZJW+eZ7ZWFuvyRnALPeEmfCDQwmwqVjpgXVE6SMUWZrk8H25CKTfgBYEioV2dSbOrR0Jcnhc3oIgh8K+VTzDb5BP1rzcE21zHMAhkbLC2HD7Lanp0NRyaG5vqDzoC/cGxqdDcaliPZrXDZ6wtxgYXN4zrsIELftDyfDHNzvFiR4tMTIM6xcS0Fnmxw85RTC/P8x7ogiS3QaD4Q1ZrSeq95JpZlJXA5Fppj5mpxR/yv96GBIMgUCrGTJy81KMgmdCjJy+ZiVSM/2VQSlgu3voyZxAkG85g6w/NxbsXx48ynzAn/KN7ILvx6J65OPKJ7o7Vdf6L5bavBUAq4logt93my7ku1y78rTlmrINUhrF+Luf8l2klw7wqm5BMfIuiYE3wah2+ROdfnmc1eWFS4mq8zw11npUEKqZlj1L+WItp/qzDbPWaR1JuG9TLyG23jC/vxbaHFmab24X9qrSq1uZWwgf/BZbJZ+5lEn1Mos+19DhfewdLkZC5pC+KfeP+J4rEmdoU93NtnPAIaFcXs7LTSGKsWvnz1/c+VCHNGRSzdVfnNr2FAZFn1i2DccolY/3td9W2EZ5vAzDhaf60pb3OL2t2/T9/5bBdLKU9Uxp5zHslgcQyklyzliZ4neE5YiOSa+Kn8icO00BfWWQNrIwia6X29++ffSwvbWKaNVhZNA97NyizJaw1qCtpnEo5/Xjkjqw4YdMzWyC40WAUJBZeLSIhjfPvoR596x0ZaVpELNUgjIpLFZqcMR2npDT+6r+++9zekfLriD5wnKDNJTGeQHLSBK+ecifRVYiRtbkEgrOxB4ihntXkpQmqtVz8zkfdSMtqYtCLfcHTPDv1qH1pMi1Zj4pZKnqbt9mjrYZVSBN96revL+dfVsMm7+ZtOI7jAqsTmlMlTWTvt/et3xmaY3WOC8KBjIPOjlidsSnF0jj/7Fi15LEpVufsCIRxcPygapnV6Q/alybTkvuDjRIq8w2LQyCxqDgCvZFWrWU1+uDidzoCYuzxJ1f11V5nvrgLEmH91Xqfa3x8xb/hVSqRaz2rUO6Gf+EZJlGhvetr4oqP5PtaT6bBaVGLiJKSnQbKZ2i1kvlJHKP8DFXuPF49DX8Ksu88FPu106JYY+z7NWUut1L+40f3+yAVLlfpbnDwhG/0yncDmxtV6eDxlyD1G5XNPbRSTv0gjlH9Hiq9ve8bd2dB6rd3m3cepf3YA1Bv7zwkbooqp0++F75f/U2R9P1aIck965Xdr/3XrB0IAAAAMAzyt06jY3zFr2T95T4P+N8N/tryN6q67MU9tK7ITXv/xcLvPH4d85uiWmLlfq1Wf7mVfIVp4HIDzfwP/+fzW/C0yiYAAAAASUVORK5CYII=")
}
div.video-container a:hover .playbutton {visibility: visible;}
</style>              

<div class="video-container">
  <a style="position: relative; left: 0; top: 0;" href="https://www.youtube.com/watch?v=IJl2C8QPVjQ&amp;rel=0">
    <img src="//img.youtube.com/vi/IJl2C8QPVjQ/0.jpg" style="position: relative; top: 0; left: 0; width:100%; height:auto">
    <img class="playbutton" style="position: absolute; top: 50%; left: 50%; margin-left:-38px; margin-top:-38px">
  </a>
</div>

<script>
$('.video-container').click(
  function(e){
    e.preventDefault(); 
    var imgURL = $(this).find("img").attr('src');
    var rx = /\/vi\/([^\/]+)/
    var arr = rx.exec(imgURL);
    var url = "//www.youtube.com/embed/"+arr[1]+"?rel=0&autoplay=1";
    $(this).find("img").hide();
    $(this).append('<iframe width="100%" height="315" src="'+url+'" frameborder="0" allowfullscreen></iframe>');
  }
);
</script>                      

• se dégrade à img si nécessaire li>
• sémantique li>
• réactif li>
• utilise jQuery li> ul> p>