<div class="container">
      <h1>Bootstrap Carousel Sample</h1>
      <div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="false">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="d-block w-100" src="https://cdn.rawgit.com/KimSarabia/bootstrap-carousel-sample/a1eee04b/slide-3.jpg" alt="First slide">
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="https://cdn.rawgit.com/KimSarabia/bootstrap-carousel-sample/a1eee04b/slide-2.jpg" alt="Second slide">
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="https://cdn.rawgit.com/KimSarabia/bootstrap-carousel-sample/a1eee04b/slide-1.jpg" alt="Third slide">
          </div>
          <div class="carousel-item">
            <div class="carousel-video-inner">
              <div id="video-player" data-video-id="0vrdgDdPApQ"></div>
            </div>
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
body {
  background-color: #242424;
}

h1 {
  color: white;
  text-align: center;
}

.carousel-video-inner {
  text-align: center;
}
$(function() {
  $(".carousel").on("slide.bs.carousel", function(e) {
    var prev = $(this)
      .find(".active")
      .index();
    var next = $(e.relatedTarget).index();
    var video = $("#video-player")[0];
    var videoSlide = $("#video-player")
      .closest(".carousel-item")
      .index();
    if (next === videoSlide) {
      if (video.tagName == "IFRAME") {
        player.playVideo();
      } else {
        createVideo(video);
      }
    } else {
      if (typeof player !== "undefined") {
        player.pauseVideo();
      }
    }
  });
});

function createVideo(video) {
  var youtubeScriptId = "youtube-api";
  var youtubeScript = document.getElementById(youtubeScriptId);
  var videoId = video.getAttribute("data-video-id");

  if (youtubeScript === null) {
    var tag = document.createElement("script");
    var firstScript = document.getElementsByTagName("script")[0];

    tag.src = "https://www.youtube.com/iframe_api";
    tag.id = youtubeScriptId;
    firstScript.parentNode.insertBefore(tag, firstScript);
  }

  window.onYouTubeIframeAPIReady = function() {
    window.player = new window.YT.Player(video, {
      videoId: videoId,
      playerVars: {
        autoplay: 1,
        modestbranding: 1,
        rel: 0
      }
    });
  };
}

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css

External JavaScript

  1. https://code.jquery.com/jquery-3.2.1.slim.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js
  3. https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js