<iframe frameborder="0" style="height: 1800px; overflow:scroll; width: 100%" src="https://merch.streamelements.com/benjuna" marginheight="1" marginwidth="1" name="cboxmain" id="cboxmain" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
If I set the height to "auto" it only shows the top banner, if I lock it to a certain amount of pixels then the page does not work on smaller screens.
Any thoughts about this?
Here, this makes it take up the entire page you still have to scrol but it fills the page :
<iframe
style="
position:absolute;
top:0px;
left:0px;
width: 100%;
height: 100%; "
frameborder="0"
src="https://merch.streamelements.com/benjuna"
marginheight="1"
marginwidth="1"
name="cboxmain"
id="cboxmain"
seamless="seamless"
frameborder="0"
allowtransparency="true">
</iframe>
Related
I would like to have a footer in my page and I have the following code
<div class="container">
<div class="row">
<iframe id="iframe" width="100%" height="100%" src="http://www.selitera.com" style="border: 0; top:0; left:0; right:0; bottom:0; width:100%; height:100%" />
</div>
<div class="row">
Some footer text
</div>
</div>
html,
body {
margin: 0;
padding: 0;
height: 100%;
overflow: auto;
}
.container {
height: 100%;
width: 100%;
display: block;
}
https://jsfiddle.net/6fqcnmaj/
I would like to load my footer on the page always and have the available space for the iframe above the footer?
Any pointers to do this?
You have to add the closing </iframe> tag
https://jsfiddle.net/6fqcnmaj/1/
i have try to do some changes in your code and i found that when you added iframe tag it wasn't closed that's why your footer wasn't appearing. this is an example how we write Iframe tag. Have a look.
And i'm adding a solution screenshot. please have a look.
This image is a solution of your question please look at the red border in bottom right side.
I need to make a youtube iframe responsive and also that the iframe is left floating to add content to the right, I tried with this code but the iframe is not responsive?
Thanks.
The JSFiddle : http://jsfiddle.net/94150148/vh04d7y2/
.videoWrapper {
position: relative;
padding-bottom: 51.44%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.box1 {
float:left;
width: 400px
}
<div class="box1">
<div class="videoWrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/6apL89xgbR0"
frameborder="0" allowfullscreen></iframe></div></div>
<div class="box2">Some text</div>
I will suggest to use Bootstrap for making embedded videos responsive which are added through iframe, following is the code which you can use to make the iframe responsive
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
But make sure to add bootstrap.css and and other bootstrap dependencies.
All you need is max-width:
.left {max-width: 400px;}
I would be really, really happy if someone could help me with removing the click (link) option from this iframe. I just want the image to be not clickable.
<iframe src="http://snapwidget.com/in/?u=bW9sbGVrcnVrbWFrZXJpfGlufDI1MHwxfDF8fG5vfDB8bm9uZXxvblN0YXJ0fG5vfG5v&ve=120215" title="Instagram Widget" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:200px; height:200px"></iframe>
You can put a transparent div in front of the iframe.
.iframeContainer{
position:relative;
border:1px solid;
width:200px;
height:200px;
}
.iframeBlocker{
position:absolute;
width:100%;
height:100%;
background:#000;
opacity:0.5;
}
<div class="iframeContainer">
<div class="iframeBlocker"></div>
<iframe src="http://snapwidget.com/in/?u=bW9sbGVrcnVrbWFrZXJpfGlufDI1MHwxfDF8fG5vfDB8bm9uZXxvblN0YXJ0fG5vfG5v&ve=120215" title="Instagram Widget" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:200px; height:200px"></iframe>
</div>
I'm using boostrap 3, I'm trying to embed a presentation on the page. Its not the only element on the page. There are many other rows above & below this:
<div class="row">
<div id="iframecontainter" class="col-lg-6 col-md-6 col-sm-offset-1 col-md-offset-1">
<iframe src="http://docs.google.com/gview?url=http://example.com/presenation.ppt&embedded=true" frameborder="0"></iframe>
</div> <!-- #iframecontainter -->
</div> <!-- .row -->
& css:
iframe{
width:100%
}
Above codes are taking care of width as I want. But its the height that is causing the problem. Is there a way I can set height: %of available screen size? or otherwise what is the solution?
Try this -
html, body{ height: 100%; }
.row, #iframecontainter{height: 100%; }
iframe{
height:80%; border: 1px solid red;
}
Fiddle
Using javascript to assign a height of iframe tag.
<script type="text/javascript">
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('the_iframe').contentWindow.
document.body.scrollHeight;
//change the height of the iframe
document.getElementById('the_iframe').height= the_height;
}
</script>
<iframe width="100%" src="./1BA3A.mht" scrolling="no" id="the_iframe" onLoad="calcHeight();" height="1px" frameborder="0" ></iframe>
Thanks.
I have a problem trying to move div's on the page based on the screen size..
I have got my pages (code as per below) displaying the width correctly but can't seem to get the height correct when the user re-sizes the page.
What I am trying to do is..
have a header that is displayed across the top
a page on the left which will have a menu in it
a page to the right that will display the page text
a footer across the bottom
My pages looks like this below:
index.htm:
<style type="text/css">
body{
margin:0;
padding:0px;
line-height: 1.5em;
padding-bottom:10px; /* Height of the footer */
}
#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}
</style>
<!-- top -->
<div id="topsection">
<div>
This is the top
</div>
</div>
<!-- Left side -->
<div ID="left" STYLE="width:260px; left:0px; height:90%; float:left;">
<iframe src="test.htm" NAME="menu" width="270px" height="100%" frameborder="0"></iframe>
</div>
<!-- right side -->
<div ID="right" STYLE="height:90%; left:0px; float:left;">
<iframe src="test1.htm" NAME="right" width="100%" height="100%" frameborder="0"></iframe>
</div>
<!-- footer -->
<div ID="foot" STYLE="height:10%; left:0px; top:90%; float:left;">
<iframe src="foot.htm" NAME="footer" width="100%" height="100%" frameborder="0"></iframe>
</div>
test.htm:
<body bgcolor="#808080">
test1.htm:
<body bgcolor="#88888888">
right side text
foot.htm:
<body bgcolor="#9999999">
This is a footer
Your Header:
#topsection{
position:absolute;
}
Your footer:
#foot{
position:absolute;
}
you should use absolute I think
Here is some more info about the position 'tag' in css
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
do this for top bar and footer.
hope might work in your case.
#topsection{
position:fixed;
................
}
#foot{
position:fixed;
................
}
This is exactly what you ak for. Fixed header and footer