I'm trying to centrally align my responsive, embedded youtube videos and display them properly between the head and footer navigations. At the moment it will not display all 3 of the videos and they won't align properly. To see the whole entire code please visit this link: my website video page
Here is the main video coding I have tried:
.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:29.24%;
height:auto;
}
<center>
<strong><br />
<p></p>
<div class="video-container"><iframe width="560" height="315"
src="https://www.youtube.com/embed/iydTzl6adLs" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
<p></p>
<div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/fjZ5ZLWbu50" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
<p></p>
<div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/d8JOqV3Ql-w" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
<p></p>
</strong></center>
you need to assign css property for the video containers.
.video-container {
width: 500px;
margin: auto;
text-align: center;
position: relative;
}
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 100px;
left: 0;
width: 100%;
height: auto;
margin: auto;
}
<center>
<strong><br />
<p></p>
<div class="video-container"><iframe width="560" height="315"
src="https://www.youtube.com/embed/iydTzl6adLs" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
<p></p>
<div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/fjZ5ZLWbu50" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
<p></p>
<div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/d8JOqV3Ql-w" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
<p></p>
</strong>
</center>
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
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?
I have to put video on website.I put video links from youtube on my website. I use iframe. And don't see any video. I see only screen with names of videos, but not a video.I use links which youtube gives. What can be a problem? Should I use something more in my code? I have to add something in meta to use iframe?
.central-container{
margin-left: 18.75%;
margin-right: 18.75%;
height: 100%;
}
.container-for-all-videos{
width: 100%;
height: 100%;
margin-top: 30px;
}
.container-for-video{
margin: 10px;
width: 46%;
min-width: 250px;
}
.container-for-video h4{
margin-top: 10px;
text-align: center;
}
#media (min-width: 978px){
.container-for-video:nth-child(odd){
float: left;
}
.container-for-video:nth-child(even){
float: right;
}
}
#media (min-width: 440px){
.bottom-info-container{
margin: 50px auto 150px auto;
}
}
#media (max-width: 978px){
.container-for-video{
margin-left: auto;
margin-right: auto;
}
}
<div class="central-container">
<div class="container-for-all-videos">
<div class="container-for-video">
<iframe src="https://www.youtube.com/watch?v=_N1z37KqpCc" width="100%" height="auto" frameborder="0" allowfullscreen>
</iframe>
<h4>ד"ר אלדר על ניתוחים בריאטריים</h4>
</div>
<div class="container-for-video">
<iframe src="https://www.youtube.com/watch?v=rAwB17JTIgs" width="100%" height="auto" frameborder="0" allowfullscreen>
</iframe>
<h4>ד"ר אלדר מתארח אצל אלונה פרידמן על ניתוחים בריאטריים</h4>
</div>
<div class="container-for-video">
<iframe src="https://www.youtube.com/watch?v=PMHpU-f3Kzo" width="100%" height="auto" frameborder="0" allowfullscreen>
</iframe>
<h4>ניתוח שרוול קיבה ע"י ד"ר אלדר</h4>
</div>
<div class="container-for-video">
<iframe src="https://www.youtube.com/watch?v=0ij0poiNEvw" width="100%" height="auto" frameborder="0" allowfullscreen>
</iframe>
<h4>ראיון נוסף של ד"ר אלדר אצל אלונה פרידמן</h4>
</div>
<div class="container-for-video">
<iframe src="https://www.youtube.com/watch?v=rfF-1tyG_uI&t=21s" width="100%" height="auto" frameborder="0" allowfullscreen>
</iframe>
<h4>ד"ר אלדר על תוצאות ארוכות טווח של ניתוחים בריאטריים</h4>
</div>
<div class="container-for-video">
<iframe src="https://www.youtube.com/watch?v=_N1z37KqpCc" width="100%" height="auto" frameborder="0" allowfullscreen>
</iframe>
<h4>ד"ר אלדר על ניתוחים בריאטריים</h4>
</div>
</div>
You have to go to youtube.com and click share then embed and copy the iframe source without doing it, it wont work as youtube as iframe block
.central-container{
margin-left: 18.75%;
margin-right: 18.75%;
height: 100%;
}
.container-for-all-videos{
width: 100%;
height: 100%;
margin-top: 30px;
}
.container-for-video{
margin: 10px;
width: 46%;
min-width: 250px;
}
.container-for-video h4{
margin-top: 10px;
text-align: center;
}
#media (min-width: 978px){
.container-for-video:nth-child(odd){
float: left;
}
.container-for-video:nth-child(even){
float: right;
}
}
#media (min-width: 440px){
.bottom-info-container{
margin: 50px auto 150px auto;
}
}
#media (max-width: 978px){
.container-for-video{
margin-left: auto;
margin-right: auto;
}
}
<div class="central-container">
<div class="container-for-all-videos">
<div class="container-for-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/rAwB17JTIgs" frameborder="0" allowfullscreen></iframe>
<h4>ד"ר אלדר על ניתוחים בריאטריים</h4>
</div>
<div class="container-for-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/rAwB17JTIgs" frameborder="0" allowfullscreen></iframe>
<h4>ד"ר אלדר מתארח אצל אלונה פרידמן על ניתוחים בריאטריים</h4>
</div>
<div class="container-for-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/rAwB17JTIgs" frameborder="0" allowfullscreen></iframe>
<h4>ניתוח שרוול קיבה ע"י ד"ר אלדר</h4>
</div>
<div class="container-for-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/rAwB17JTIgs" frameborder="0" allowfullscreen></iframe>
<h4>ראיון נוסף של ד"ר אלדר אצל אלונה פרידמן</h4>
</div>
<div class="container-for-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/rAwB17JTIgs" frameborder="0" allowfullscreen></iframe>
<h4>ד"ר אלדר על תוצאות ארוכות טווח של ניתוחים בריאטריים</h4>
</div>
<div class="container-for-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/rAwB17JTIgs" frameborder="0" allowfullscreen></iframe>
<h4>ד"ר אלדר על ניתוחים בריאטריים</h4>
</div>
</div>
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.