Как встроить видео на YouTube в качестве заголовка с автовоспроизведением, циклом и скрытием просмотра, публикации, логотипа YouTube и заголовка видео? - PullRequest
Новая
       34

Как встроить видео на YouTube в качестве заголовка с автовоспроизведением, циклом и скрытием просмотра, публикации, логотипа YouTube и заголовка видео?

0 голосов
/ 16 января 2019

Я пытаюсь создать заголовок видео, используя видео с YouTube. я возникают проблемы с сокрытием логотипа Youtube в правом нижнем углу, часы позже и поделитесь ссылками в правом верхнем углу, а заголовок видео вверху левый угол. Я был успешным в создании автозапуска и петли. у меня тоже есть текст поверх видео. Какие-либо предложения? 

    Here is my current code:

    <!-- HTML -->
    <div class="embed-responsive embed-responsive-16by9" id="holder">

    <iframe class="frame" width="560" height="315" 
    src="https://www.youtube.com/embed/4hIZUCKsio0?rel=0&amp; 
    controls=0&amp;showinfo=0;autoplay=1&mute=1&loop=1&playlist=4hIZUCKsio 
    0" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; 
    picture- 
    in-picture" allowfullscreen></iframe>


   <div class="bar">
   <div class="container">
   <div class="row justify-content-start">
     <div class="col-sm-8">
        <h1>Hey there! My name is John.<br>
         I'm a Web Developer.</h1>
         <h4>My hobbies include HTML5, CSS3, Javascript, jQuery, and Bootstrap 4. 
    </h4>
       </div>

     </div>        
   </div>
   </div>
   </div>

   <!-- CSS -->
   .bar{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:80px;
    margin-top: 200px;
    margin-left: 150px;
    }

1 Ответ

0 голосов
/ 19 января 2019

Чтобы скрыть логотип YouTube, вы можете добавить параметр modestbranding и установить значение 1 .

Из параметров проигрывателя шоу, найденных на демо-сайте Youtube Player :

  • modestbranding: запретить отображение логотипа YouTube на панели управления. Текстовая метка YouTube или водяной знак по-прежнему отображается, когда указатель мыши пользователя находится над плеером .

Подсвеченный текст вызывает у меня мысль:

  • Чтобы пользователь не видел элементы, которые нужно скрыть, вы можете добавить стиль CSS для предотвращения эффекта наведения в iframe - фактически, предотвратить эффект наведения в div, который содержит iframe .

Я использовал код, добавленный в этом ответе " CSS, отключить эффект наведения " для добавления встроенного стиля 1 в div, который содержит ваш iframe.

Итак, результат выглядит следующим образом: 

<!-- HTML -->
<div class="embed-responsive embed-responsive-16by9" id="holder" style="pointer-events: none;">
   <iframe class="frame" width="560" height="315" 
      src="https://www.youtube.com/embed/4hIZUCKsio0?rel=0&amp; 
      controls=0&amp;showinfo=0;autoplay=1&mute=1&loop=1&playlist=4hIZUCKsio 
      0" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; 
      picture- 
      in-picture" allowfullscreen></iframe>
</div>

Единственным недостатком этого решения является то, что (при первом воспроизведении видео) , логотип YouTube, ссылка для общего доступа, заголовок видео и будут отображаться в течение 2-3 секунд, прежде чем автоматически спрятаться.

1 Вы должны фактически установить стиль как часть ваших решений CSS.

...