Videos Youtube

Ejemplo

Por defecto los reels se cargan en 360p, para que se carguen a 1080p hay que forzar la calidad con la API de Youtube.

Los vídeos se embeben con el ID

				
					<div class="yt-player" data-video="C40-tR1KV5k"></div>
<div class="yt-player" data-video="dQw4w9WgXcQ"></div>
<div class="yt-player" data-video="M7lc1UVf-VE"></div>

Hay que poner este css

				
					iframe {
    width: 410px !important;
    height: 80vh;
    min-height: 729px;
    transform-origin: top left;
}

y estos scripts para forzar la carga de la API de Youtube.

				
					<script src="https://www.youtube.com/iframe_api"></script>

<script>
(function () {

  let apiReady = false;

  function waitForAPI(callback) {
    const check = setInterval(() => {
      if (window.YT && window.YT.Player) {
        clearInterval(check);
        callback();
      }
    }, 100);
  }

  function initPlayers() {
    const elements = document.querySelectorAll('.yt-player');

    console.log("YT elements found:", elements.length);

    elements.forEach((el, i) => {

      const videoId = el.dataset.video;

      if (!videoId) return;

      // evita doble render
      if (el.dataset.done === "1") return;
      el.dataset.done = "1";

      const id = "yt_" + i + "_" + Math.random().toString(36).slice(2);
      el.id = id;

      const player = new YT.Player(id, {
        videoId: videoId,
        width: "100%",
        height: "100%",
        playerVars: {
          playsinline: 1,
          rel: 0
        },
        events: {
          onReady: (e) => {
            try {
              e.target.setPlaybackQuality("hd1080");
            } catch (err) {
              console.log("quality fallback", err);
            }
          }
        }
      });

      console.log("Player created:", player);
    });
  }

  function boot() {
    waitForAPI(initPlayers);
  }

  document.addEventListener("DOMContentLoaded", boot);

})();
</script>