how can I have space between my word and div? - html

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.

Related

Need help making videos appear in a grid

I am trying to place 6 videos in a grid with 2 rows with 3 videos per row. I am able to do this with one row but cannot seem to find a way to do it with 2.
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>
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;
}
Thank you!

You should use css grids.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas: ". . ." ". . .";
}
.container > div {
background-color: lime;
}
div:nth-child(2n) {
background-color: chocolate;
}
<div class="container">
<div>video 1</div>
<div>video 2</div>
<div>video 3</div>
<div>video 4</div>
<div>video 5</div>
<div>video 6</div>
</div>

Try the original grid: a table -- but not exactly a <table>. For a layout solution <table> and table tags (<tr>, <th>, <td>, etc.) are discouraged for many reasons, but other tags that are assigned CSS property display with the values of table, table-row, table-cell, etc. are considered valid and acceptable (see Figure I and this article).
Figure I
HTML Tag
CSS
table
display: table
tr
display: table-row
thead
display: table-header-group
tbody
display: table-row-group
tfoot
display: table-footer-group
col
display: table-column
colgroup
display: table-column-group
td, th
display: table-cell
caption
display: table-caption
Here's a simple example using semantic tags
/* Behave like a real <table> */
main {
display: table;
margin: 20px auto;
}
/* Behave like a real <tr> */
section {
display: table-row;
}
/* Behave like a real <td> */
figure {
display: table-cell;
}
/* Not required (optional) */
figcaption {
text-align: center;
}
<main>
<section>
<figure>
<iframe src="https://bestvpn.org/html5demos/assets/dizzy.mp4" width="160" height="90"></iframe>
<figcaption>Dizzy</figcaption>
</figure>
<figure>
<iframe src="https://bestvpn.org/html5demos/assets/dizzy.mp4" width="160" height="90"></iframe>
<figcaption>Dizzy</figcaption>
</figure>
<figure>
<iframe src="https://bestvpn.org/html5demos/assets/dizzy.mp4" width="160" height="90"></iframe>
<figcaption>Dizzy</figcaption>
</figure>
</section>
<section>
<figure>
<iframe src="https://bestvpn.org/html5demos/assets/dizzy.mp4" width="160" height="90"></iframe>
<figcaption>Dizzy</figcaption>
</figure>
<figure>
<iframe src="https://bestvpn.org/html5demos/assets/dizzy.mp4" width="160" height="90"></iframe>
<figcaption>Dizzy</figcaption>
</figure>
<figure>
<iframe src="https://bestvpn.org/html5demos/assets/dizzy.mp4" width="160" height="90"></iframe>
<figcaption>Dizzy</figcaption>
</figure>
</section>
</main>

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 do I center my embedded youtube iframe?

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.

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?

Video from youtube in iframe doesn't work

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>