I have a iframe on my page. I have inserted a background image on it. but its not showing the Image. Here is my code.
<iframe scrolling="auto" allowtransparency="true" name="main" style="width:100%;height:90%" style="background-image:url(img/bg2.jpg)"> </iframe>
Try this:
<iframe scrolling="auto" allowtransparency="true" name="main" style="width:100%;height:90%;background-image:url(img/bg2.jpg)"> </iframe>
if it doesn't work move the background images to the container of the iframe.
Wrap your iframe with div and put it some class.
Ex:
<div class="wrap">
<iframe style="display:none" width="325" height="276" frameborder="0" scrolling="auto"></iframe>
</div>
in css:
.wrap{background:url(somepicture);}
.wrap iframe{opacity:0;}
Try this .. it should work(tested in IE/Firefox/Google Crome)
<div><img src="a.JPG"></div>
<div>
<iframe style="display:none" width="325" height="276" frameborder="0" scrolling="auto"></iframe>
</div>
Related
Can anyone say why this is wrong? I thought the yellow div would be across the whole page like the pink div. But when I look at it - no, the yellow div lines up under the image not the whole length.
<div style=width:100%;background:pink>
fjadlskjfdsf dslkfsda sdjkfh
</div>
<div style=width:100%;background:red>
<div style=width:60%;float:left>
<img src=Library_left.jpg width=100%>
</div>
<div style=width:40%;float:right>
<iFrame scrolling="no" frameborder="0" width="100%" height="100%" src="https://silib2.net/eResources/scripts/carousel/carousel.php"> </iFrame>
</div>
</div>
<div style=width:100%;background:yellow>
<h1 style=text-align:center>adslkjfasdlkjf</h1>
why is this div not wider?
</div>
( https://silib2.net/eResources/scripts/carousel/form.htm )
It is probably something stupid?
Please Try This:-
<div style=width:100%;background:pink>
fjadlskjfdsf dslkfsda sdjkfh
</div>
<div style="width:100%;background:red; clear: both; overflow: hidden;">
<div style=width:60%;float:left>
<img src=Library_left.jpg width=100%>
</div>
<div style=width:40%;float:right>
<iFrame scrolling="no" frameborder="0" width="100%" height="100%" src="https://silib2.net/eResources/scripts/carousel/carousel.php"> </iFrame>
</div>
</div>
<div style="width:100%;background:yellow; clear: both; overflow: hidden;">
<h1 style=text-align:center>adslkjfasdlkjf</h1>
why is this div not wider?
</div>
Static Height to Iframe May solve your issue
<iframe scrolling="no" frameborder="0" width="100%" height="165px" src="https://silib2.net/eResources/scripts/carousel/carousel.php"> </iframe>
You need to give your iframe a smaller height which would be approximately
height: 225px;
And you need to give the div that wraps it [one with red background on it]
clear:both; Overflow:hidden;
This is what i have, not sure why its not showing side by side. I've tried using float left, and tried using the bootstrap grid with no success. Thank you.
<div class="container">
<img src="placeholder" alt="picture of the band " width="500" height="300">
</div>
<div class="container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/placeholder" frameborder="0" allowfullscreen></iframe>
</div>
I just use this . It works.
.container{
float: left;
}
If you are using bootstrap replace container with any other class name and do float:left it works.
<style>
.classname{
float: left;
}
</style>
<div class="classname">
<img src="placeholder" alt="picture of the band " width="500" height="300">
</div>
<div class="classname">
<iframe width="560" height="315" src="https://www.youtube.com/embed/placeholder" frameborder="0" allowfullscreen></iframe>
</div>
whats wrong with this code? i cannot vertically center it using any style. I want it to use style attribut instead of modifying css.
<iframe src="https://www.facebook.com/plugins/like.php?href=https://www.facebook.com/KOMPAScom&layout=button" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:47px; height:20px"></iframe>
heres when i try style attribut:
<iframe style="display: inline-block; vertical-align: middle;" src="https://www.facebook.com/plugins/like.php?href=https://www.facebook.com/feednews.id&layout=button" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:47px; height:20px"></iframe>
<div id="d" style="position:relative;width:500px;height:500px;border:solid blue;">
<iframe style="position:relative;top:50%;left:50%;transform:translate(-50%,-50%);border:solid red;" src="https://www.facebook.com/plugins/like.php?href=https://www.facebook.com/feednews.id&layout=button" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden" id="fb"></iframe>
</div>
Wrap the iframe in a div and set the style with text-align:center.
<div style="width:100%;text-align:center">
<iframe src="about:blank" style="border:none; overflow:hidden; width:47px; height:20px;"></iframe>
</div>
Note that you also have two style statements in the same element. Only one of those will be taken into consideration.
I am trying to embed a YouTube video in an HTML page with an iframe. I am in doubts (the size is wrong). The link for the video: https://www.youtube.com/watch?v=EqQ6gy-tT9Y?autoplay=1
My html code :
<section id="test">
<div style="text-align: center;">
<iframe src="https://www.youtube.com/watch?v=EqQ6gy-tT9Y?
autoplay=1" width="420" height="315" align="center">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
</section>
You should have copied the embed code from youtube:
<iframe width="560" height="315" src="https://www.youtube.com/embed/EqQ6gy-tT9Y?autoplay=1" frameborder="0" allowfullscreen></iframe>
Note that the link is:
https://www.youtube.com/embed/EqQ6gy-tT9Y
and not
https://www.youtube.com/watch?v=EqQ6gy-tT9Y
Your code should be:
<section id="test">
<div style="text-align: center;">
<iframe src="https://www.youtube.com/embed/EqQ6gy-tT9Y?autoplay=1" width="420" height="315" align="center">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
</section>
Btw.: You had a line-break in the <iframe src=""> property, i dont know if you just did that for readability, but its causes problems, keep linebreaks outside of html element properties
I want to load 2 iframes in the same page. The first iframe loads normally but the second never loads(i tried a lot of urls and i tested in on safari, chrome, firefox, but nothing)
Here is the code
<div align="center">
<iframe src="http://www.google.com" height="50px" width="500px" frameborder="0" scrolling="no" id="iframeupload" name="frame1"/><br />
<iframe src="http://www.yahoo.com" name="frame2" width="500px" height="50px" scrolling="no" frameborder="0" id="iframedomain"/>
</div>
simple, Iframes should be closed like this:
<iframe src="http://www.google.com" height="50px" width="500px" frameborder="0"
scrolling="no" id="iframeupload" name="frame1"></iframe>
not like this:
<iframe src="http://www.google.com" height="50px" width="500px" frameborder="0"
scrolling="no" id="iframeupload" name="frame1" />