Odtwarzanie filmu z ytb jako background

pytanie zadane 27 maja 2022 w HTML i CSS przez itclouder Nowicjusz (160 p.)

Witajcie.

Szukałem w internecie informacji na ten temat i poddałem się po godzinie.
Na tym forum kierowano do arykułu: https://grafmag.pl/artykuly/strona-internetowa-z-filmem-wideo-w-tle

Ale nie tego szukam. Nie chcę odwoływać się do dużego bądź co bądź pliku (15 MB) na serwerze, bo to będzie zabierało transfer na hostingu i też wczytanie 15MB będzie trochę trwać.

Zależy mi na takim jakby "w tle" streamowaniu filmu który mam na swoim kanale ytb.

Tu też zaczyna się problem, bo znalazłem jak osadzać w iframe takie filmy, ale... widoczne są opcje ytb itd. a po zakończeniu film mimo autoplay nie jest wznawiany i pojawia się playlista, co głupio wygląda.

Np. ten kod nie do końca działa jak powinien.

<html><head>

<style>
/* Make the youtube video responsive */
  .iframe-container{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
  }
  .iframe-container iframe{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

</head>

<body>

<!-- 1. The <iframe> (video player) will replace this <div> tag. -->
<div class="iframe-container">
  <div id="player"></div>
</div>

<script>
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      width: '100%',
      videoId: '7j4WQ5qOBZY',
      playerVars: { 'autoplay': 1, 'playsinline': 1 },
      events: {
        'onReady': onPlayerReady
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
     event.target.mute();
    event.target.playVideo();
  }
</script>
</body>
</html>

1 odpowiedź

odpowiedź 27 maja 2022 przez VBService Ekspert (253,120 p.)
edycja 27 maja 2022 przez VBService

Może spróbuj za pomocą z-index "schować" play-er pod kontenerem gdzie będzie reszta kontentu strony

po zakończeniu film mimo autoplay nie jest wznawiany i pojawia się playlista, co głupio wygląda.

dodaj do playerVars: loop: 1 (zapętla odtwarzanie)
(autoplay - uruchom video po załadowaniu strony)

całość

<html>
  <head>

    <style>
      * {
        box-sizing: border-box;
      }
      html,
      body {
        margin: 0;
        padding: 0;
        width: 100vw;
        overflow: hidden;
      }
      /* Make the youtube video responsive */
      .iframe-container{
        position: absolute;
        width: 100%;
        padding-bottom: 56.25%;
        height: 0;
      }
      .iframe-container iframe{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
      }
      .page-container {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: rgba(0,0,0,0.7);
        color: white;
        overflow-x: hidden;
      }
      .page-container p {
        margin: 1em;
      }
      .page-container p.lorem {
        width: 50vw;
        margin: 2em auto;
      }    
    </style>
  </head>
  <body>

    <!-- 1. The <iframe> (video player) will replace this <div> tag. -->
    <div class="iframe-container">
      <div id="player"></div>
    </div>

    <div class="page-container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <ul>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
      </ul>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>

    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          width: '100%',
          videoId: '7j4WQ5qOBZY',
          playerVars: { 
            autoplay: 1,
            controls: 0,
            showinfo: 0,
            modestbranding: 1,
            loop: 1 
          },
          events: {
            'onReady': onPlayerReady
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.mute();
        event.target.playVideo();
      }
    </script>
  </body>
</html>

komentarz 28 maja 2022 przez reaktywny Nałogowiec (40,990 p.)

Wątpie, żeby było to możliwe :) YT / G na to nie pozwolą :)

Z tego co się orientuję do dużych plików (szczególnie video) często stosuje się dodatkowy hosting. To podraża oczywiście całe przedsięwzięcie, ale też odciążasz serwer na którym masz stronę. Poza tym dobrze mieć film w kilku rozdzielczościach dostosowanych do ekranów użytkowników.

Rzuć okiem na: https://bunny.net/stream/

https://www.scalahosting.com/blog/vps-or-dedicated-hosting-for-video-websites/