0

I'm trying to centrally align my responsive, embedded youtube videos and display them properly between the head and footer navigations. At the moment it will not display all 3 of the videos and they won't align properly. To see the whole entire code please visit this link: my website video page

Here is the main video coding I have tried:

.video-container {
 position:relative;
 padding-bottom:56.25%;
 padding-top:30px;
 height:0;
 overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
  position:absolute;
  top:0;
  left:0;
  width:29.24%;
  height:auto;
}
<center>
  <strong><br />
  <p></p>
  <div class="video-container"><iframe width="560" height="315"         
       src="https://www.youtube.com/embed/iydTzl6adLs" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
  <p></p>
  <div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/fjZ5ZLWbu50" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
  <p></p>
  <div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/d8JOqV3Ql-w" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
  <p></p>
   </strong></center>
Griff
  • 1
  • 2
  • Maybe this will help you out: https://stackoverflow.com/questions/8366957/how-to-center-an-iframe-horizontally and you're not closing the `strong`-tag. – JeroenE Nov 02 '18 at 13:58
  • I tried adding "display:block" to the CSS code and it didn't change anything. Can you suggest anything else? – Griff Nov 02 '18 at 14:05

1 Answers1

1

you need to assign css property for the video containers.

.video-container {
  width: 500px;
  margin: auto;
  text-align: center;
  position: relative;
}
.video-container iframe, .video-container object, .video-container embed {
  position: absolute;
  top: 100px;
  left: 0;
  width: 100%;
  height: auto;
  margin: auto;
}
<center>
  <strong><br />
  <p></p>
  <div class="video-container"><iframe width="560" height="315"         
       src="https://www.youtube.com/embed/iydTzl6adLs" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
  <p></p>
  <div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/fjZ5ZLWbu50" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
  <p></p>
  <div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/d8JOqV3Ql-w" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
  <p></p>
   </strong>
   
</center>
Varsha Dhadge
  • 1,711
  • 14
  • 23
Yashwant Munda
  • 41
  • 1
  • 4
  • Tried the suggested CSS code and one video displayed at 100% width ( the video at the bottom of the code ) but it didn't displaty the whole height of the video. – Griff Nov 02 '18 at 14:27
  • Use height: 100% instead of height:auto, It will work – Yashwant Munda Nov 02 '18 at 14:30
  • don't worry. I just figured out a way to get it all working. – Griff Nov 02 '18 at 14:50
  • in that case, please respond with the answer yourself or delete qour question... please do not leave questions open on SO – Harry Nov 02 '18 at 20:04