I'm putting an embedded Google Map side by side with a responsive image inside a div. I want the map to be the same size as the image always, and resize as it does.
This is my code, and the map looks really small.
<div class="grid-container">
<div class="grid12-6 no-gutter">
<img src="http://1.bp.blogspot.com/-MoFU-ybvlUw/TsXyHlX2AlI/AAAAAAAAARQ/kqXxZ8SquX8/s1600/la+fotolego.JPG" alt="" />
</div>
<div class="grid12-6 no-gutter">
<div class="map-container">
<div class="mapa">
<iframe src="https://maps.google.com/maps?q=manquehue%20norte%201255&t=&z=14&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
</div>
</div>
I want it to look like this
Possibly, you will have to keep your parent as a display: flex; and the childrens as flex-items or inline.
Related
The image on my webpage is not properly aligned with the video for some reason. It looks like this: This is the image on my webpage
When I try to shift the picture up, it still does not align properly and jsut shifts everything up. How can I properly align the image and the video.
Here is my code so far:
<div class="col-md-9">
<div id="page-1" class= "page one">
<h2 class="heading">Projects</h2>
<div class="resume-wrap d-flex ftco-animate">
<div class="icon d-flex align-items-center justify-content-center">
<span class="flaticon-ideas"></span>
</div>
<div class="text pl-3">
<span class="date">Feb 2020</span>
<h2>CLARITY - NSBE Hacks UofT</h2>
<span class="position"> First place winner and winner of best Google hack</span>
<p> Clarity is a web app catered towards children that struggle with autism. Children with autism have trouble recognising the emotions of other people. Our application listens peoples speech and analyzes the emotions being conveyed in said speech. After the analysis, recommendations are given to the user on how to navigate the situation, in an attempt to make navigating social situations easier. </p>
<img src="/static/images/clarity.png" height = 200px width = 250px>
<video width="300" height="300" controls>
<source src= "/static/video.mp4" type ="video/mp4">
</div>
</div>
Try encapsulating the image and video within their own Bootstrap div. Something like this:
<div class="md-col-6">
<img src="/static/images/clarity.png" height = 200px width = 250px>
</div>
<div class="md-col-6">
<video width="300" height="300" controls>
</div>
This will force the image and video to remain in two columns, and most likely line up with each other. I'd also recommend inspecting the element to see if any padding or margins are causing the misalignment.
I'm using bootstrap 3 in one of my application. If I use width="80%" height="420" then my video comes with perfect size in large screens. But it is not working as responsive in small screens (mobiles) because of height="420". So that I used class="embed-responsive-item" with iframe. Again same problem iframe is not working as responsive. Any suggestions please. I'm not familiar with css. Here is some stuff.
<div class="wrapper">
<aside class="right-side">
<section class="content">
<div class="row">
<div class="col-xs-9">
<div style="background-color: #ffffff;text-align:center;padding:1%;" id="tmp">
<iframe id="crntplay" width="80%" height="420" src="http://www.youtube.com/embed/id?autoplay=0" allowfullscreen></iframe>
<div class="row">
<div class="col-md-8"><span id="crntplaytitle" style="margin-left:15%;text-align:left;display: block;font-size:14pt;font-weight:bold;">title</span></div>
<div class="col-md-2"><span id="crntplayviews" style="text-align:right;display: block;font-size:14pt;font-weight:bold;">views</span></div>
</div>
</div>
</div>
</div>
</section><!-- /.content -->
iframe can't be responsive. Just the contents in them.
You could use jquery to resize the iframe based on screen resolution
Adjust width and height for iframe depending on screen size
I have a 'big' problem with iframe. I had to make an iframe inside a container div witch has a Bootstrap modal inside. everything is working fine on desktop (Chrome, firefox, safari etc.)but on tablets, when i call the open function for the modal, it is remove every other content except the iframe.
here is the html code:
<div class="content">
<div class="container-fluid header">
<div class="container">
<div class="row">
<!-- SOME HTML CODE HERE-->
</div>
</div>
</div>
<div style="clear: both;"></div>
<iframe src="/game/" width="100%" height="786" style="border: none" id="table-1"></iframe>
</div>
The iframe is an html document too, and i know that i souldn't had to use it for this, but thats what they want me to do.
I have a div inside a div and I want the inside div to either contain a background colour or background image. My code is:
<div class="row two">
<div class="cols n15">
<h2 class="latestVideo">Latest Video</h2>
<iframe width="100%" height="370" src="//www.youtube.com/embed/a-XQL60NVmQ" frameborder="0" allowfullscreen></iframe>
</div>
<div class="cols n9 clearfix">
<h2>Other Videos</h2>
<div class="otherVids">
<p>"test"<p>
<!-- <img src="images/otherVideos.jpg" alt=""> -->
<div class="video1">
</div>
<div class="vidoe2">
</div>
<div class="video3">
</div>
</div>
<div style="clear:both"></div>
Right now this makes it look like this:
What I want is for the red box to extend all way down and match the height of the div on the left side. I realize that this would work if I have the div(otherVids) a height and width, but if I do this the website won't be responsive anymore.
So if there anyway to make the div background fill up the empty space while still remaining responsive?
Here is the CSS code I have:
.otherVids{
background-image: url('images/otherVideos.jpg');
background-color: red;
width: 100%;
height: 100%;
}
Try setting the height of otherVids to be equal to the iframe.
Add height:370px; to the css of .otherVids
You can try two method,the first thing is:
.otherVids{
min-height:370px;
}
or:
.otherVids{
height:370px;
overflow-y:scroll;
}
if your video list is to many,you need to design the content responsive.
finally,I think you don't need use width:100%,because div is block element.
On this page an embedded YouTube video is displayed to the left of a carousel titled "Similar Festivals". The HTML used to embed the YouTube video is:
The HTML of the YouTube section is:
<div class="span4 spacer youtube">
<div class="title clearfix">
<h2 class="pull-left">YouTube</h2>
</div>
<iframe width="1000" height="1000" src="http://www.youtube.com/embed/NI8rQEHoE24"></iframe>
</div>
The layout of the page (using a responsive Bootstrap grid) is such that the video should have the same height as the carousel to the right of it, but as you can see, it is somehow breaking out of its parent container. I want the video to be aligned with the carousel to its right, how can I fix this.
Here's a screenshot in case there's any doubt about what I'm referring to!
I've noticed that row-fluid container is dynamically adding a width of 33% to your Youtube video. So whatever width expectation you set to it is being reset by that class.
Try this:
<div class="row-fluid">
<div class="span4 spacer twitter">
</div>
<!-- Youtube -->
<div class="span4 spacer youtube">
<div class="title clearfix">
<h2 class="pull-left">YouTube</h2>
</div>
<iframe height="150px" src="http://www.youtube.com/embed/NI8rQEHoE24"></iframe>
</div>
<!-- Similar Carousel -->
<div class="span4 spacer">
<div id="similarCarousel" class="carousel slide last">
</div>
</div>
</div>
(hat tip to Mr. Alien)
It sets the iframe height only. The whole row-fluid container expands somewhat, and the height is irregular. However, you don't have the 'jumping outta the container' problem.
Instead of
<iframe id="fitvid811516"
src="Festivals.ie%20_%20Electric%20Picnic%202012_files/NI8rQEHoE24.htm">
</iframe>
Use this
<iframe width="640" height="360"
src="http://www.youtube.com/embed/NI8rQEHoE24?feature=player_detailpage"
frameborder="0" allowfullscreen>
</iframe>
And adjust width and height manually. Iframes don't go along well with dynamic sizing.
Also if you don't want to break the layout but also don't want to change the content within, you can also go to the parent container in HTML and set overflow: hidden
.fluid-width-video-wrapper {
overflow:hidden;
}
Note that this would fix your layout but break the iframe; its bottom parts where play controls stay would be hidden.