How do I maintain that my youtube video is centered while it is responsive

HTML-CSS
1

So I have made a youtube video and embedded it on my website and centered it with display: block; margin: auto; but when I apply responsiveness the video losses its centered position. So I want to know how to keep it centered at all times.

HTML AND CSS

HTML

 <div class="video-container">
              <iframe width="727" height="409" src="https://www.youtube.com/embed/YwUNFRGU3q8" title="Reality and Expectation  - What You See And What You Expect To See - Planets" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" style="display: block; margin: auto;" allowfullscreen></iframe>
            </div>

CSS

.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: 80%; 
    height: 80%; 
}
2

I was able to get it to work by adding another div around the .video-container and setting its width to 100%, margin to 0 auto and its max-width to whatever you want the max width of the video to be.

Then I had to make one more change to get it centered perfectly. I don’t want to spoil all the fun for you, but I’ll give you a hint. It’s a change to the existing CSS on the iframe. Two changes actually. Both the same. I’ll ask you this. Why would you only want it to take up 80% of the available space?

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.