Tips sobre Youtube

El vídeo de YouTube incrustado, aumenta el tamaño en bytes de las páginas web, para reproducir vídeo. Esto aumenta el tiempo de carga, afecta la velocidad del sitio web.

Lite YouTube Embeds

Es un componente web que renderiza las inserciones de YouTube más rápido: lite-youtube-embed  . https://github.com/justinribeiro/lite-youtube

<!-- Agregar al final del body -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.5.0/lite-youtube.js"></script>

<!--Agregar en el html para insertar video -->
<lite-youtube videoid="LII8Nfu1sOE"></lite-youtube>

No uses el código Embeds de YouTube https://youtu.be/LII8Nfu1sOE

Paso 1: Copie y pegue el siguiente fragmento de código HTML en cualquier parte de su página web donde desee que aparezca el video de YouTube. Recuerde reemplazarlo VIDEO_IDcon el ID real de su video de YouTube.

<div class="youtube-player" data-id="VIDEO_ID"></div> 

Paso 2: Copie y pegue el código JavaScript en cualquier parte de su plantilla web. El script busca todos los videos incrustados en una página web y luego reemplaza los elementos DIV con las miniaturas. 

<script>
  /*
   * Light YouTube Embeds by @labnol
   * Credit: https://www.labnol.org/
   */

  function labnolIframe(div) {
    var iframe = document.createElement('iframe');
    iframe.setAttribute('src', 'https://www.youtube.com/embed/' + div.dataset.id + '?autoplay=1');
    iframe.setAttribute('frameborder', '0');
    iframe.setAttribute('allowfullscreen', '1');
    iframe.setAttribute('allow', 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture');
    div.parentNode.replaceChild(iframe, div);
  }

  function initYouTubeVideos() {
    var playerElements = document.querySelectorAll('.youtube-player');
    for (var n = 0; n < playerElements.length; n++) {
      var videoId = playerElements[n].dataset.id;
      var div = document.createElement('div');
      div.setAttribute('data-id', videoId);
      var thumbNode = document.createElement('img');
      thumbNode.src = '//i.ytimg.com/vi/ID/hqdefault.jpg'.replace('ID', videoId);
      div.appendChild(thumbNode);
      var playButton = document.createElement('div');
      playButton.setAttribute('class', 'play');
      div.appendChild(playButton);
      div.onclick = function () {
        labnolIframe(this);
      };
      playerElements[n].appendChild(div);
    }
  }

  document.addEventListener('DOMContentLoaded', initYouTubeVideos);
</script> 

Paso 3: Copie y pegue el CSS antes de la etiqueta de cierre de su plantilla web.

<style>
  .youtube-player {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin: 5px;
  }

  .youtube-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: transparent;
  }

  .youtube-player img {
    object-fit: cover;
    display: block;
    left: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    height: auto;
    cursor: pointer;
    -webkit-transition: 0.4s all;
    -moz-transition: 0.4s all;
    transition: 0.4s all;
  }

  .youtube-player img:hover {
    -webkit-filter: brightness(75%);
  }

  .youtube-player .play {
    height: 48px;
    width: 68px;
    left: 50%;
    top: 50%;
    margin-left: -34px;
    margin-top: -24px;
    position: absolute;
    background: url('https://i.ibb.co/j3jcJKv/yt.png') no-repeat;
    cursor: pointer;
  }
</style>

---

Cómo insertar una parte de cualquier vídeo de YouTube https://www.labnol.org/internet/embed-part-of-youtube-video/27948/

A: Incrustar video de YouTube con hora de inicio

<iframe
  width="500"
  height="300"
  frameborder="0"
  allowfullscreen
  src="http://www.youtube.com/embed/VIDEO_ID#t=1234s"
></iframe>

B: Incrustar video de YouTube con hora de inicio y de finalización

<div
  data-video="Iq3zo432sAU"
  data-startseconds="323"
  data-endseconds="432"
  data-height="309"
  data-width="550"
  id="youtube-player"
></div>

<script src="https://www.youtube.com/iframe_api"></script>
<script type="text/javascript">
  function onYouTubeIframeAPIReady() {
    var ctrlq = document.getElementById('youtube-player');
    var player = new YT.Player('youtube-player', {
      height: ctrlq.dataset.height,
      width: ctrlq.dataset.width,
      events: {
        onReady: function (e) {
          e.target.cueVideoById({
            videoId: ctrlq.dataset.video,
            startSeconds: ctrlq.dataset.startseconds,
            endSeconds: ctrlq.dataset.endseconds,
          });
        },
      },
    });
  }
</script> 

El código de inserción estándar de YouTube no admite el parámetro de hora de finalización, pero podemos utilizar la API de JavaScript de YouTube para insertar una parte de cualquier video de YouTube.

<div
  data-video="VIDEO_ID"
  data-startseconds="100"
  data-endseconds="200"
  data-height="480"
  data-width="640"
  id="youtube-player"
></div>

<script src="https://www.youtube.com/iframe_api"></script>
<script type="text/javascript">
  function onYouTubeIframeAPIReady() {
    var ctrlq = document.getElementById('youtube-player');
    var player = new YT.Player('youtube-player', {
      height: ctrlq.dataset.height,
      width: ctrlq.dataset.width,
      events: {
        onReady: function (e) {
          e.target.cueVideoById({
            videoId: ctrlq.dataset.video,
            startSeconds: ctrlq.dataset.startseconds,
            endSeconds: ctrlq.dataset.endseconds,
          });
        },
      },
    });
  }
</script> 

...

Estructura: https://www.youtube-nocookie.com/embed/watch?v=ID-video&list=ID-ListaVideos

https://www.youtube-nocookie.com/embed/watch?v=pK3JZgaq_Aw&list=PLbvFHlCXHGXniVKmNzX_KcvI_wGnR9GD0 

Ver lista de Reproduccion: https://www.youtube-nocookie.com/embed/watch?v=pK3JZgaq_Aw&list=PLbvFHlCXHGXniVKmNzX_KcvI_wGnR9GD0

...

 Aquí va el código a mostrar