Embed multiple YouTube videos on a single DW webpage

As I stated, this is based on Bootstrap. If you copy and paste the following code into a new document, you will be able to view the result in your favourite browser.

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
  <defs>
  <symbol id="icon-video" viewBox="0 0 1024 721" aria-labeledby="title">
  <title>YouTube Play Button</title>
  <path class="button" d="M1023.6,361.5c0,24.5,0.9,49-0.2,73.5c-1.7,36.6-4.7,73.1-7.3,109.6c-2,28.9-8.5,56.9-19.3,83.8 c-18.2,45.4-52.8,70.6-100,78.3c-23.1,3.8-46.7,4.9-70.1,6.1c-41.1,2.1-82.2,3.5-123.3,5c-22.1,0.8-44.3,1.1-66.4,1.5 c-42.3,0.6-84.6,1.5-126.9,1.3c-46.1-0.1-92.3-1-138.4-1.9c-36.6-0.7-73.2-1.6-109.9-3c-30.8-1.2-61.6-2.4-92.2-5 c-19-1.6-38.1-4.6-56.6-9.3c-43-11.1-71.6-38.4-86-80.7c-8.9-26-14.7-52.5-16.6-79.9c-2.5-35.4-5.8-70.7-6.7-106.1 C2.5,389.7,2.8,344.9,3.3,300c0.5-48,4-95.8,10.1-143.4c3.3-25.8,10.5-50.9,22.3-74.2c18.4-36.2,48.9-57,87.9-65 c17.2-3.5,34.9-4.9,52.5-5.9c38.2-2.2,76.5-3.9,114.7-5.2c32.9-1.2,65.9-1.7,98.9-2.3c25.6-0.5,51.3-0.8,76.9-1  c24.3-0.2,48.6-0.5,73-0.5c30.3,0.1,60.6,0.5,90.9,1c28.6,0.5,57.3,1,85.9,2c44.6,1.7,89.2,3.5,133.7,5.9 c21.2,1.1,42.7,2.1,63.2,8.2c44.1,13.2,73,41.9,87.5,85.7c8.8,26.7,14.1,54,15.9,82c2.2,34.2,5,68.4,6.5,102.7 C1024.5,313.8,1023.7,337.6,1023.6,361.5C1023.6,361.5,1023.6,361.5,1023.6,361.5z M408.2,494c92.1-47.8,183.5-95.1,275.9-143 c-92.5-48.3-183.9-96-275.9-144C408.2,303,408.2,397.9,408.2,494z"/>
  <path class="image" d="M408.2,494c0-96.1,0-191,0-287c92,48,183.4,95.7,275.9,144C591.6,398.9,500.3,446.3,408.2,494z"/>
  </symbol>
  </defs>
</svg>
<style>
.gallery-item {
    display: inline-block;
    position: relative;
}
svg.btn-youtube {
  display: block;
  position: absolute;
  top: 50% ;
  left: 50% ;
  margin-left: -28px;
  margin-top: -20px;
  z-index: 840;
  fill: #21427B;
  fill-opacity: 0.85;
  color: white;
  width: 55px;
  height: 40px;
}
svg.btn-youtube:hover {
  fill: #CC181E;
  fill-opacity: 1;
}
svg .image {
  fill: currentColor;
}
</style>
</head>
<body>
<main class="container">
  <div class="row">
  <div class="col-md-10 col-md-offset-1">
  <div class="row">
  <div class="col-md-6 text-center ">
  <div class="panel panel-primary">
  <div class="panel-heading">
  <h2 class="panel-title">Everyone Was Laughing At Her...</h2>
  </div>
  <div class="panel-body">
  <div class="row">
  <div class="col-md-6">
  <div class="gallery-item">
  <a href="https://www.youtube.com/watch?v=MY5q_9xxjFA">
  <img src="https://i.ytimg.com/vi/MY5q_9xxjFA/mqdefault.jpg" class="img-responsive">
  <svg class="btn-youtube"><use xlink:href="#icon-video"></use></svg>
  </a>
  </div> 
  </div>
  <div class="col-md-6">
  <p>Everyone Was Laughing At Her But Then Watch What Happens Next...</p>
  </div>
  </div>
  </div>
  </div>
  </div>
  <div class="col-md-6 text-center">
  <div class="panel panel-primary">
  <div class="panel-heading">
  <h2 class="panel-title">Watch This! He Took Amanda's BRA!!!</h2>
  </div>
  <div class="panel-body">
  <div class="row">
  <div class="col-md-6">
  <div class="gallery-item">
  <a href="https://www.youtube.com/watch?v=7v871hssdDk">
  <img src="https://i.ytimg.com/vi/7v871hssdDk/mqdefault.jpg" class="img-responsive">
  <svg class="btn-youtube"><use xlink:href="#icon-video"></use></svg>
  </a>
  </div>
  </div> 
  <div class="col-md-6">
  <p>Published on Feb 3, 2017 Christian Lee Took Amanda's Bra<br>Britain's Got Talent Audition</p>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
