Embed multiple YouTube videos on a single DW webpage

Forum|Forum|8 years ago
March 28, 2017
3 replies
4967 views

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

This topic has been closed for replies.

Correct answer BenPleysier

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.

rachelep3081213Author

Participant

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

rachelep3081213Author

Participant

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

BenPleysier

Correct answer

Community Expert

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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

mywebvisage

Participant

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.

BenPleysier

Community Expert

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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded