I am trying to have a youtube video side by side with some text. My HTML is the following (http://jsfiddle.net/N5j7L/):
<div style="width: 100%; display: table;">
<div style="display: table-row">
<div style="width: 600px; display: table-cell;">
something</br>
something</br>
something</br>
something</br>
something</br>
something</br>
</div>
<div style="display: table-cell;">
<iframe width="480" height="360" src="http://www.youtube.com/embed/gDNsePOQVzU&list=UUoUXxtd712vGe5p5lBk_eMg?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
I do not understand why the first column starts lower than the second one. Should I add something to CSS? Without iframe everything looks good.
Try this (added vertical-align:top for the left column):
<div style="width: 100%; display: table;">
<div style="display: table-row">
<div style="width: 600px; display: table-cell; vertical-align:top;">
something<br/>
something<br/>
something<br/>
something<br/>
something<br/>
something<br/>
</div>
<div style="display: table-cell;">
<iframe width="480" height="360" src="http://www.youtube.com/embed/gDNsePOQVzU&list=UUoUXxtd712vGe5p5lBk_eMg?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
You can directly use a table. If it isn't a restriction, then the following works.
<table cellpadding="15">
<tr>
<td>
<iframe width="480" height="360" src="http://www.youtube.com/embed/gDNsePOQVzU&list=UUoUXxtd712vGe5p5lBk_eMg?rel=0" frameborder="0" allowfullscreen></iframe><br/>
Video 1
</td>
<td>
<iframe width="480" height="360" src="http://www.youtube.com/embed/gDNsePOQVzU&list=UUoUXxtd712vGe5p5lBk_eMg?rel=0" frameborder="0" allowfullscreen></iframe>
<br/>
Video 2
</td>
</tr>
</table>
See the updated fiddle http://jsfiddle.net/N5j7L/4/
I would do it with simple flow layout. Flow your description to the left. then set a margin to the iframe container as width as your text block:
<div style="overflow: auto;">
<div style="width: 100px; float: left;">
<!-- text -->
</div>
<div style="margin-left: 100px;">
<iframe ...></iframe>
</div>
</div>
example: http://jsfiddle.net/N5j7L/1/
Related
Hello Im trying to add a title under a video for a site I'm building. I using an iframe in a flex-box. I tried adding another flex-box with just text and I can align the text with the videos above. Im very new to all of this and after 2 hours of trying to figure it out I wanted to see if anyone can point me in the right direction maybe. Thanks,
.box-tricks {
display: flex;
flex-direction: row;
justify-content: space-around;
padding-top: 20px
}
<div class="box-tricks">
<iframe width="300" height="300" src="https://youtube.com/embed/BzGHbj7lquk"
frameborder="0" allowfullscreen>></iframe>
<iframe width="300" height="300" src="https://youtube.com/embed/DGBBkqamB80"
frameborder="0" allowfullscreen>></iframe>
<iframe width="300" height="300" src="https://youtube.com/embed/KRZtEXDeLVc"
frameborder="0" allowfullscreen>></iframe>
</div>
You should wrap each iframe tag inside another tag. Not only to put the title inside but to make your CSS cleaner.
TIP: Better for SEO if you make the tag with the title as h2 or `h3. Depends of the whole page tags order.
.box-tricks {
display: flex;
flex-direction: row;
justify-content: space-around;
padding-top: 20px
}
<div class="box-tricks">
<div class="iframe-wrapper">
<iframe width="300" height="300" src="https://youtube.com/embed/BzGHbj7lquk"
frameborder="0" allowfullscreen>></iframe>
<div class="iframe-wrapper__title">MY TITLE</div>
</div>
<div class="iframe-wrapper">
<iframe width="300" height="300" src="https://youtube.com/embed/BzGHbj7lquk"
frameborder="0" allowfullscreen>></iframe>
<div class="iframe-wrapper__title">MY TITLE</div>
</div>
<div class="iframe-wrapper">
<iframe width="300" height="300" src="https://youtube.com/embed/BzGHbj7lquk"
frameborder="0" allowfullscreen>></iframe>
<div class="iframe-wrapper__title">MY TITLE</div>
</div>
</div>
the right way is to create a wrapper div for iframes and put the title in the div element.
.box-tricks { display: flex; flex-direction: row; justify-content: space-around;
padding-top: 20px } .title { margin-top: 20px; text-align: center; }
<div class="box-tricks">
<div>
<iframe
width="300"
height="300"
src="https://youtube.com/embed/BzGHbj7lquk"
frameborder="0"
allowfullscreen
>></iframe
>
<div class="title">title</div>
</div>
<div>
<iframe
width="300"
height="300"
src="https://youtube.com/embed/DGBBkqamB80"
frameborder="0"
allowfullscreen
>></iframe
>
<div class="title">title</div>
</div>
<div>
<iframe
width="300"
height="300"
src="https://youtube.com/embed/KRZtEXDeLVc"
frameborder="0"
allowfullscreen
>></iframe
>
<div class="title">title</div>
</div>
</div>
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;
I have this code:
<div align="center">
<iframe scrolling="no" src="//blockadz.com/ads/show/show.php? a=6NJWBKLSGP8CY&b=OYEPEGYYZ996L" style="overflow:hidden;width:468px;height:60px;" frameborder="0"; padding- bottom: 20px; display:inline-block;></iframe>
</div>
<div style="text-align:center;">
Advertise in this spot
</div>
<div align="center">
<iframe scrolling="no" src="//blockadz.com/ads/show/show.php? a=6NJWBKLSGP8CY&b=OYEPEGYYZ996L" style="overflow:hidden;width:468px;height:60px;" frameborder="0"; padding- bottom: 20px; display:inline-block;></iframe>
</div>
<div style="text-align:center;">
Advertise in this spot
</div>
I want to show in the same row, but don't know how?
I tried adding: display:inline-block; and white-space: nowrap; but nothing changed.
Any help?
Try adding CSS float to your main divs
<div style="float:left;">
<div align="center">
<iframe bottom:="" frameborder="0" padding-="" scrolling="no" src="//blockadz.com/ads/show/show.php?%20a=6NJWBKLSGP8CY&b=OYEPEGYYZ996L" style="overflow:hidden;width:468px;height:60px;"></iframe>
</div>
<div style="text-align:center;">
Advertise in this spot
</div>
</div>
<div style="float:right;">
<div align="center">
<iframe bottom:="" frameborder="0" padding-="" scrolling="no" src="//blockadz.com/ads/show/show.php?%20a=6NJWBKLSGP8CY&b=OYEPEGYYZ996L" style="overflow:hidden;width:468px;height:60px;"></iframe>
</div>
<div style="text-align:center;">
Advertise in this spot
</div>
</div>
See in jsfiddle
Two divs with width 50%:
HTML
<div id="first_column">
<div align="center">
<iframe width="560" height="315" src="https://www.youtube.com/embed/CevxZvSJLk8" frameborder="0" allowfullscreen></iframe>
</div>
<div style="text-align:center;">
Advertise in this spot
</div>
</div>
<div id="second_column">
<div align="center">
<iframe width="560" height="315" src="https://www.youtube.com/embed/CevxZvSJLk8" frameborder="0" allowfullscreen></iframe>
</div>
<div style="text-align:center;">
Advertise in this spot
</div>
</div>
CSS
#first_column,
#second_column {
width: 50%;
}
#first_column {
float:left;
}
#first_column {
float:right;
}
Example:
http://codepen.io/anon/pen/vyWrbX
You have a couple of different issues going on here:
You have invalid markup on the iframes (some of your CSS is outside the "style" attribute so won't have any effect.)
Your "advertise in this spot" divs are full page width, which will interfere with the side-by-side layout you're attempting to apply to the iframes.
The simplest solution is to add parent containers to each set of iframe-plus-link, and apply the layout to those containers. For clarity here I've pulled your inline CSS out into class declarations, and changed the sizes to fit within the SO layout, but you can adjust this to whatever sizes and styles you like:
.container {
width: 200px;
display:inline-block;
}
iframe {
height: 100px;
width: 200px;
}
.ad {
text-align:center
}
<div class="container">
<iframe src="//example.com"></iframe>
<div class="ad">Advertise in this spot</div>
</div>
<div class="container">
<iframe src="//example.com"></iframe>
<div class="ad">Advertise in this spot</div>
</div>
Just add css to the siblings elements (in this case the parent <div> element) to make them show in the same line, like
div[align] { display: inline-block; }
or
div[align] { float: left; }
and define a width for them (if they are adapting to content width they can get on new line if too big)
div[align] { width: 50%; }
iframe { width: 100%; } /* or max-width */
I want them to align beside each other and I can't use table formatting
<div align=left><img src="../data/banner.png" alt="Logo" width="20%" height="100%"></div>
<iframe name="main_Frame" height="100%" width="80%" src="../data/home.htm" frameborder="0" align="right"></iframe>
<div style="width:20%; float:left;"><img src="../data/banner.png" width="100%" alt="Logo"></div>
<div style="width:80%; float:right;"><iframe name="main_Frame" src="../data/home.htm" frameborder="0" width="100%"></iframe></div>
This should get them to align horizontally, provided they won't inherit some other styling attributes.
If you are just starting out you should try thinking of sites as blocks of divs before anything else,
<div style="position:relative; overflow:auto;">
<div style = "width:20%; float:left;">
<a href="../data/home.htm" target="main_Frame">
<img src="../data/banner.png" alt="Logo"></a>
</div>
<div style = "width:80%; float:left;">
<iframe name="main_Frame" src="../data/home.htm" frameborder="0" align="right"></iframe>
</div>
</div>
I would recommend learning some CSS, here is a good: http://www.codecademy.com/tracks/web
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.