I'm trying to add a border to a responsive embedded video.
I have tried two different approaches to show the video:
1.
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ"></iframe>
</div>
2.
<div style="position: relative; width: 100%; padding-bottom: 56.25%;" class="text-center">
<iframe allowfullscreen="" src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ" frameborder="0" style="position: absolute; left: 0%; top: 0%; width: 100%; height: 100%"></iframe>
</div>
I have tried to add a border to both approaches, using:
a.
border:3px solid #EEE;
b. (variations of below e.g. different width/height values etc, and where the parent div got a background color, which is the border color)
<iframe style="left: 5px; top: 5px; width: 100%; height: 100% ... >...</iframe>
There is one consistent problem when adding the border, for all approaches: the video is either to big or too small for the space it is contained in. Either the video sort of zoomed in on, or it is too small such that there is a black borders appearing either vertically or horizontally depending on whether the width or height is too small. See image below.
I have tried to add magical values to get rid of the black border, like increasing outer-div's height padding a little, move the iframe by setting the left/right by some value and reducing it's size by some value (where all values are set to maintain the aspect ratio of the video). I would use this in worst case. The reason why I ask is because I hope there is a much smoother way to do it.
How can I add any-sized border to a responsive video without black borders appearing or the video being zoomed in on?
If you have access to directly modify the HTML and CSS of your site, you could try adding a <div> around .embed-responsive and then add a border to that. As a general rule, it's a good idea to keep your HTML and CSS separate if you can.
A quick demo: https://codepen.io/mikejandreau/pen/jxNJmK
Add a wrapper <div> like so:
<div class="embed-border"><!-- add this guy -->
<div class="embed-responsive">
<iframe src="your-video"></iframe>
</div>
</div><!-- close .embed-border -->
And add the CSS:
/* extra div which gets the border */
.embed-border {
border: 5px solid red;
box-sizing: border-box; /* prevents extra width from being added */
}
/* aspect ratio and positioning for responsive video */
.embed-responsive {
position: relative;
overflow: hidden;
height: 0;
padding-bottom: 56.25%;
}
.embed-responsive iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Related
Im making my first web app and im trying to put some iframes with youtube videos on it, the thing is, when i pasted the embed code from youtube, it was too big to the point that it took the entire screen, so i resized it. But now the interface is too big for the size and looks bad. How can i make the interface adaptive to the size? pic related
Thank you.
You have to use responsive styling. For this you need an extra div as wrapper. With next html and css, the youtube will be as wide as the available space (in this css 90% of the available space). Ofcourse both width and height will resize to maintain the 16:9 ratio of an youtube movie.
<style>
.yt {
position: relative;
display: block;
width: 90%; /* width of iframe wrapper */
height: 0;
margin: auto;
padding: 0% 0% 56.25%; /* 16:9 ratio */
overflow: hidden;
}
.yt iframe {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>
<div class="yt">
<iframe width="560" height="315" src="https://www.youtube.com/embed/8Pa9x9fZBtY" allowfullscreen></iframe>
</div>
you can but it inside parent container which will control it's size and make the size of your iframe 100%
look here:
Make Iframe to fit 100% of container's remaining height
I have two boxes next to each other in a flex container. One contains an iframe, the other a form. I want the iframe box to match the height of the form box, and have the iframe box keep an aspect ratio of 16:9.
I could not get the old padding-bottom: 56.25% trick to work, because that's based on width, which is tricky with Flexbox.
Here's a fiddle with an approximation of my HTML and (S)CSS, if you want to have a stab at this problem. https://jsfiddle.net/7zgh88ew/
If anyone has any ideas, they would be greatly appreciated!
By using inline-flex and a dummy img having the correct ratio, set it to visibility: hidden and then position the iframe absolute, it works, only in Chrome though, so there must be some issue, as with the other browsers, the img doesn't size its parent properly.
I will post a question myself to see if someone knows anything about that, and update this post when I know more.
Update
For a fixed height, i.e 200px, one can set it on the .container and add height: 100% to the .iframe and it will work for the other browsers (solution provided by Tunçel Mert)
Still, if the size of the form-content is based on its content, it still only appears to work on Chrome.
Fiddle demo
Stack snippet
.container {
display: inline-flex;
height: 200px;
}
.iframe {
position: relative;
height:100%;
background: red;
}
.iframe img {
height:100%;
visibility: hidden;
}
.iframe iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.form {
background: orange;
}
.fake-form-content {
width: 200px;
}
<div class="container">
<div class="iframe">
<img src="http://placehold.it/160x90">
<!-- Sorry about the video -->
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" width="320" height="180"></iframe>
</div>
<div class="form">
<div class="fake-form-content">
Fake form content
</div>
</div>
</div>
So i have this issue. i'm tryng to adjust and html inside an iframe , and i keep bangging my head arround this. the Html contains an image slider and my objective is that the image slider fills the entire iframe.
this is the html of the iframe, targgeting the index1.html:
<iframe height="520px" width="100%" src="index1.html" name="frame" style="border: none"></iframe>
and here is the css that controls the index1 image slider dimensions
body{
padding: 0px;
margin:0px;
}
#container{
width: 1298px;
height: 520px;
padding: 0px;
margin-top:0px;
margin-left:0px;
}
#slider{
position: center;
overflow: hidden;
width: 1298px;
height: 520px;
padding: 0px;
margin-top:0px;
margin-left:0px;
}
Every time i try to adjust te height of both image slider and it's container, the i frame creates a scroll.
The results i'm getting is the following:
please view image
That red marked grey area is the remaining of the iframe that i can't get the image slide fit into.
How can i do this?
Use either scrolling="no" or overflow: hidden;
<iframe height="520px" width="100%" src="index1.html" name="frame" scrolling="no" style="border: none; overflow: hidden;"></iframe>
You should probably look and see if some part of the "index1.html" is wider than the image slider. Pay attention to margins, padding, and borders. I would look into this before you try my suggestion above, because if there is some part of the content being hidden it may cause you issues later.
I have the below image of a blank Macbook.
The image is 1034 × 543.
I want inset a youtube video inside of the "grey" area of the screen. I want it to appear as if the youtube video is playing on the laptop screen.
I also want the laptop image / youtube video to scale, so that when the web page is in a tablet or mobile view, the image and video shrink to match.
I am trying to use fitvid.js to accomplish this but am not having luck -- I can get the video to fit at one static size but I cannot get it to still fit perfectly on resize, it gets deformed.
Below is my current markup:
html:
<div class="col-sm-12">
<div class="title">
<h2>What's New</h2>
<small>ASC Sneak Peak</small>
</div>
<div class="macbook-wrapper">
<iframe width="715" height="402" src="//www.youtube.com/embed/**url**" frameborder="0" allowfullscreen></iframe>
</div>
</div>
SASS:
.macbook-wrapper{
background: url('../img/content/home/macbook.png') no-repeat;
.fluid-width-video-wrapper {
width: 97.5%;
background: #000;
}
}
You could instill some trickery with padding and percentages, that way you could have it scale accordingly. Basically, setting up a container that's purely % base, with an absolutely position iframe that scales accordingly to the container.
HTML
<div>
<iframe></iframe>
</div>
CSS
div {
position: relative;
padding-top: 25px;
padding-bottom: 67.5%;
}
div iframe {
background: url(http://i.stack.imgur.com/zZNgk.png) center center no-repeat;
background-size: contain;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
You'd just need to add box-sizing: border-box; and some padding to position the iframe within the screen. Check it out http://jsfiddle.net/41sdho4w/
To take it a bit further - here's a version with a container to help control the max-width and max-height rather then relying on the body / viewport http://jsfiddle.net/4g9e3ywy/
I am trying to make my website responsive, and I have a PDF viewer in object tags in the body simply like this:
<object width="950" height="800" data="images/ah.pdf"></object>
Since the width and height are defined, I changed it to:
<div id="custom">
<object data="images/ah.pdf"></object>
</div>
and then adjusted the div in the css portion using percentages. My problem is that the whole PDF viewer does not show, and instead is a small box that has scroll bars on the sides, so you have to scroll left right and top bottom. Is there any way I can get it to adjust the PDF size according to the window size instead of just adjusting the PDF viewer alone? I hope this makes sense as clear as possible. Thank you!
Change your object tag to this:
<object data="images/ah.pdf" style="width: 100%; height: 100%; display: block;"></object>
You can add the style to a class, then include the class in your object tag. Or use another variation to get the styles applied. The width and height will be the same size as its parent container.
#Adam answer may work. I honestly don't deal with much/ BUt I will tell you that I have setup iframes for displays and they are responsive-compatible
This is what I'd do
<div class="content">
<div class="embed-container">
<iframe src="/images/myPDF.pdf" frameborder="0"></iframe>
</div>
</div>
.content {
width: 50%;
margin: 0px auto;
}
.embed-container {
height: 0;
width: 100%;
padding-bottom: 56.25%; /* play with this until right */
overflow: hidden;
position: relative;
}
.embed-container iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}