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.
Related
I want to fit a YouTube iframe embed in the middle of a page (70% width) so I'm doing this:
.wrapper {
margin: auto;
width: 70%;
}
.wrapper iframe {
left: 0;
top: 0;
width: 100%;
height: 100%;
}
The problem is, I'm getting black bars around the video to fill the available space. If instead I used padding (as in this answer) the iframe would only fit horizontally and might require scrolling in the vertical direction. Any idea what might help? (older browser support is not an issue)
Edit: I know the aspect ratio of the video I want to play.
You can try to use flex css for this issue. you can use the static height width to the iframe as per your requirement
.wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.wrapper iframe{
width: 100px;
height: 100px;
}
Black bars appear when the height/width ratio of the iframe is too high (over .5, approximately).
Use this CSS to maintain a fixed height/width ratio, even when the wrapper is resized:
.wrapper {
width: 70%;
padding-top: 35%; // 35/70 = 0.5, the ratio can be changed here
margin: auto;
position: relative;
}
.wrapper iframe {
width: 100%;
position: absolute;
height: 100%;
transform: translate(0, -100%);
}
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;
}
I am trying to show the image in full page and if the size of the browser window reduces, the image should resize proportionally.
I should be able to get the image to center of the page when browser size reduces.
I have tried something like this fiddle
HTML
<div>
<img src="http://yournaperville.com/wp-content/uploads/2013/06/disney-world.jpg"/>
</div>
CSS
*{
margin: 0;
}
html{
background-color: #666666;
}
img {
height: auto;
width: 100%;
}
div{
height: auto;
width: 100%;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
I am not sure how far I am right. can anyone help me
change img height to 100% and overflow:hidden to html. Works for me!
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've created a banner for my website that's made up of 3 iPhone images side-by-side, using background images and relative positioning for each. However, I'm having issues with the horizontal scrolling. That is even though the div's containing each iphone image extend beyond the width of the parent .content div, I don't want there to be a scrollbar when the overflow content isn't able to fit the browser width. Scrollbars should only be shown if the browser width is below 960px.
A similar effect is presently seen on Apple's homepage, where the hand/wrist reside "outside" the website's container, but no horizontal scrollbars are visible unless the browser's width is below 990px wide.
I hope I've explained this clearly, please let me know if it's not clear.
Here's the code I'm using:
<div class="content">
<div id="iphone-a"></div>
<div id="iphone-b"></div>
<div id="iphone-c"></div>
</div>
.content {
margin: 0 auto;
width: 960px;
height: auto;
text-align: left;
overflow-x: visible;
}
#iphone-a {
z-index: 1;
position: relative;
left: 50%;
bottom: 0;
margin-left: -306px;
height: 657px;
width: 590px;
background: url(images/banner.png) 0px 0px;
}
#iphone-b {
z-index: 0;
position: relative;
top: -545px;
left: 50%;
margin-left: -732px;
height: 319px;
width: 590px;
background: url(images/banner.png) 0px -658px;
}
#iphone-c {
z-index: 0;
position: relative;
top: -864px;
left: 50%;
margin-left: 144px;
height: 319px;
width: 590px;
background: url(images/banner.png) 0px -658px;
}
change
overflow-x: visible;
in .content to
overflow-x : hidden;
Edit : If that's not what u mean, and u just want visible to work correctly try using overflow instead of overflow-x