How can I show Facebook link in a grid? - html

Question

I need help with this <iframe>, I can't insert into the grid layout. I can insert the <iframe> to every part of the website except this grid layout.
Thank you for any help.
.lluncamp2 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 30px;
}
.lluncamp2 img {
object-fit: cover;
width: 100%;
max-height: 200px;
}
<div class="lluncamp2">
<div>
<ul>Laundry room-
<li>Coin operated Washing machine</li>
<li>Tumble dryer</li>
<li>FREE Fridge/ Freezer</li>
<li>Shaving and electricity points</li>
</ul>
</div>
<div>
<iframe src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2
F%2Fwww.facebook.com%2Fkosmic.suture%2Fvideos%2F1936825236449065%2F&show_text=false&width=560" max-width="560" max-height="314" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write;
encrypted-media; picture-in-picture; web-share" allowFullScreen="true"></iframe></div>
<div>Ample field space to enjoy and play</div>
<div>Chemical disposal point</div>
<div>FREE hot water in both the showers and dishwashing room</div>
<div>Coin operated launderette</div>
</div>

Answer 1

If that is your actual HTML, then the problem is the line break on your src attribute of the iframe tag. It runs fine for me if I change your iframe to:
.lluncamp2 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 30px;
}
.lluncamp2 img {
object-fit: cover;
width: 100%;
max-height: 200px;
}
<div class="lluncamp2">
<div>
<ul>Laundry room-
<li>Coin operated Washing machine</li>
<li>Tumble dryer</li>
<li>FREE Fridge/ Freezer</li>
<li>Shaving and electricity points</li>
</ul>
</div>
<div>
<iframe src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2Fkosmic.suture%2Fvideos%2F1936825236449065%2F&show_text=false&width=560" max-width="560" max-height="314" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write;
encrypted-media; picture-in-picture; web-share" allowFullScreen="true"></iframe></div>
<div>Ample field space to enjoy and play</div>
<div>Chemical disposal point</div>
<div>FREE hot water in both the showers and dishwashing room</div>
<div>Coin operated launderette</div>
</div>