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>
Related
I am trying to place 6 videos in a grid with 2 rows with 3 videos per row. I am able to do this with one row but cannot seem to find a way to do it with 2.
My current code for the videos is:
<div class="videos1">
<div class="video1">
<iframe width="560" height="315" src="video" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>
<div class="caption" style="color:#ffffff">
Coming Soon!
</div>
</div>
<div class="video1">
<iframe width="560" height="315" src="video" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <br>
<div class="caption" style="color:#ffffff">
Coming Soon!
</div>
</div>
<div class="video1">
<iframe width="560" height="315" src="video" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>
<div class="caption" style="color:#ffffff">
Coming Soon!
</div>
</div>
My css code is:
.videos1 {
display: flex;
justify-content: space-around;
gap: 50;
}
.video1 {
width: 32%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Thank you!
You should use css grids.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas: ". . ." ". . .";
}
.container > div {
background-color: lime;
}
div:nth-child(2n) {
background-color: chocolate;
}
<div class="container">
<div>video 1</div>
<div>video 2</div>
<div>video 3</div>
<div>video 4</div>
<div>video 5</div>
<div>video 6</div>
</div>
Try the original grid: a table -- but not exactly a <table>. For a layout solution <table> and table tags (<tr>, <th>, <td>, etc.) are discouraged for many reasons, but other tags that are assigned CSS property display with the values of table, table-row, table-cell, etc. are considered valid and acceptable (see Figure I and this article).
Figure I
HTML Tag
CSS
table
display: table
tr
display: table-row
thead
display: table-header-group
tbody
display: table-row-group
tfoot
display: table-footer-group
col
display: table-column
colgroup
display: table-column-group
td, th
display: table-cell
caption
display: table-caption
Here's a simple example using semantic tags
/* Behave like a real <table> */
main {
display: table;
margin: 20px auto;
}
/* Behave like a real <tr> */
section {
display: table-row;
}
/* Behave like a real <td> */
figure {
display: table-cell;
}
/* Not required (optional) */
figcaption {
text-align: center;
}
<main>
<section>
<figure>
<iframe src="https://bestvpn.org/html5demos/assets/dizzy.mp4" width="160" height="90"></iframe>
<figcaption>Dizzy</figcaption>
</figure>
<figure>
<iframe src="https://bestvpn.org/html5demos/assets/dizzy.mp4" width="160" height="90"></iframe>
<figcaption>Dizzy</figcaption>
</figure>
<figure>
<iframe src="https://bestvpn.org/html5demos/assets/dizzy.mp4" width="160" height="90"></iframe>
<figcaption>Dizzy</figcaption>
</figure>
</section>
<section>
<figure>
<iframe src="https://bestvpn.org/html5demos/assets/dizzy.mp4" width="160" height="90"></iframe>
<figcaption>Dizzy</figcaption>
</figure>
<figure>
<iframe src="https://bestvpn.org/html5demos/assets/dizzy.mp4" width="160" height="90"></iframe>
<figcaption>Dizzy</figcaption>
</figure>
<figure>
<iframe src="https://bestvpn.org/html5demos/assets/dizzy.mp4" width="160" height="90"></iframe>
<figcaption>Dizzy</figcaption>
</figure>
</section>
</main>
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>
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 */
This question already has answers here:
How can I align two divs horizontally? [duplicate]
(10 answers)
Closed 4 years ago.
I'm having trouble trying to align two divs in a wordpress page. Here is my code:
div.container {
width: 100%;
}
div.left {
float: left;
}
div.right {
float: right;
}
<div class="container">
<div class="left">
<p id="cagliari" class="rtejustify" style="text-align: left;">Text Text Text</p>
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12364.675124477504!2d9.1242403!3d39.2163323!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xad759bffc1fbf334!2sItalSecurity+Agency+%7C+Agenzia+Investigativa!5e0!3m2!1sit!2sit!4v1469542451708" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
<div class="right">
<p id="oristano" class="rtejustify" style="text-align: left;">Text Text Text</p>
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3060.6645205664345!2d8.584972315150939!3d39.90414279457802!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12dd9be3f40242ad%3A0x11a591da0ed6a074!2sItal%40Security+Agency!5e0!3m2!1sit!2sit!4v1469543170307" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
</div>
But it doesn't works properly
Just use float: left and width 1/2 on both div
div.container {
width: 100%;
}
.div {
float: left;
width: 50%;
}
<div class="container">
<div class="div">
<p id="cagliari" class="rtejustify" style="text-align: left;">Text Text Text</p>
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12364.675124477504!2d9.1242403!3d39.2163323!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xad759bffc1fbf334!2sItalSecurity+Agency+%7C+Agenzia+Investigativa!5e0!3m2!1sit!2sit!4v1469542451708" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
<div class="div">
<p id="oristano" class="rtejustify" style="text-align: left;">Text Text Text</p>
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3060.6645205664345!2d8.584972315150939!3d39.90414279457802!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12dd9be3f40242ad%3A0x11a591da0ed6a074!2sItal%40Security+Agency!5e0!3m2!1sit!2sit!4v1469543170307" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
</div>
Blockquote
Give
**display:inline-block;
for both div elements
Try this, you need to assign width to both your .left and .right and even to iframes present insides those div.
body{
margin:0;
}
.container {
width: 100%;
}
.container > .left {
float: left;
width:49%;
height:auto;
}
.container > .right {
float:right;
width:49%;
height:auto;
margin-left:1%;
}
<div class="container">
<div class="left">
<p id="cagliari" class="rtejustify" style="text-align: left;">Text Text Text</p>
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12364.675124477504!2d9.1242403!3d39.2163323!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xad759bffc1fbf334!2sItalSecurity+Agency+%7C+Agenzia+Investigativa!5e0!3m2!1sit!2sit!4v1469542451708" width="100%" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
<div class="right">
<p id="oristano" class="rtejustify" style="text-align: left;">Text Text Text</p>
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3060.6645205664345!2d8.584972315150939!3d39.90414279457802!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12dd9be3f40242ad%3A0x11a591da0ed6a074!2sItal%40Security+Agency!5e0!3m2!1sit!2sit!4v1469543170307" width="100%" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
</div>
The best way to achieve this is using flex-box
flex-box also help you to achieve responsiveness also. I've added media-query of just one line to make it responsive on mobile screen. In mobile screen it will come like one below the other and in desktop it will come side by side (You can remove media-query if you dont want).
div.container {
display: flex;
}
.container div{
margin: 1em;
}
#media screen and (max-width: 480px){
div.container{
flex-direction: column;
}
}
<div class="container">
<div class="left">
<p id="cagliari" class="rtejustify" style="text-align: left;">Text Text Text</p>
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12364.675124477504!2d9.1242403!3d39.2163323!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xad759bffc1fbf334!2sItalSecurity+Agency+%7C+Agenzia+Investigativa!5e0!3m2!1sit!2sit!4v1469542451708" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
<div class="right">
<p id="oristano" class="rtejustify" style="text-align: left;">Text Text Text</p>
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3060.6645205664345!2d8.584972315150939!3d39.90414279457802!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12dd9be3f40242ad%3A0x11a591da0ed6a074!2sItal%40Security+Agency!5e0!3m2!1sit!2sit!4v1469543170307" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
</div>
Here is the updated Demo
try this
div.container {
width: 100%;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
div.right {
margin-left:10px;
}
<div class="container">
<div class="left">
<p id="cagliari" class="rtejustify" style="text-align: left;">Text Text Text</p>
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12364.675124477504!2d9.1242403!3d39.2163323!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xad759bffc1fbf334!2sItalSecurity+Agency+%7C+Agenzia+Investigativa!5e0!3m2!1sit!2sit!4v1469542451708" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
<div class="right">
<p id="oristano" class="rtejustify" style="text-align: left;">Text Text Text</p>
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3060.6645205664345!2d8.584972315150939!3d39.90414279457802!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12dd9be3f40242ad%3A0x11a591da0ed6a074!2sItal%40Security+Agency!5e0!3m2!1sit!2sit!4v1469543170307" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
</div>