This question already has answers here:
Making an iframe responsive
(24 answers)
Closed 8 years ago.
i am trying to make an iframe responsive, in order to be correctly viewed on mobile devices etc, and what i am doing, although it is working good on mobile devices, it ruins the iframe on normal displays.
the iframe is that
<div class="conti" align="center" >
<iframe id="extFrame" src="html5/Project1.html" height="600px" width=" 800px"></iframe>
</div>
and the css style is
<style>
.conti {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}
.conti iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
</style>
that above makes the iframe full width but i want it 800*600.
any help?
Just delete witdh and height properties defined on css styles and the iframe will be generated with your desired dimensions.
I hope it helps. But are you just giving one size for every device? This is not responsive at all... You have to add some media queries.
This is a good post with different media queries for Responsive Design:
Media Queries for Responsive Design
If you want it 800x600 then say you want it 800x600 instead of 100%x100%.
width: 800px;
height: 600px;
Related
I am trying to make my responsive embedded youtube video not appear so large on a regular desktop display. It looks fine in mobile, but when trying to adjust the size to make it look good on desktop it ruins the responsive on mobile.
I've tried adjusting the width / height % in css which allows me to resize in desktop but ruins the responsiveness in mobile.
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="video-container">
<iframe width="853" height="480" src="https://www.youtube.com/embed/z9Ul9ccDOqE" frameborder="0" allowfullscreen>
</iframe>
</div>
I am trying to get my embedded video to look like a normal sized video but yet responsive. Currently it takes up the entire screen.
here is a photo of the desktop display.
Use the max-width CSS property to set a hard limit for where you want the video to stop expanding. That way, if the user is using something such as an ultrawide monitor, your content will cap where you want it to.
Here's an example:
.expandable{
width: 80%
max-width: 1200px;
}
This question already has answers here:
Making an iframe responsive
(24 answers)
Closed 5 years ago.
I'm trying to make a responsive template and I'm using iframes for youtube videos.
When i put a caption underneath the video it works fine on desktop, but when I go to responsive mobile mode there is big between caption and video.
Can any body help me to fix it, so that caption stay underneath the video regardless wether I'm on desktop or mobile.
Here is the link for my template:
http://www.sayarts.com/past-events.html
You are not using the right approach to make your videos responsive. Height for your videos remain fixed that's why their is huge gap between videos and caption on mobile phones.
To make the videos perfectly responsive, add the video inside a div like this:
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
and then use the following CSS:
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
You can read more about it in this article
You can simply add this style to the wrapper element: height:auto, it seems to fix the problem.
#wrapper embed, #wrapper iframe {
max-width: 100%;
height: auto;
}
If you need more control use the responsive media queries, this is an example:
#media only screen and (max-width: 468px) {
body {
/*you specific styles*/
}
}
I have added an iframe and it is working fine in all browsers and some devices but in iphone 6. The iframe is not responsive. It does not fit 100% of iphone screen size.
I found many solutions online but most of them showed how to make an iFrame scroll in iphone. I dont need that. I want to make it responsive and adjust according to screen size.
<div class="frame-container" style="position: relative; padding-bottom: 65.25%; padding-top: 30px; height: 0;">
<iframe id="frame" width="100%" height="1000px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe >
</div>
I have removed the src="" in iframe in the sample above
From the screen shot it can be seen that the iframe is not responsive and a horizontal scroll appears. During loading the iframe is according to the devices viewport but once it is fully loaded the iframe takes the full width and the horizontal scroll appears.
Checking on browser stack
This problem is solved, simply had to apply this styling. I did an inline-css to this.
width: 1px;
min-width: 100%;
*width: 100%;
Here is a link to a more detail answer
So I'm building a website, which is suppose to have an image slideshow
I've set up a div for it:
<div id="slideshow">
</div>
with its corresponding CSS:
#slideshow {
position: absolute;
height: 28%;
width: 99.9%;
top: 10.5%;
margin: 0;
}
I've been trying to find a proper image size to fit the div, so that it doesn't show up differently on different screens. I've tried finding an unnecessarily big image, so that it would "scale down" to the div using height: 100% and width: 100%
But it always turns inconsistent in the two screens I test, normally too stretched. One screen has a resolution of 1336x768 and the other 1920x1080.
How can I keep an image from changing its ratio on different screens? (I think of a banner and how it's always consistent in every screen without stretching)
Typically when working with any kind of responsive design that will work across multiple screen resolutions you use the following.
img {
height: auto;
max-width: 100%;
}
This will also assure that the image keeps the correct aspect ratio.
This question already has answers here:
css scaled background image
(4 answers)
Closed 2 years ago.
The website I'm working on, Tamsnails.com, is just about done, but it has one issue that I've been bothered with for a while now. The background image of the store will simply not stretch to the full screen of my high resolution work laptop. I've tried a lot of things over the last couple of months, a lot of which I forget, but
I remember at first, I had it as an actual css background-img
then, I had
<head>
<body id="theBody">
<div id="backgroundImageWrapper" style="height: 100%; width: 100%; z-index: 0; position: absolute;">
<img id="mainBackgrond" src="background_image.JPG">
</div>
with mainbackground style
#mainBackgrond {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
Now, I have
<body id="theBody">
<img id="mainBackgrond" src="background_image.JPG">
<div id="wrapper">
with style
#mainBackgrond {
height: 50em;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
because this at least looks good on my home laptop.
Yes, I know I spelled 'mainBackgrond' wrong.. bear with me here!
If the issue is that the image doesn't stretch to the bottom of the window (which is what I'm seeing in Chrome) then change the height: 50em on your #mainBackgrond style to:
height: 100%;
You might want to take a look at this ( or other similar jquery plugins )
http://srobbin.com/blog/jquery-plugins/jquery-backstretch/#demo - Quite simple to use and it stretches the background image fully without risking the aspect ratio.
Try to remove the height property, this way it will maintain the aspect ratio and stretch all the way across the screen, if this is the intent.
#mainBackgrond {
position: fixed;
z-index: -1;
width: 100%;
left: 0px;
top: 0px;
background: url(/background_image.JPG) no-repeat center center fixed;
}
The background image itself is huge, and makes initial load time very slow, you should consider compressing it more or resizing.
also have a look at css media query a nice way to show different size background images for visitors with smaller screens that might not even have the resolution to see the background.
#media screen and (max-device-width: 480px) {
.column {
float: none;
}
}