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" />
Related
I am wondering how to make videos horizontally aligned so that they are side to side on the page. Here is what I'm trying to achieve richtechservice.weebly.com/intro.html . As you can see they are centered and put side to side. How do i do that?
<hr>
<div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/czpFFcw6Yfk" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/r2u2FS-gWmo" frameborder="0" allowfullscreen></iframe>
<div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/MvjlUrWo1KQ" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/F8qDtzlkFws" frameborder="0" allowfullscreen></iframe>
</div>
Put them inside a <TABLE>, all in the same <TR>
Probably need to put each in its own <IFRAME>
[EDIT]
<table> <tr>
<td><iframe width="560" height="315" src="https://www.youtube.com/embed/czpFFcw6Yfk" frameborder="0" allowfullscreen></iframe></td>
<td><iframe width="560" height="315" src="https://www.youtube.com/embed/r2u2FS-gWmo" frameborder="0" allowfullscreen></iframe> </td>
<td><iframe width="560" height="315" src="https://www.youtube.com/embed/MvjlUrWo1KQ" frameborder="0" allowfullscreen></iframe></td>
</tr></table>
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 am writing a website as a collection of all my stuff (blog posts, YouTube vids etc.) and want to have a page of YouTube embeds. I want to have two columns of embeds, but cant figure out how to. If I edit the css and make the certain bits float to the correct side, it changes nothing. This is what my edited css looks like:
div.leftBodyVideo{
width: 45%;
float: left;
}
div.rightBodyVideo{
width: 45%;
float: right;
}
I then changed the html to align the correct tags right, but that didn't work either. it put the iframes that are meant to be right aligned in a weird position:
https://lh3.googleusercontent.com/-sur00UJ5A2c/Vb-7rkMrGlI/AAAAAAAAAHk/ZO3CpEcpoQ4/w426-h237/Capture.PNG
Here is the html:
<div id="leftBodyVideo">
<h5>Pyraminx ao12 16 46</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/XDN9BXLFGhg" frameborder="0" allowfullscreen></iframe>
<br><h5>TheCubicle.US | Yuxin 4x4 + ShengShou pyraminx</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/vEkiT62B-nE" frameborder="0" allowfullscreen></iframe>
<br><h5>Tutorial - sl1pg8r symbol with a cube</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/2f7xz6ym__0" frameborder="0" allowfullscreen></iframe>
</div>
<div id="rightBodyVideo">
<h5 align="right">Lubing DaYan ZhanChi Cube</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ydg0APsB7IU" frameborder="0" align="right" allowfullscreen></iframe>
<br><h5 align="right">Cubing - 2x2 ao5 36.9</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ydg0APsB7IU" frameborder="0" align="right" allowfullscreen></iframe>
<br><h5 align="right">Mindcuber Demo and Explaination</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/oEIMf1JdyDc" frameborder="0" align="right" allowfullscreen></iframe>
</div>
How can I fix this and get them aligned in 2 columns?
Thanks!
It looks like what you're trying to do is going to turn out looking sort of like a table layout, so try using divs with display: table, display: table-row, and display: table-cell.
Then you can use CSS to further style the cells, giving them padding and text-align if you so desire.
LIVE EXAMPLE - be sure to click "full page" after you run this snippet so you can see what I mean:
#table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
padding: 20px;
}
<div id="table">
<div class="row">
<div class="cell">
<h5>Pyraminx ao12 16 46</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/XDN9BXLFGhg" frameborder="0" allowfullscreen></iframe>
</div>
<div class="cell">
<h5 align="right">Lubing DaYan ZhanChi Cube</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ydg0APsB7IU" frameborder="0" align="right" allowfullscreen></iframe>
</div>
</div>
<div class="row">
<div class="cell">
<h5>TheCubicle.US | Yuxin 4x4 + ShengShou pyraminx</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/vEkiT62B-nE" frameborder="0" allowfullscreen></iframe>
</div>
<div class="cell">
<h5 align="right">Cubing - 2x2 ao5 36.9</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ydg0APsB7IU" frameborder="0" align="right" allowfullscreen></iframe>
</div>
</div>
<div class="row">
<div class="cell">
<h5>Tutorial - sl1pg8r symbol with a cube</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/2f7xz6ym__0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="cell">
<h5 align="right">Mindcuber Demo and Explaination</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/oEIMf1JdyDc" frameborder="0" align="right" allowfullscreen></iframe>
</div>
</div>
</div>
You are using id's in your HTML but then using class selectors in your CSS so your styles are never applied.
Please try:
#leftBodyVideo{
width: 45%;
display: inline-block;
}
#rightBodyVideo{
width: 45%;
display: inline-block;
}
<div id="leftBodyVideo">
<h5>Pyraminx ao12 16 46</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/XDN9BXLFGhg" frameborder="0" allowfullscreen></iframe>
<br><h5>TheCubicle.US | Yuxin 4x4 + ShengShou pyraminx</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/vEkiT62B-nE" frameborder="0" allowfullscreen></iframe>
<br><h5>Tutorial - sl1pg8r symbol with a cube</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/2f7xz6ym__0" frameborder="0" allowfullscreen></iframe>
</div>
<div id="rightBodyVideo">
<h5>Lubing DaYan ZhanChi Cube</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ydg0APsB7IU" frameborder="0" allowfullscreen></iframe>
<br><h5>Cubing - 2x2 ao5 36.9</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ydg0APsB7IU" frameborder="0" allowfullscreen></iframe>
<br><h5>Mindcuber Demo and Explaination</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/oEIMf1JdyDc" frameborder="0" allowfullscreen></iframe>
</div>
See fiddle here.
I'd like to place an image under my iframe, but i've pieced together some code and it doesn't appear to be exactly right. The iframe contains text and has a transparent background. Can you help me out? thanks,
<td width="216" style="position: relative;">
<img src="http://southwestarkansasradio.com/images/onair995.jpg"></a><br>
<img src="http://southwestarkansasradio.com/images/playerbackground.jpg" style="z-index: -1"/>
<div style="absolute;left:0px;top:0px;font-size: 32px;display: none">
<iframe name="I1" width="316" height="216" src="http://southwestarkansasradio.com /NowPlaying.html" border="0" frameborder="0" allowTransparency="true">
Your browser does not support inline frames.</iframe>
</div>
</td>
<img src="http://southwestarkansasradio.com/images/onair995.jpg"></a><br>
<img src="http://southwestarkansasradio.com/images/playerbackground.jpg" style="z-index: -1"/>
<div style="position:absolute;left:0px;top:0px;font-size: 32px">
<iframe width="316" height="216" src="http://southwestarkansasradio.com/NowPlaying.html" border="0" frameborder="0" allowTransparency="true">
Your browser does not support inline frames.</iframe>
</div>
You have 'display:none' on the div tag that contains the iframe. I tested the above code and it works as you have explained is should.
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>