Hi I am trying to center the iframe for a Youtube video in Twitter Boostrap 3, currently it is left aligned.
I have used the following html:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item"
src="http://www.youtube.com/embed/zpOULjyy-n8?rel=0"
align="center" id="videothumbnail"></iframe>
</div>
CSS:
#videothumbnail{
height: 50%;
width: 50%;
float: center;}
Use classes col-xs-12 text-center. You don't need float:center;
So change this:
<div class="embed-responsive embed-responsive-16by9">
to
<div class="embed-responsive embed-responsive-16by9 col-xs-12 text-center">
I was able to center my embed-responsive by bordering it with smaller grids like so:
<div class='row'>
<div class='col-sm-2'></div>
<div class='col-sm-8'>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="https://www.youtube.com/embed/Qt7DFLovvD8?modestbranding=1&showinfo=0" allowfullscreen></iframe>
</div>
</div>
<div class='col-sm-2'></div>
</div>
Just add center tags
<center>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" id="videothumbnail" src="http://www.youtube.com/embed/zpOULjyy-n8?rel=0" align="center"></iframe>
</div>
</center>
If working with Bootstrap 4 you could use offset.
<div class="col-sm-8 offset-md-2 embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="750" height="415" src="https://www.youtube.com/embed/{your-video}" frameborder="0" gesture="media" allowfullscreen>
</iframe>
</div>
This limites the embed to 8 columns and keeps 2 columns either side of it blank (totalling 12).
wrap the iframe with h(1-2-3...)
<h4 class="text-center"> <iframe ....> </iframe> </h4>
<div class='row text-center'>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="https://www.youtube.com/embed/Qt7DFLovvD8?modestbranding=1&showinfo=0" allowfullscreen>
</iframe>
</div>
</div>
Related
I have read many post and tried everything to make the iframe responsive and keeping the 16-9 ratio... it is not bad but the video is still cropped in the youtube frame.
What is the trick with bootstrap 5?
<div class="embed-responsive embed-responsive-16by9" style="width:800px; height:450px">
<iframe class="embed-responsive" title="YouTube video player" src="{{ $image['image']['url'] }}" frameborder="0" allowfullscreen="" width="100%" height="100%"></iframe>
</div>
Was having the same problem, documentation on the bootstrap site says this:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" title="YouTube video player" src="https://www.youtube.com/watch?v=jNQXAC9IVRw" allowfullscreen=""></iframe>
</div>
But this doesn't work, height was being ignored.
I found a solution on MD Bootstrap docs:
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/vlDzYIIOYmM" title="YouTube video" allowfullscreen></iframe>
</div>
MD Bootstrap: Embeds
Works perfect for me on BS5 if you add height & width
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/vlDzYIIOYmM" title="YouTube video" style="max-width: 100%;height: 100%;" allowfullscreen></iframe>
</div>
This information can also be found in the bootstrap 5 documentation:
https://getbootstrap.com/docs/5.0/helpers/ratio/
https://getbootstrap.com/docs/5.0/migration/
This soluction was the only worked at all in bootstrap 5:
<div class="col-12 col-md-8 offset-md-2 col-lg-8 offset-lg-2">
<div class="ratio ratio-16x9 text-center mt-4 mb-4 ">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/DTpvdyzxQWE?controls=0" style="max-width: 100%;height: 100%;" allowfullscreen></iframe>
</div>
</div>
This version should work.
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" title="YouTube video player" src="https://www.youtube.com/watch?v=jNQXAC9IVRw" allowfullscreen=""></iframe>
</div>
Don't ask me why but during some testing adding older bootstrap css did the trick for me while using the bootstrap format as posted by Jnic:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
Trying to embed video + chatroom. If I use 100% width, the chatroom displays at only ~1/4 size. I want chatroom to match exact height of the 16x9 player.
I tried to use matchHeight js but was unable to get that to work, even with no errors in console.
Thank you for looking.
<body>
<?php include_once("../../files/bootstrap-header.php"); ?>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 text-center"></div>
<div class="col-xs-12 col-sm-9">
<div class="embed-responsive embed-responsive-16by9">
<iframe allowfullscreen class="embed-responsive-item" frameborder="0" height="100%" scrolling="no" src="http://player.twitch.tv/?channel=agentcodydanks69" width="100%"></iframe>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="hidden-md">
<iframe width="100%" height="100%" src="https://www.twitch.tv/embed/runitup/chat" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
Have you inspected each element to see if there's padding around one of them? May have to set the height for the row to be the height of the smaller element.
The best way would be to use css flexbox
.equal--height {
display: flex;
}
.iframe {
background: red;
}
<div class="equal--height">
<div class="iframe">
<p>We've the same height</p>
</div>
<div class="iframe">
<p>We've the same height</p>
<p>Even if i have more text</p>
</div>
</div>
Working with https://codepen.io/malditojavi/pen/BZGVoq - I'm trying to get rid of the padding-bottom extra space created by the responsive helper class from Bootstrap.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-md-6 embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" style="height: 50%;" src="https://player.vimeo.com/video/195372563" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="col-md-6">
<h2>Title</h2>
<p>And some text</p>
</div>
</div>
<div class="row">
<div class="col-md-6 embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" style="height: 50%;" src="https://player.vimeo.com/video/195372563" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="col-md-6">
<h2>Title</h2>
<p>And some text</p>
</div>
</div>
</div>
Notice I added some extra styling code in the iframe lines style="height: 50%;" so I can get rid of the extra black space created by Vimeo.
Try this link to embed videos responsively
embed responsively
Try this
HTML
<div class="container">
<div class="row videorow">
<div class="col-md-6">
<div class='embed-container'><iframe src='http://player.vimeo.com/video/195372563' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
</div>
<div class="col-md-6">
<h2>Title</h2>
<p>And some text</p>
</div>
</div>
<div class="row videorow">
<div class="col-md-6">
<div class='embed-container'><iframe src='http://player.vimeo.com/video/195372563' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
</div>
<div class="col-md-6">
<h2>Title</h2>
<p>And some text</p>
</div>
</div>
</div>
CSS
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.videorow{
margin:10px auto;
}
Link for reference
Hope this helps...
I have the below code for responsive YouTube video but it does not display at all. When I remove the classes, the video displays but its width is very short. Here is the site that hosts it.
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="<?php echo get_field( "youtube_video" );?>" frameborder="0" allowfullscreen></iframe>
<div class="more-videos">
<button type="button" class="btn btn-warning">View More Videos From Matt</button>
</div>
</div>
HTML as displayed on the site,
<div class="row">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://www.youtube.com/v/lQ2EZdkLCfc&version=3&loop=1&playlist=gq_zxxutiok,GEuouxgqa3Q,iwiXhnjlRuw" frameborder="0" allowfullscreen></iframe>
<div class="more-videos">
<button type="button" class="btn btn-warning">View More Videos From Matt</button>
</div>
</div>
</div>
The Youtube URL is wrong. Replaced v with embed in the URL and replaced your first & with a ? to denote the start of query strings.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<div class="row">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://www.youtube.com/embed/lQ2EZdkLCfc?version=3&loop=1&playlist=gq_zxxutiok,GEuouxgqa3Q,iwiXhnjlRuw" frameborder="0" allowfullscreen></iframe>
<div class="more-videos">
<button type="button" class="btn btn-warning">View More Videos From Matt</button>
</div>
</div>
</div>
Here is my webpage.
http://ownscene.com/index-en.html
The problem is with the embed video in 2nd section.
Here is the code
<!-- present -->
<section class="no-padding bg-primary">
<div>
<div class="row">
<div style="color: #fff;" class="col-lg-2"></div>
<div class="col-lg-8 col-md-12 wow fadeIn" >
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/HLKPZ-vFYqI"></iframe>
</div>
</div>
<div style="color: #fff;" class="col-lg-2"></div>
</div>
</section>
<!-- present -->
I tried removing both left and right div and weird blank space is gone.
I don't know what to do, I want it to be centered and smaller on lg then take full space in md
Please help
Thank you,
Try using col-lg-offset
<div class="container-fluid">
<div class="col-lg-8 col-md-12 col-lg-offset-2 col-md-offset-0 wow fadeIn" >
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/HLKPZ-vFYqI"></iframe>
</div>
</div>
</div>
Remove the border using CSS since iframe has default border
<iframe style="border: 0 none" class="embed-responsive-item" src="//www.youtube.com/embed/HLKPZ-vFYqI"></iframe>