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

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.



 <div class="video-container">
              <iframe width="727" height="409" src="" 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>


.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%; 

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?

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