Embedded YT Video Won't Center

HTML-CSS
1

I really need help with this video code.
This is my first project, so it’s limited to HTML and CSS.

As it is at the moment, everything seems perfect except for the darn video.
On desktop, it’s aligned left. On mobile, it’s the same and also very small.
Fortunately, it’s responsive and looks great otherwise.

I realize the code is not correct, but every time I change the code, something else goes wrong.
After reading another topic similar to this, I applied this code…


.video-responsive {
  text-align: center;
}

@media (max-width: 560px) {
  .video-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
  }
  .video-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
  }
}

I’ve tried replacing the video class and the iframe class with this code. Both made it worse than it is now.

I put it away late last night, hoping to see the issue with a clear mind today, but I’m still not seeing it. I’ve gone back through the lessons, searched the forum, and online resources.

What am I missing/doing wrong?

Thanks in advance Campers…
Tonia

2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

Note: Backticks are not single quotes.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

3

In your iframe you want change the position to relative and then use margin: auto 0;.

You’ll then need to resize it.

4

Thank you, @ArielLeslie. I wasn’t aware of that.

5

THank you, @Tirjasdyn I’ll give that a try.

6

…
css

#howitworks {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
margin-top: 400px;
}

…

try this solution, it worked with me