<div class="ratio ratio-4x3 justify-content-center align-items-center mx-auto">
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100085514265694&tabs=timeline&width=500&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
scrolling="no" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>
I'm using bootstrap 5. When I use "ratio" the iframe aligns to the right. How can I use "ratio" and still align this ifram in the center?
Probably going to be yelled at for suggesting this because HTML5 has deprecated it, but the <center> tag works well for this scenario.
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<center>
<iframe align="center" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100085514265694&tabs=timeline&width=500&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
scrolling="no" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</center>
Another way is to use style="display: flex; justify-content: center;" for the outer div element
<div class="ratio ratio-4x3 justify-content-center align-items-center mx-auto" style="display: flex; justify-content: center;">
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100085514265694&tabs=timeline&width=500&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
scrolling="no" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" ></iframe>
</div>
You need to move your flex related classes to a div above, so that the div that is controlled by the ratio width & heights can be centered:
<div class="flex justify-center items-center w-full">
<div class="ratio ratio-4x3 mx-auto">
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100085514265694&tabs=timeline&width=500&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
scrolling="no" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>
</div>
PS. I used Tailwind classes, just convert them to bootstrap 5 classes - I'm not sure what those are - probably just more verbatim: justify-content-center align-items-center
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">
As title says, I've embeded a youtube video on my page, upon resizing the page, while the rest of the content is reponsive and adapts, the youtube frame doesn't, overflows and blocks other content from the site.
I want to make it responsive if possible, but mainly I just want to make it so nothing can block the content and add some kind of divider.
Really new at bootstrap/html/css so I apologise if this is a really easy to fix problem and I'm just dumb, any and all help apreciated, thanks.
Video of the issue: https://puu.sh/CsDP4/c5f221c22e.mp4
Code:
<div class="bg container-fluid text-center" id="GFX">
<div class="text-center title">
<h1>GFX</h1>
</div>
<hr/>
<div class="container-fluid overflow-hidden">
<iframe src="https://albumizr.com/a/TO-n" scrolling="yes" frameborder="0" allowfullscreen width="700" height="700"></iframe>
</div>
<hr/>
</div>
<hr>
<div class="bg embed-responsive-16by9 text-center" id="Video">
<div class="text-center title">
<h1>Video Editing</h1>
</div>
<hr/>
<div class="container-fluid overflow-hidden">
<iframe class="text-center embed-responsive-item " width="1280" height="720" src="https://www.youtube-nocookie.com/embed/videoseries?list=PLwf6BHzjcncmOoDkyKM8PNAnYhRHkbXub" frameborder="0" autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<hr/>
</div>
<hr/>
<br>
<div class="bg container-fluid text-center" id="Music">
<div class="text-center title">
<h1>Music Production</h1>
</div>
<hr/>
<div class="container-fluid overflow-hidden">
<iframe class="text-center" width="100%" height="auto" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/677510388%3Fsecret_token%3Ds-q8lC3&color=%230d58e7&auto_play=false&hide_related=false&show_comments=false&show_user=true&show_reposts=false&show_teaser=true"></iframe>
</div>
<hr/>
</div>
<hr/>
Iframe element's inner content does not resize when you resize your main page window, that's just how iframe works. To resize iframe content dynamically, you can check solution that was already given here: How to set iframe size dynamically (it involves some use of javascript).
you can use max-width in iframe so it be responsive.
iframe {
max-width: 100%
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="bg container-fluid text-center" id="GFX">
<div class="text-center title">
<h1>GFX</h1>
</div>
<hr/>
<div class="container-fluid overflow-hidden">
<iframe src="https://albumizr.com/a/TO-n" scrolling="yes" frameborder="0" allowfullscreen width="700" height="700"></iframe>
</div>
<hr/>
</div>
<hr>
<div class="bg embed-responsive-16by9 text-center" id="Video">
<div class="text-center title">
<h1>Video Editing</h1>
</div>
<hr/>
<div class="container-fluid overflow-hidden">
<iframe class="text-center embed-responsive-item " width="1280" height="720" src="https://www.youtube-nocookie.com/embed/videoseries?list=PLwf6BHzjcncmOoDkyKM8PNAnYhRHkbXub" frameborder="0" autoplay; encrypted-media; gyroscope; picture-in-picture allowfullscreen></iframe>
</div>
<hr/>
</div>
<hr/>
<br>
<div class="bg container-fluid text-center" id="Music">
<div class="text-center title">
<h1>Music Production</h1>
</div>
<hr/>
<div class="container-fluid overflow-hidden">
<iframe class="text-center" width="100%" height="auto" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/677510388%3Fsecret_token%3Ds-q8lC3&color=%230d58e7&auto_play=false&hide_related=false&show_comments=false&show_user=true&show_reposts=false&show_teaser=true"></iframe>
</div>
<hr/>
</div>
<hr/>
</body>
<!-- Scripts are here -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</html>
Try this structure:
<div class="container-fluid overflow-hidden">
<div class="row">
<iframe class="text-center embed-responsive-item "></iframe>
</row>
</div>
So, I know the responsive behavior shown by many of the community members as:
HTML
<div class="map-responsive">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15288.360926048195!2d51.52175762195133!3d25.282422800605804!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e45c534ffdce87f%3A0x1cfa88cf812b4032!2sQatar!5e0!3m2!1sen!2s!4v1546430525796" width="380" height="440" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
and css
.map-responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.map-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
What i am trying to do is having a bootstrap 2 column layout where 1st column has an image and 2nd column has the map.
and the issues are:
equal height
Responsive behavior
Here is the code
<div class="container-fluid px-0">
<div class="row mx-0">
<div class="flex-grow-0">
<img class="img-fluid" src="https://devs.kodenlogix.com/mtmgrp/mtmglobal/wp-content/uploads/2019/01/contactus-img.jpg" alt="Contact">
</div>
<div class="flex-grow-1 map-responsive">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15288.360926048195!2d51.52175762195133!3d25.282422800605804!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e45c534ffdce87f%3A0x1cfa88cf812b4032!2sQatar!5e0!3m2!1sen!2s!4v1546430525796" width="380" height="440" frameborder="0" style="border:0" allowfullscreen=""></iframe>
</div>
</div>
For a reference, here is the page i am working on:
Sample
Try this. Change the width to 100% in the iframe, and remove height:100%; from .map-responsive iframe
<iframe src="https://www.google.com/maps/embed? pb=!1m18!1m12!1m3!1d15288.360926048195!2d51.52175762195133!3d25.282422800605804!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e45c534ffdce87f%3A0x1cfa88cf812b4032!2sQatar!5e0!3m2!1sen!2s!4v1546430525796" width="100%" height="440" frameborder="0" style="border:0" allowfullscreen=""></iframe>
Take a look at the code on this JSFIDDLE, i'm, not using your css at all.
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>
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>