Как создать кнопку, которая воспроизводит видео YouTube в HTML? - PullRequest
Новая
       31

Как создать кнопку, которая воспроизводит видео YouTube в HTML?

0 голосов
/ 03 декабря 2018

У меня есть следующий код.Моя кнопка работает нормально, однако я не могу понять, как заставить эту функцию работать.

Моя цель - создать кнопку, которая при нажатии открывает iframe для видео на YouTube / делает его видимым. 

<body>

<div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
<div class="w3-display-middle">
<h1 class="w3-jumbo w3-animate-top">TAKE YOUR MARK</h1>
<hr class="w3-border-grey" style="margin:auto;width:40%">
  <p><button class="w3-center center transparent_btn" 
onclick="play1()">go</button></p>
  </div>
</div>
</body>

<script>
function play1() { 
    <iframe width="560" height="315" src="https://www.youtube.com/embed/AkFs3YzxN_E" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  }

Ответы [ 2 ]

0 голосов
/ 03 декабря 2018

У вас должен быть элемент, в который можно вставить iframe. 

<body>

<div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
<div class="w3-display-middle">
<h1 class="w3-jumbo w3-animate-top">TAKE YOUR MARK</h1>
<hr class="w3-border-grey" style="margin:auto;width:40%">
  <p><button class="w3-center center transparent_btn" 
onclick="play1()">go</button></p>
  <div id="youtube-frame"></div>
  </div>
</div>
</body>

<script>
function play1() { 
    var frame = document.getElementById("youtube-frame");
    frame.innerHTML += "<iframe width='560' height='315' src='https://www.youtube.com/embed/AkFs3YzxN_E' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>";
  }
</script>
0 голосов
/ 03 декабря 2018

Хотя youtube предлагает API для управления плеером, но я сделаю все просто.Во-первых, добавьте div внутри своего тела и присвойте ему идентификатор по вашему выбору.Ваша функция play1 () должна быть такой: 

    function play1(){
      var player = '<iframe width="560" height="315" 
      src="https://www.youtube.com/embed/AkFs3YzxN_E" frameborder="0" 
      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in- 
      picture" allowfullscreen></iframe>';
      document.getElementById('ID').innerHtml = player;
    }
...