</main>
<div class="modal fade" id="mediaModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
  <div class="modal-content">
  <div class="modal-body"> </div>
  </div>
  </div>
</div>
<script>
jQuery(document).ready(function ($) {
  
// jQuery Query Parser
(function ($) {
  // encapsulate variables that need only be defined once
  var pl = /\+/g, // Regex for replacing addition symbol with a space
  searchStrict = /([^&=]+)=+([^&]*)/g,
  searchTolerant = /([^&=]+)=?([^&]*)/g,
  decode = function (s) {
  return decodeURIComponent(s.replace(pl, " "));
  };
  // parses a query string. by default, will only match good k/v pairs.
  // if the tolerant option is truthy, then it will also set keys without values to ''
  $.parseQuery = function(query, options) {
  var match,
  o = {},
  opts = options || {},
  search = opts.tolerant ? searchTolerant : searchStrict;
  if ('?' === query.substring(0, 1)) {
  query = query.substring(1);
  }
  // each match is a query parameter, add them to the object
  while (match = search.exec(query)) {
  o[decode(match[1])] = decode(match[2]);
  }
  return o;
  }
  // parse this URLs query string
  $.getQuery = function(options) {
  return $.parseQuery(window.location.search, options);
  }
  $.fn.parseQuery = function (options) {
  return $.parseQuery($(this).serialize(), options);
  };
  }(jQuery));
  // BOOTSTRAP 3.0 - Open YouTube Video Dynamicaly in Modal Window
  // Modal Window for dynamically opening videos
  $('a[href^="https://www.youtube.com"]').on('click', function (e) {
  // Store the query string variables and values
  // Uses "jQuery Query Parser" plugin, to allow for various URL formats (could have extra parameters)
  var queryString = $(this).attr('href').slice($(this).attr('href').indexOf('?') + 1);
  var queryVars = $.parseQuery(queryString);
  // Remove sticky hover evenet
  var el = this;
  var par = el.parentNode;
  var next = el.nextSibling;
  par.removeChild(el);
  setTimeout(function() {par.insertBefore(el, next);}, 0)
  // if GET variable "v" exists. This is the Youtube Video ID
  if ('v' in queryVars) {
  // Prevent opening of external page
  e.preventDefault();
  // Calculate default iFrame embed size based on current window size
  // (these will only be used if data attributes are not specified)
  if ($(window).height() < $(window).width()) {
  var vidHeight = $(window).height() * 0.7;
  var vidWidth = vidHeight * 1.77777;
  } else {
  var vidWidth = $(window).width() * 0.9;
  var vidHeight = vidWidth / 1.77777;
  }
  if ($(this).attr('data-width')) {
  vidWidth = parseInt($(this).attr('data-width'));
  }
  if ($(this).attr('data-height')) {
  vidHeight = parseInt($(this).attr('data-height'));
  }
  var iFrameCode = '<iframe width="' + vidWidth + '" height="' + vidHeight + '" scrolling="no" allowtransparency="true" allowfullscreen="true" src="https://www.youtube.com/embed/' + queryVars['v'] + '?autoplay=1&rel=0&wmode=transparent&showinfo=0" frameborder="0"></iframe>';
  // Replace Modal HTML with iFrame Embed
  $('#mediaModal .modal-body').html(iFrameCode);
  // Set new width of modal window, based on dynamic video content
  $('#mediaModal').on('show.bs.modal', function () {
  // Add video width to left and right padding, to get new width of modal window
  var modalBody = $(this).find('.modal-body');
  var modalDialog = $(this).find('.modal-dialog');
  var newModalWidth = vidWidth + parseInt(modalBody.css("padding-left")) + parseInt(modalBody.css("padding-right"));
  newModalWidth += parseInt(modalDialog.css("padding-left")) + parseInt(modalDialog.css("padding-right"));
  newModalWidth += 'px';
  // Set width of modal (Bootstrap 3.0)
  $(this).find('.modal-dialog').css('width', newModalWidth);
  });
  // Open Modal
  $('#mediaModal').modal();
  }
  });
  // Clear modal contents on close.
  // There was mention of videos that kept playing in the background.
  $('#mediaModal').on('hidden.bs.modal', function () {
  $('#mediaModal .modal-body').html('');
  });
});
</script>
</body>
</html>

After that, if you have any questions, please come back here.