Video from youtube in iframe doesn't work - html

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>

Related

How to place videos in a grid

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;
}

how can I have space between my word and div?

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.

How to automatically adjust size of 2 side-by-side iframe using a this ratio?

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

How do I display and centre align my responsive youtube videos properly?

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>

In css, the #media doesn't effect ID elements

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?