I would like to use an iFrame in the Content-DIV to avoid loading the navigation all the time.
Is it possible to include an iFrame there whichs is fullheight/fullwidth inside the second DIV?
<div style="position:fixed;width:190px;height:1500px;background:#951b24;float:left;z-index:1000;padding:25px>
Navigation
</div>
<div style="position:absolute;top:25px;left:265px;width:auto;height:auto">
Content
</div>
Did you mean that?
<div style="position:fixed;width:190px;height:1500px;background:#951b24;float:left;z-index:1000;padding:25px">
Navigation
</div>
<div style="position:absolute;top:25px;left:265px;width:calc(100% - 265px);height:100%;">
<iframe style="width: 100%; height: 100%;" src="https://www.youtube.com/embed/yfoY53QXEnI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
Related
I want to create a video archive that would look something like
The videos take up 32% of the width each and have a gap of 50. The css code will also be below. My problem is that while I can make one row look like this, when I paste another row below it, it just all goes in the same row and the second group of 3 videos are squished together. I was wondering if there is a way that this can be fixed.
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>
</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;
}
Using CSS grid layout this should be quite strait forward.
Then use nth child to target certain rows for the shorter height in your example.
Here's an example from your code. For clarity, I've replaced the videos with just divs, but the concept is exactly the same.
.videos {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem;
padding: 0.5rem;
border: 1px dashed blue;
}
.video {
min-height: 6rem;
border: 1px dashed red;
}
.video:nth-child(4n),
.video:nth-child(5n),
.video:nth-child(6n) {
min-height: 3rem;
border: 1px dashed orange;
}
<div class="videos">
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
</div>
Explanation
You haven't close <div class="videos1">.
Solution
Add </div> at the end of the HTML code you posted and you will be ready to cope paste it as many times as you like.
<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>
</div> <!-- here -->
You have to add flex-wrap: wrap, moreover gap: 50 doesnt have unities, you have to especify unities for example gap: 10px
Bonus
I also recommend using 'calc' when calculating the width, this way you don't have to use 'justify-content', you just have to calculate the space you want minus the 'gap' width: calc(33.33333% - 10px);
.videos1 {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.video1 {
width: calc(33.33333% - 10px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color:#f1f1f1;
}
I have this code:
There are two side-by-side iframes with the ratio shown in the link, I want it to keep that ratio in any screen size.
The first iframe is iframe2 and the second iframe is iframe 1.
<div class="box">
<iframe allow="camera; microphone; fullscreen; display-capture; autoplay" src="source 1"
style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1"
marginheight="0px" marginwidth="0px" height="600px" width="300px" align="right"
allowfullscreen> </iframe>
</div>
<div class="box">
<iframe src="source 2" style="border:0px #ffffff none;" name="myiFrame" scrolling="no"
frameborder="1" marginheight="0px" marginwidth="350px" height="600px" width="1033px"
allowfullscreen></iframe>
</div>
[The ratio should also look like this no matter what the screen size is 1]
[1]: https://i.stack.imgur.com/H7D81.png
How to automatically adjust size of 2 side-by-side iframe using a this ratio?
I know a little about the CSS and i tried to use it but the iframes size not adjusting instead become a small square, whenever I tried to use the methods given from other questions
Can anyone help?
Try This
.box {
position: relative;
float: left;
padding-bottom: 38%;
border: 5px solid #fff;
box-sizing: border-box;
width: 70%;
}
.box.box2 {
width: 30%;
}
.box iframe {
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 100%;
}
<div class="box">
<iframe width="1280" height="720" src="https://www.youtube.com/embed/9xwazD5SyVg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="box box2">
<iframe width="1280" height="720" src="https://www.youtube.com/embed/9xwazD5SyVg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
try using the aspect-ratio property in css... like this:
iframe {aspect-ratio: 1/1;}
And one more thing. It's better to do the styling in a separate css file rather than inline styling
This question already has answers here:
How to center an iframe horizontally?
(13 answers)
Closed 3 years ago.
I am trying to center the YouTube video but am having trouble. Here is the code.
<div class="video">
<iframe width="560" height="315" align="middle" padding-bottom=0px left=40px src="https://www.youtube.com/embed/lHv3i9-2a0s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
You can find the files (html and css) at the repository below.
https://github.com/t0091/bootstrap/tree/master/home
You can set iframe as
iframe{
margin:0 auto;
display:block;
}
iframe{
margin:0 auto;
display:block;
}
<div class="video">
<iframe width="560" height="315" align="middle" padding-bottom=0px left=40px src="https://www.youtube.com/embed/lHv3i9-2a0s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
I have 4 items in a flex container. I want 3 each row. I want the container centered-- by centering the container with justify-content the 4th item in the 2nd row was also centered. So I used a ::after trick to try to correct it, but now the 2nd row is not aligned with the 1st row.
The problem, as I see it, is that the flex container is taking more width than the content items forcing me to center it with justify-content which is causing this issue.
Could this be easier using grid? if so how? I want a simple centered grid of iframe youtube videos, 3 per row with the last row aligned left.
https://codepen.io/k4ir0s/pen/RdeejK
.section-vids ul {
list-style: none;
margin:0;
padding:0;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.section-vids ul li {
padding: 20px;
}
.section-vids ul:after {
content: "";
flex: auto;
}
<div class="container" id="media">
<section class="section-vids">
<ul>
<li><iframe width="560" height="315" src="https://www.youtube.com/embed/G1FFWgzk4vI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></li>
<li><iframe width="560" height="315" src="https://www.youtube.com/embed/G1FFWgzk4vI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></li>
<li><iframe width="560" height="315" src="https://www.youtube.com/embed/G1FFWgzk4vI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></li>
<li><iframe width="560" height="315" src="https://www.youtube.com/embed/G1FFWgzk4vI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></li>
</ul>
</section>
</div>
justify-content: center; does not center the container, it centers the items inside of it. If you remove that from your CSS for the ul, I'm seeing exactly what I believe you are describing. You could alternatively use justify-content: space-between; or justify-content: space-evenly; for similar results.
If you're having issues with it overflowing horizontally (which you shouldn't be) then you can set max-width: 100%; on the ul and that should be resolved. The trick with the ::after pseudo element is unneeded.
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.