I am wondering how to make videos horizontally aligned so that they are side to side on the page. Here is what I'm trying to achieve richtechservice.weebly.com/intro.html . As you can see they are centered and put side to side. How do i do that?
<hr>
<div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/czpFFcw6Yfk" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/r2u2FS-gWmo" frameborder="0" allowfullscreen></iframe>
<div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/MvjlUrWo1KQ" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/F8qDtzlkFws" frameborder="0" allowfullscreen></iframe>
</div>
Put them inside a <TABLE>, all in the same <TR>
Probably need to put each in its own <IFRAME>
[EDIT]
<table> <tr>
<td><iframe width="560" height="315" src="https://www.youtube.com/embed/czpFFcw6Yfk" frameborder="0" allowfullscreen></iframe></td>
<td><iframe width="560" height="315" src="https://www.youtube.com/embed/r2u2FS-gWmo" frameborder="0" allowfullscreen></iframe> </td>
<td><iframe width="560" height="315" src="https://www.youtube.com/embed/MvjlUrWo1KQ" frameborder="0" allowfullscreen></iframe></td>
</tr></table>
Related
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'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>
I am trying to embed a YouTube video in an HTML page with an iframe. I am in doubts (the size is wrong). The link for the video: https://www.youtube.com/watch?v=EqQ6gy-tT9Y?autoplay=1
My html code :
<section id="test">
<div style="text-align: center;">
<iframe src="https://www.youtube.com/watch?v=EqQ6gy-tT9Y?
autoplay=1" width="420" height="315" align="center">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
</section>
You should have copied the embed code from youtube:
<iframe width="560" height="315" src="https://www.youtube.com/embed/EqQ6gy-tT9Y?autoplay=1" frameborder="0" allowfullscreen></iframe>
Note that the link is:
https://www.youtube.com/embed/EqQ6gy-tT9Y
and not
https://www.youtube.com/watch?v=EqQ6gy-tT9Y
Your code should be:
<section id="test">
<div style="text-align: center;">
<iframe src="https://www.youtube.com/embed/EqQ6gy-tT9Y?autoplay=1" width="420" height="315" align="center">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
</section>
Btw.: You had a line-break in the <iframe src=""> property, i dont know if you just did that for readability, but its causes problems, keep linebreaks outside of html element properties
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.