• 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

Object Storage Arubacloud
0 głosów
260 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 (254,490 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 (41,090 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 (254,490 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 (41,090 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ź 216 wizyt
pytanie zadane 25 maja 2020 w C i C++ przez Majster6918 Gaduła (4,030 p.)
0 głosów
1 odpowiedź 194 wizyt
pytanie zadane 18 listopada 2018 w Systemy operacyjne, programy przez Jackob Obywatel (1,430 p.)
0 głosów
1 odpowiedź 657 wizyt
pytanie zadane 24 grudnia 2019 w HTML i CSS przez Sp4rq Użytkownik (790 p.)

92,654 zapytań

141,543 odpowiedzi

319,954 komentarzy

62,022 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

...