Embed multiple YouTube videos on a single DW webpage

Report · Mar 27, 2017

I've pasted the embed text code for 10-12 YouTube videos into the code of my Dreamweaver page, but only the first video appears. How do I get the page to show all 10? Thanks

Report · Mar 27, 2017

Have a look at View BunchOBlokes Videos. This is a page that has been made using Bootstrap. If that is what you want, please let me know and I will return with the full code.

Wappler, the only real Dreamweaver alternative.

Report · Mar 27, 2017

Thanks BenPleysier for the quick reply! BunchOBlokes format could work. I thought there would be a way to simply have a string of YouTube videos on the page (using the YouTube embed code, and toggling between design and code viewing in Dreamweaver). This is my music website....

Do I have to add a 3rd party plug-in to make them display properly, or is it possible to display the videos simply with YouTube and Dreamweaver?

Thanks

Report · Mar 27, 2017

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.

Wappler, the only real Dreamweaver alternative.

Report · Aug 18, 2018

Bravo!!! Finally, someone understands what I was looking for today. Excellent application and delivery. Responsive and easy to follow. And, I love the site. Did you build it? Very nice. Great concept. I will be referring some of my men's groups there. Hope you don't mind. I signed up though I'm in Texas. Well done to whoever build and designed.

Report · Aug 18, 2018

Thank you for your kind remarks. The website was created by me after an idea from Warren, expanded upon by David, illustrated (designed) by Brett and financed by Phil (no pun intended as in philanthropist)

Wappler, the only real Dreamweaver alternative.

Report · Mar 27, 2017

Wow, thanks for all the code! I'll see how it works out.

Adobe Community

Embed multiple YouTube videos on a single DW webpage

1 Correct answer