I'm trying to make an iframe that will show the full page of the external site with a top div. The problem is all browsers are ignoring the width & height css.
This is what my css is
iframe {
position:fixed;
width:100%;
height:100%;
border:none;
margin:0;
padding:0;
overflow:hidden;
z-index:999999;}
When you view the site it ignores the width and height which makes iframe not full screen. When I view the source in the browser the width & height are missing. Any fix to this?
You can use vh and vw uits for that. 1vw is 1% of viewport width, and 1vh is 1% of viewport height:
iframe {
position:fixed;
width:100vw;
height:100vh;
border:none;
margin:0;
padding:0;
overflow:hidden;
z-index:999999;
}
By the way I looked at the site by link. It has a little broken style for iframe:
iframe {
position: fixed;
width: 100;
border: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index: 999999;
}
width value has no units, height is absent.
Following code works:
iframe {
position: fixed;
width: 100%;
border: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index: 999999;
height: 100%;
}
Related
I want to put an iframe onto my page with a another div over top of the iframe to go back to a specific page, however, I cannot seem to get the iframe to go full screen (height:100% and width: 100%). Is there any work around to get the iframe in full screen?
I have already tried setting the height to window height using jquery, however, its not working.
<style>
iframe {
height:100%;
width:100%;
}
.goback {
width:100%;
background-color:transparent;
transition:.5s;
position: absolute;
z-index:3;
}
.goback img {
padding:5px;
}
.goback:hover {
background-color:white;
}
</style>
<body>
<div class="goback">
<img src="../../assets/goback.png" alt="goback" height="50px" width="50px" />
</div>
<iframe src="https://music.youtube.com/"></iframe>
</body>
You should modify your css (Set body margin to 0, position iframe absolute and set the border to 0)
Example:
body {
margin: 0;
}
iframe {
position: absolute;
top: 0;
left: 0;
height:100%;
width:100%;
border: 0;
}
Use Viewport width and height instead of percentages
iframe {
height:100vh;
width:100vw;
}
use the width:100%; height:100vh;
of iframe.
I want to use a youtube-video as the background of a container-block. This container-block isn't 100vw so I guess I need a bit of a different approach then the classic one. Therefore I tried that one here: https://codepen.io/daiaiai/pen/ygeyLG with that "code":
$color_1:rgb(25,29,184);
$color_7:rgb(241,90,111);
* {
vertical-align:top;
box-sizing:border-box;
margin:0;
padding:0;
height:auto;
border:0;
}
.sw_header{
height:92vh;
width:100vw;
overflow-x: hidden;
}
.sw_header-links{
width:40%;
height:100%;
display: inline-block;
background: $color_1;
overflow: hidden;
}
.sw_header-links-videowrapper{
//position: relative;
top: 0;
left: 0;
//width: 100%;
width: 100%;
height:100%;
pointer-events: none;
}
.sw_header-links-videowrapper iframe{
//position: relative;
top: 0;
left: 0;
height: 320%;
width:180%;
//height: 200%;
}
.sw_header-rechts{
display: inline-block;
width:50%;
height:100%;
background:$color_7;
padding:50px;
}
and the html-code therefore with that code:
<header class="sw_header">
<div class="sw_header-links">
<div class="sw_header-links-videowrapper">
<iframe src="https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="sw_header-rechts">
<h4>The other content <br/> The other contentblock</h4></div>
</header>
But I do now get the problem of not being able to fit the video 100% to the container, like a background-size:cover; would do. Which values would I need for the video to be
- 100% height of the container
- proportionally correct scaling of the width
- alignment left top without any black backgrounds
- so that as a result of most device dimensions the videos width will be cropped.
Thanks for your answers!
Add this in your CSS :
iframe{
width: 100% !important;
height: 100% !important;
}
I'm having a small css issue with a basic html layout .
What is want is this : (without content)
http://jsfiddle.net/cge89ef4/1/
With content : http://jsfiddle.net/cge89ef4/2/
As you can see , the footer remains stuck and does not go to the bottom of the page as i want it too.
CSS :
body {
background-color: blue;
color:red;
margin: 75px auto 50px;
height:100%;
}
div#fixedheader {
position:absolute;
top:0px;
left:0px;
width:100%;
height:75px;
background:yellow;
}
div#fixedfooter {
position:absolute;
bottom:0px;
height:50px;
left:0px;
width:100%;
background:black;
}
Any way to fix it ?
Thanks
UPDATE
I have changed the DOM to HTML5 Tags for Header and Footer , I have also added a little JavaScript that reacts to the window resizing.
So IF your window height is more than the document height the footer is positioned absolute to the bottom, IF not the footer is positioned FIXED above the content
Also if you scroll down and the header is not visible any more it becomes fixed above the content as well
http://jsfiddle.net/cge89ef4/8/
UPDATE END
Here http://jsfiddle.net/cge89ef4/3/
change absolute to fixed for footer
position:fixed;
If you dont want the footer to overlap your content at any time you should add a margin or padding bottom to the content container with the height of the footer.
In addition you could look intho HTML5 tags , because there are already preset tag names for header, footer etc
For exampe:
<header></header>
<article><section></section></article>
<aside></aside>
<footer></footer>
use this styling for your body
body{
position: relative;
margin: 0;
}
Just make sure you give position: fixed to header and if you want the footer not to be fixed all the time, use a min-height.
body {
background-color: blue;
color: red;
margin: 75px auto 50px;
height: 100%;
}
div#fixedheader {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 75px;
background: yellow;
}
div#fixedfooter {
position: fixed;
bottom: 0px;
height: 50px;
left: 0px;
width: 100%;
background: black;
}
Fiddle: http://jsbin.com/behajakuse/1/edit?html,css,output
have the body position: relative;
I am trying to make the container occupy the complete height of the desktop screen.
I can set the height of the divs to some pixels and occupy reasonable height.
But if viewed on large screens, the bottom of the container is visible, which is empty space.
Can I make the container occupy the complete height for all screens?
What you need is a sticky footer.
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
Read about it here. here's a demo.
Is this what you want?
<html>
<head>
<style>
html, body, div {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div {
display: block;
}
</style>
</head>
<body>
<div>Full screen size</div>
</body>
</html>
Yes, you can make sure its position is relative to the parent element and give all its parents a height of 100 %. Try this
html, body{
height:100%;
position:relative;
margin:0;
display:block;
}
.mydiv{
height:100%;
position:relative;
background:red;
display:block;
}
In IE if you do not assign to all parents a height of 100% the child div may not have a full height..
I don't know if it is what you need: fiddle
html,
body {
border: none;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
div {
height: 100%;
}
And HTML:
<div>Hello</div>
You can use CSS viewport units such as vh and vw to define dimensions in relation to the viewport size:
div {
height: 100vh;
}
means "make the div 100% the height of the viewport".
body {
margin: 0;
}
main {
width: 50%;
height: 100vh;
background-color: aliceblue;
}
<main>
</main>
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.