I am working on a product landing page project and I can't figure out how to center the iframe youtube embedded video. I am trying to add this in my .css
I have tried using margin: auto auto auto auto; and am a bit stuck, thanks...
header{
text-align: center;
font-family: serif;
font-size: 50px;
margin-top: 30px;
}
#header-img{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}
#header{
}
#video{
margin: auto auto auto auto;
}
<body>
<header id="header">SCHIFRIN'S SPROCKETS
<nav id:="nav-bar">
<ul>
<li><a class="nav-link" href="#">LINK 1</a></li>
<li><a class="nav-link" href="#">LINK 2</a></li>
<li><a class="nav-link" href="#">LINK 3</a></li>
</ul>
</nav>
</header>
<img src="./logo.png" alt="" id="header-img">
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/M-MKbRSSHG8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
#wrapper {
text-align:center;
}
#video{
margin: auto;
}
<div id="wrapper">
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/M-MKbRSSHG8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
Wrap the iframe in a div
<div class="frame">
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/M-MKbRSSHG8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
and add css flexbox to that div
.frame{
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
}
just ajust width and height, you can remove them if you dont need them also.
This should be perfectly centered withing x and y axis
You can wrap your iframe in a div, and text-align: center that div to center the contents. Works well for adding a centered title to the youtube iframe as well.
And in case you want to embed multiple iframes on the page, you should use a class attribute instead of an id attribute.
.videoWrapper{
text-align: center;
}
<div class="videoWrapper">
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/M-MKbRSSHG8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
There are many ways in which you can achieve this. In my opinion, flexbox is the solution.
header{
text-align: center;
font-family: serif;
font-size: 50px;
margin-top: 30px;
}
#header-img{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}
#header{
}
.flex{
display: flex;
justify-content: center;
}
<header id="header">SCHIFRIN'S SPROCKETS
<nav id:="nav-bar">
<ul>
<li><a class="nav-link" href="#">LINK 1</a></li>
<li><a class="nav-link" href="#">LINK 2</a></li>
<li><a class="nav-link" href="#">LINK 3</a></li>
</ul>
</nav>
</header>
<img src="./logo.png" alt="" id="header-img">
<div class="flex">
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/M-MKbRSSHG8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
Wrap the iframe in a div and set its display property to flex.
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 some logos and videos in an iframe.
I'm trying to get a space between my logos and my 3D word so I have to get a space between my div logos and my div videos3D.
Here's my codepen : https://codepen.io/Softee/pen/eYeMNBZ
.logos_container {
text-align: center;
margin-left: 85px;
}
.logos_container h1 {
margin-right: 100px;
margin-bottom: 45px;
font-size: 54px;
color: #dba974;
}
.logos {
float: left;
margin-right: 20px;
padding: 25px;
width: 20%;
}
.logos img {
border-radius: 5px;
opacity: 0.8;
width: 80%;
cursor: pointer;
}
.logos img:hover {
opacity: 1;
}
/*-----------3D-----------*/
.logos3d_container {
text-align: center;
margin-left: 25px;
margin-top: 150px;
}
.logos3d_container h1 {
margin-right: 100px;
margin-bottom: 45px;
font-size: 54px;
color: #dba974;
}
.logos3d_img {
float: left;
margin-right: 20px;
padding: 25px;
width: 29.4%;
}
.logos3d_img iframe {
border-radius: 5px;
opacity: 0.8;
width: 100%;
}
.logos3d_img iframe:hover {
opacity: 1;
}
<div class="logos_container" id="portfolio">
<h1>LOGOS</h1>
<div class="logos">
<img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 1">
</div>
<div class="logos">
<img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 2">
</div>
<div class="logos">
<img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 3">
</div>
<div class="logos">
<img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 4">
</div>
<div class="logos">
<img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 5">
</div>
<div class="logos">
<img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 6">
</div>
<div class="logos">
<img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 7">
</div>
<div class="logos">
<img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 8">
</div>
</div>
<div class="logos3d_container" id="portfolio">
<h1>3D</h1>
<div class="logos3d_img">
<iframe width="560" height="315" src="https://www.youtube.com/embed/gcH-IaC0150" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="logos3d_img">
<iframe width="560" height="315" src="https://www.youtube.com/embed/gcH-IaC0150" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="logos3d_img">
<iframe width="560" height="315" src="https://www.youtube.com/embed/gcH-IaC0150" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
Here goes HTML
<div class="container">
<div class="logos_container" id="portfolio">
<h1>LOGOS</h1>
<div class="logos">
<img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 1">
</div>
<div class="logos">
<img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 2">
</div>
<div class="logos">
<img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 3">
</div>
<div class="logos">
<img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 4">
</div>
<div class="logos">
<img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 5">
</div>
<div class="logos">
<img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 6">
</div>
<div class="logos">
<img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 7">
</div>
<div class="logos">
<img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 8">
</div>
</div>
<div class="logos3d_container" id="portfolio">
<h1>3D</h1>
<div class="logos3d_img">
<iframe width="560" height="315" src="https://www.youtube.com/embed/gcH-IaC0150" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="logos3d_img">
<iframe width="560" height="315" src="https://www.youtube.com/embed/gcH-IaC0150" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="logos3d_img">
<iframe width="560" height="315" src="https://www.youtube.com/embed/gcH-IaC0150" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
Here is CSS
.logos_container{
text-align: center;
margin-left: 85px;
}
.logos_container h1{
margin-right: 100px;
margin-bottom: 45px;
font-size: 54px;
color: #dba974;
}
.logos {
float: left;
margin-right: 20px;
padding: 25px;
width: 20%;
}
.logos img {
border-radius: 5px;
opacity: 0.8;
width: 80%;
cursor: pointer;
}
.logos img:hover {
opacity: 1;
}
/*-----------3D-----------*/
.logos3d_container{
text-align: center;
margin-left: 25px;
margin-top: 23px; /* add your required margin */
}
.logos3d_container h1{
margin-right: 100px;
font-size: 54px;
color: #dba974;
}
.logos3d_img {
float: left;
margin-right: 20px;
padding: 25px;
width: 29.4%;
}
.logos3d_img iframe {
border-radius: 5px;
opacity: 0.8;
width: 100%;
}
.logos3d_img iframe:hover {
opacity: 1;
}
.container{
display:flex;
flex-direction: column;
}
I have added flexbox to main container and added both div in that container. So that they will have equal space. Flex box direction is column and now you can give margin-top to "logos3d_container" which will give you in between space.
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
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'm building a website for a doctor, and he has some videos in YouTube he wanted me to add to his page. now it was really difficult for me to arrange the <frame> element properly so on mobile devices it would look good. I discovered the #media line in css, and I put all the frames I wanted to move in a div with an ID so on device all these frames would align vertically and on desktop view it would look horizontal.
**#div-frame {
** position: relative;
padding-top: 60px;
padding-right: 69%;
bottom: 1140px;
margin-bottom: -1250px;
line-height: 140px;
}
#media only screen and (max-width: 1024px) {
.div-frame {
position: relative;
padding-top: 60px;
line-height: 140px;
}
.footer {
padding-top: 50px;
padding-bottom: 50px;
background: #00ff21;
}
}
<section id="about" class="sections3" style="padding-top:150px; padding-bottom:300px; margin-top: 0px ;">
<div class="container">
<div class="row">
<div class="about-wrapper">
<div class="col-s-9" style="">
<h4 style="font-size:30px;" dir="rtl">
סרטוני הסברה של ד"ר רם ירון
</h4>
<div class="about-content text-right">
<div class="about-photo">
<iframe width="560" height="315" src="https://www.youtube.com/embed/u07pee-IsgI" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
<div class="about-photo" style="position: relative; padding-top:60px; ">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ZTtNxfluyRo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class="about-photo" style="position: relative; padding-top:60px; ">
<iframe width="560" height="315" src="https://www.youtube.com/embed/LvPLpGe2qCw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class="div-frame">
<iframe width="560" height="315" src="https://www.youtube.com/embed/VonyJSD8yVA" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/upEUJkur7Co" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/jjtBwdPusa8" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
The css^ (the footer does work)
The id I'm trying to implement the change called id:"div-frame"
It's not repetitive (as I tried to change it to class as well.)
What can I do?