• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Odtwarzanie filmu z ytb jako background

VPS Starter Arubacloud
0 głosów
224 wizyt
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ź

+1 głos
odpowiedź 27 maja 2022 przez VBService Ekspert (251,210 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)  wink
(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,650 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/
komentarz 28 maja 2022 przez VBService Ekspert (251,210 p.)

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

skoro udostępniają API to chyba jednak nie mają nic przeciwko. smiley

komentarz 28 maja 2022 przez reaktywny Nałogowiec (40,650 p.)
Ale API jest płatne, a koledze chodzi, żeby sobie z YT zrobić darmowy hosting do plików video na swoją stronę :)

Podobne pytania

0 głosów
1 odpowiedź 203 wizyt
pytanie zadane 25 maja 2020 w C i C++ przez Majster6918 Gaduła (4,030 p.)
0 głosów
1 odpowiedź 186 wizyt
pytanie zadane 18 listopada 2018 w Systemy operacyjne, programy przez Jackob Obywatel (1,430 p.)
0 głosów
1 odpowiedź 644 wizyt
pytanie zadane 24 grudnia 2019 w HTML i CSS przez Sp4rq Użytkownik (790 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...