I've build an iframe that embed an html like the following:
<div class="document">
<iframe src="http://localhost:8080/doc625.htm">
</iframe>
</div>
While these are the classes that I've apply to the div and the iframe:
.document {
position: relative;
width: 100%;
height: 0;
padding-bottom: 50%;
padding-top: 50%;
overflow: hidden;
}
.document iframe {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
The problem is that when I try to expand the screen, the height of the Iframe doesn't fit to their content.
How can I fix it?
These are the screenshots:
100% zoom
50% zoom
I have uploaded 2 pages one child (page2.html) the other parent (page1.html).
I added defaults I use frequently, but the major changes are as follows:
.document {
overflow-y: scroll;
}
.document iframe {
bottom: 0; right: 0;
}
You mean the height of the iframe doesn't follow ?
I think you shouldn't use all these properties, just set your iframe dimensions with viewport sizes, like "vh" for the height and "vw" for the width, and set it to "100vh" and "100vw" like :
iframe {
height:100vh;
width:100vw;
border:none;
}
Related
I want an iFrame to be responsive and horizontally centered on the page, but I also want a max-width of 500px for it. For now I only succeed of making it responsive but not centered.
const VideoWrapper = styled.div`
max-width: 500px;
`;
const IFrameContainer = styled.div`
position: relative;
height: 0;
padding-bottom: 88%;
overflow: hidden;
margin: 0 auto;
iframe {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
`;
I chose 88% because it is the correct format for my video, the responsive works perfectly.
But when I try to add a flex display with justify content center, the iframe will disappear. Same for margin-left/right auto.
<VideoWrapper>
<IFrameContainer>
<iframe title="player" id="player" scrolling="no"></iframe>
</IFrameContainer>
</VideoWrapper>
This is React and styled component code.
Thank you for your help.
Use margin:0 auto; with the max-width.
I'm trying to use bootstrap to make my personal website with a video in the background. When I make the browser window smaller, the video, title placeholder, and buttons all do not scale (not responsive). I don't know what's wrong. Any help would be useful. Thanks so much!
Here's my HTML code:
<div class = "header-container">
<div class = "video-container">
<video preload = "true" autoplay loop volume = "0">
<source src = "videos/main.mp4" type = "video/mp4" >
</video>
</div>
<h3 class="main">
Title Placeholder
<div class="col-md-5 text-center col-sm-offset-3">
Services
About
Contact
</div>
</h3>
</div>
Here's my CSS code:
.header-container {
width: 100%;
height: 700px;
border-left: none;
border-right: none;
position: absolute;
padding: 10px;
overflow: hidden;
}
.video-container {
position: absolute;
top: 0%;
left: 0%;
height: 700px;
width: 100%;
overflow: hidden;
}
try to add in style
h3.main
{
position:relative;
z-index:1;
}
video
{
width:100%;
}
Okay you are giving the .video-container a static height. Make it's height to 100% . After that grab your video element and give it a min-width and max-width of 100% . Yo might also need to add the max-width property to the video and set it to 100%. You can also use width and height of 100% rather than using min-width and min-height. See what works and create a fiddle.
.video-container {
position: absolute;
top: 0%;
left: 0%;
height: 700px;
width: 100%;
overflow: hidden;
}
video { max-width: 100%; min-width: 100%; min-height: 100%; }
I have a slight issue. I have a video which I would like to adjust to the browser, it shouldn't stretch, but neither should there be any with space visible
HTML:
<video src="Wereldbol.mp4" onclick="this.play();" id='wereldbol' preload="auto" ></video>
CSS:
#wereldbol {
position: absolute;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
background-size:cover;
}
background-size: cover; is causing the issue that the video would be off-center, is there any alternative way to cover the browser's full width and height? At the moment width: 100% and height: 100% don't quite fix the issue because it would leave the image to have a white bar on the left and right, eventhough the video scales correctly. Is there any way to fix this issue?
If I understand you correctly, what you are trying to achieve is keep the video’s aspect ratio, but make it adapt to its surroundings without stretching the video out of proportion. Here’s how I do it:
Wrap the video element in a div, like this:
<div class="video-wrapper">
<video src="Wereldbol.mp4" onclick="this.play();" id='wereldbol' preload="auto" ></video>
</div>
Then use the following CSS:
.video-wrapper {
position: relative;
width: 100%;
max-width: 100%;
height: 0;
padding: 56.25% 0 0 0; /* 100%/16*9 = 56.25% = Aspect ratio 16:9 */
overflow: hidden;
border: 0;
}
.video-wrapper video {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
EDIT: Here’s a plunker: Adjust the viewport-width to see how it works.
You need to either adjust the CSS to fit the exact aspect-ratio using the "aspect ratio trick" or use something like FitVids.js -- see http://fitvidsjs.com/
I'm using the classic responsive design trick of applying a percentage based padding-bottom and zero height to an element in order to make it maintain a certain aspect ratio. Inside this element is an iframe with a height of 100%.
This works an intended in chrome, but firefox and IE doesn't show the iframe, as if it would have no height. I have tried applying box-sizing: content-box as a workaround for IE, but it did nothing.
Fiddle: http://jsfiddle.net/jgsnK/
How can I make the iframe behave like in chrome in the other browsers?
What you'll need to do is position your iframe using position:absolute; with position:relative; on your .wrapper
.wrapper {
position:relative;
height: 0;
width: 100%;
padding-bottom: 56.25%;
}
.frame {
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
width: 100%;
height: 100%;
}
Have a look at this DEMO
FURTHER:
If you plan on doing something like this regularly throughout your document I would suggest adding an internal div that does this same function and leave your iframe without the absolute positioning
HTML
<div class="wrapper">
<div class="abs-inner">
<iframe border="0" scrolling="no" class="frame" src="http://images.fineartamerica.com/images-medium-large/7-abstract-background-les-cunliffe.jpg"></iframe>
</div>
</div>
CSS
.wrapper {
position:relative;
height: 0;
width: 100%;
padding-bottom: 56.25%;
}
.abs-inner{
position:absolue;
top:0;
right:0;
left:0;
bottom:0;
}
.frame {
width: 100%;
height: 100%;
}
Something like this DEMO
The height: 100%; means match the height of element with the height of its parent i.e. 0px. You can use relative + absolute positioning to achieve the desired result i.e. match the height with the height of the element plus padding:
.wrapper {
width: 100%;
padding-bottom: 56.25%;
position: relative;
}
.frame {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
Demo here
Note: for pixel perfect results you might need to zero-out the marginwidth, marginheight and frameborder attributes on the iframe.
I have responsive background and I want to have a YouTube video over that background(not in full width).
Here I have tried doing it.
http://jsfiddle.net/audetwebdesign/EGgaN/#run
HTML:
<div class="bg-image">
<img src="http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg">
<iframe width="560" height="315" src="//www.youtube.com/embed/R8wHnwfHscw" frameborder="0" allowfullscreen></iframe>
</div>
CSS:
.bg-image {
position: relative;
}
.bg-image img {
display: block;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.bg-image iframe {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
Here's a jsfiddle forked from your fiddle that has the image as the background, as well as a responsive youtube video centered. Making the image have position:absolute takes it out of the normal flow and allows the embedded video to stay on top.
The trick for the responsive video code is to wrap the embedded video in a container with a max width, and then also adding in padding to keep the proper aspect ratio for the video. You then ensure that the iframe, object, and embded elements all fit at 100% of that container's width while also not getting any taller than the native size:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
width: 100%;
max-width: 560px;
margin: 0 auto;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-height: 320px;
}
http://jsfiddle.net/QRkL9/
More about the above code - http://avexdesigns.com/responsive-youtube-embed/
braican is correct, but the 56.25% on the video container will leave lots of padding after your video. Just wrap everything inside another div with a max-height of 320px and overflow:hidden to hide the extra padding;