embedded YouTube video layout issue - html

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.

Related

Bootstrap col-auto class shrinks YouTube iframes to zero width

I want the video iframes to use the full container width.
To illustrate, I have a Bootstrap v5.2.2 container with a single row using justify-content-center and a single column using col-auto:
<div class="container">
<div class="row justify-content-center">
<div class="col col-auto">
...
</div>
</div>
</div>
This centers paragraphs within the column div if none of them fill the full width of the container, while keeping paragraphs left-justified.
That works great, except when I embed YouTube videos as iframes in the column div.
The iframes are only as wide as the widest content in the column div. If the longest content other than an iframe is the word "the", the iframe is literally that wide; it's unusable. If the iframe is the only item, then it's not displayed at all.
Here's an example of a YouTube iframe:
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8" allowfullscreen></iframe>
If I use the Bootstrap "embed-responsive" and "embed-responsive-item" classes like this:
<div class="embed-responsive">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8" allowfullscreen></iframe>
</div>
Then the iframe is displayed, but it's a constant 300px width, even if the container or other content is much wider, which looks tiny and is difficult to use on desktop displays.
I can't figure out how to have text centered in the container by col-auto, but have YouTube iframes expand to always fill the container width.

How to make a fully responsive Google Maps inserted in website

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.

Responsive video default size

I have a website using bootstrap and on the core of my page I have a picture and below is a youtube video embeded:
<div class="col-xs-12 col-sm-12">
<a href="tech.php">
<img class="img-responsive img-rounded" src="assets/tech_withText.jpg" alt="Generic placeholder image" width="1200" height="600">
</a>
<br>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/RTwv1Dn2rYQ" width="300" height="150" frameborder="0" autoplay=1 allowfullscreen></iframe>
</div>
</div>
Link to website here.
When I first load this page what I see with this solution (and dislike) is that my video extends below my screen. So I am after a way to state the size of my picture and video as a ratio of the screen size, so that my video resizes to stay within the boundaries of the screen.
I have looked for ideas on the internet (i.e. css edit as in here) but I get lost or it does not do what I expect.
Any idea?
If you just add a CSS entry to specify the minimum height of the video it will not clip it on load and bootstrap will take care of keeping it in ratio on resize. Code:
.embed-responsive{
min-height:100%;
}
Of course you will probably want to target the div a little more specifically but I think this should do what you are after.
I would go about this differently, I wouldn't use an absolute positioned element for video and I would set a height or min-height to use viewport units vh
So it might look like:
#youtube-video {
width: 100%;
min-height: 40vh;
}
And remove all the absolute positioning on that element.
Additionally you might want to set an ID or class on your top container and give it some margin-top to offset your fixed header:
#top-container {
margin-top: 50px;
}
Lastly I would move the footer outside the bootstrap container completely by moving the </div> to be above your footer.
<div class="container">
....
</div>
<footer class="footer">
...
</footer>

bootstrap 3 Iframe resizing

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

Bootstrap modal inside iframe remove content

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.