Responsive Embedded Google Maps - css

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.

Related

How do I center an iframe in bootstrap 5

<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

bootstrap 5 responsive iframe keeping 16-9 ratio

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">

Issue Making Two Colums Equal Height

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>

How do i center Youtube Video (iframe) in twitter bootstrap 3?

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>

3 horizontal image layout issue

I have been trying to achieve getting 3 images side by side. I finally got it the exact way I want them laid out. A few ways I tried, one image would always move down on smaller screens. They way I have it now is the exact way I want but the code i used is a bit messed up(not even sure if correct but it works).
My code has 4 images and just 3 show up. Again it shows up the way I want. The image that doesn't show up is the 2 one in the code. I dont want the image to show up anyways but I know it shouldnt be in there either.
I struggle with this stuff so any help on how this should read correctly is appreciated.
When I remove the 2 image in the code they all go out of line.
<div id="content">
<center><div><br><br><br><br><br><br>
<img src="images/image1.png" width="30%" style="float:left;/> <img src="images/image2.png" width="50%" style="float:left;"/>
</div>
<img src="images/image3.png" width="30%"/><img src="images/image2" width="30%" style="float:right;"/>
</div>
</center>
<br><br><br><br><br><br><br><br><br></div>
</div>
<div id="content" width="100%">
<div>
<img src="1.jpg" width="30%" style="float:left"/>
<img src="2.jpg" width="30%" style="float:left"/>
<img src="3.jpg" width="30%" style="float:left"/>
</div>
</div>
Here is the simplest and clean code...
fiddle :http://jsfiddle.net/ag3Et/1/
css
#content{
width:100%;
float:left;
}
#content img{
width:32%;
margin-left:1%;
float:left;
}
html
<div id="content">
<img src="http://www.birds.com/wp-content/uploads/home/bird4.jpg"/>
<img src="http://www.hdwallpapers3d.com/wp-content/uploads/2013/05/HD-Birds-wallpaper-3.jpg"/>
<img src="http://www.oassf.com/en/media/images/birds_wallpaper.jpg"/>
</div>
This is the answer for your ques.. please mark it as an answer after using this code so that others can also use it in future...
<div id="content">
<center><div><br><br><br><br><br><br>
<img src="1.jpg" width="30%" style="float:left;"/>
<img src="2.jpg" width="30%"/>
<img src="3.jpg" width="30%" style="float:right;"/>
</div>
</center>
</div>
<br><br><br><br><br><br><br><br><br></div>
</div>
You should definitely brush up on your html and css.
You need to set fixed pixel values so your images can fit into place and stay as you would like them to.
CSS:
#content{ width: 960xpx; margin:30px auto; } //the margin is to center this whole block
img{ width: 320px; float:left;} //each image is defined as a fixed 320px
.clear{ clear: both; } //makes sure things don't overlap
HTML:
<div id="content">
<img src="images/image1.png"/>
<img src="images/image2.png"/>
<img src="images/image3.png"/>
<div class="clear">
<!-- SOME OTHER CONTENT HERE -->
</div>
</div>

Resources