Youtube

by mrwadepro

HTML

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

       <div class="container-fluid">
        <div id="video-carousel-example" class="carousel slide carousel-fade" data-ride="carousel">
          <!--Indicators-->
          <ol class="carousel-indicators">
            <li data-target="#video-carousel-example" data-slide-to="0" class="active"></li>
            <li data-target="#video-carousel-example" data-slide-to="1"></li>
            <li data-target="#video-carousel-example" data-slide-to="2"></li>
          </ol>
          <!--/.Indicators-->
          <!--Slides-->
          <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
              <iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/fpnYwrlvsYo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            </div>
            <div class="carousel-item">
              <iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/fpnYwrlvsYo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            </div>
            <div class="carousel-item">
              <iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/fpnYwrlvsYo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            </div>
          </div>
          <!--/.Slides-->
          <!--Controls-->
          <a class="carousel-control-prev" href="#video-carousel-example" role="button" data-slide="prev" onclick="stopVideo();">
        <span class="carousel-control-prev-icon"...

JavaScript

// 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);
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
          }
        });
      }
      function stopVideo() {
        player.stopVideo();
      }