CODEWITHSUNDEEP
htmlcsstwitter-bootstrapiframe
Turnipdabeets
Turnipdabeets

Reputation: 6005

iframe center in bootstrap

I'm having difficulty getting this iframe (youtube video) to center. I'm using bootstrap and here's my code:

<div class="su-youtube su-responsive-media-yes"><iframe
    width="400"
    height="320"
    src="http://www.youtube.com/embed/SGOc9P4Ynm?modestbranding=1&controls=0&iv_load_policy=3&rel=0&showinfo=0&color=white"
    frameborder="0"></iframe> </div>

I've tried adding the class "center-block" and "text-center" too and also tried removing the iframe from the div. Any ideas?

Upvotes: 0

Views: 8666

Answers (3)

Hashim Aziz
Hashim Aziz

Reputation: 6102

For anyone using Bootstrap 5+, this is done by adding mx-auto to the outermost div:

<div class="row mx-auto"> /* For centering the embed/iframe */
  <div class="ratio ratio-16x9"> /* For making the embed/iframe responsive */
    <iframe width="100%" height="100%" src="<INSERT-YOUTUBE-LINK>" ...></iframe>
  </div>
</div>

Upvotes: 0

Razvy Razvan
Razvy Razvan

Reputation: 1

This has just worked for me. Bootstrap4

    <div class="container text-center"> 

<iframe class="embed-responsive-item" src="<Your youtube video>" allowfullscreen width="50%" height="300px" style="border-radius:20px;background:#ffffff;padding:5px;"></iframe> 

</div>

Upvotes: 0

max
max

Reputation: 8667

CSS:

.su-youtube {
  margin: 0 auto;
  display: block;
}

CODEPEN EXAMPLE

Upvotes: 4

Related Questions