CODEWITHSUNDEEP
htmlcssvideoyoutubeembed
Griff
Griff

Reputation: 1

How do I display and centre align my responsive youtube videos properly?

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>

Upvotes: 0

Views: 875

Answers (1)

Yashwant Munda
Yashwant Munda

Reputation: 41

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>

Upvotes: 1

Related Questions