Dear all,
Currently I'm working on a (try-out) page with videos. I have two videos next to each other in an iframe, but I cannot position them properly. I want them evenly divided on the screen, not right next to each other, leaving the right side of the screen emtpy. I've searched the internet for solution and tried several, but nothing worked out properly.
What properties can I add to the iframes besides margin:auto and display:block to center them horizontally in their column? They are responsive.
Here's a screen-image of the page:
Here's the css-code:
iframe {
margin: auto;
display: block;
}
video {
width: 90%;
height: auto;
display: block;
margin-right: auto;
margin-left: auto;
border: thin solid hsla(0,0%,0%,1.00);And the html:
<div class="row main">
<div class="row">
<div class="col-md-6 justify-center">
<div class="embed-responsive embed-responsive-4by3"><iframe class="embed-responsive-item" src="https://www.youtube.com/embed/EBcL7xK7JUQ"></iframe>
</div>
<figcaption>
<p>Presentatie Dickens in de Lage Landen, 4 februari 2012<br>
in Trou moet Blijcken, Haarlem (1)</p>
</figcaption>
</div>
<div class="col-md-6 justify-items-center">
<div class="embed-responsive embed-responsive-4by3"><iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tLB6ryTsQos"></iframe>
</div>
<figcaption>
<p>Presentatie Dickens in de Lage Landen, 4 februari 2012<br>
in Trou moet Blijcken, Haarlem (2)</p>
</figcaption>
</div>
</div>
<div class="row">
<div class="col-md-6">
<video class="embed-responsive-4by3" title="Vertelster" controls="controls" >
<source src="../10.mp4" type="video/mp4">
</video>
<figcaption>
<p>Dit is het bijschrift</p>
</figcaption><br>
</div>
<div class="col-md-6">
<video controls class="embed-responsive-item">
<source src="../10.mp4" type="video/mp4">
</video>
<figcaption>
<p>Dit is het bijschrift</p>
</figcaption><br>
</div>
</div>
</div>
1 Correct answer
...Dear Osgood,
I've applied your code-snippets and the big advantage is the YT-video's aren't so small anymore. Yet they still are not evenly divided over the page, they are justified to the left, leaving a gap at the right side. What properties or class do I havo to add to "iframe' (op perhaps the row-column?) to get the desired result?
By @edinav24550678
It's difficult to know what you are doing or not, can you post the complete pages code plus any custom css you are using other than the default B
39
Replies
I made a new html-page with your code, looks like it comes from W3 Schools-site (they use the same video). But I see no solution for positioning the iframes evenly.
By @edinav24550678
Who are you responding to, Nancy or myself, _osgood? Did you see the code l recently posted? I don't recall posting any code which references the website you mention so maybe it's not me you're responding to.
To clarify an important point, Bootstrap 5 uses different classes from versions 3 & 4.
https://getbootstrap.com/docs/5.0/helpers/ratio/
So if you're actually using Bootstrap version 5, use the .ratio classes instead of .embed-responsive classes.
It's important your code classes match the version of Bootstrap you're referencing or it doesn't work right.
By @Nancy OShea
I'm not even sure the videos themselves need to be responsive they currently look very small to me but I guess v5 is being used as it says that in the post title:
'How do I position an iframe in a bootstrap 5 Grid-layout?'
Anyway the relevant question about the videos themselves being distributed evenly across the browser window horizontally, rather than side by side to the left, well the code posted by the OP works for me, so maybe something else is on the OPs page which is causing the issue.
We may never know for sure as most people who post questions here don't respond unless they need more help.
By @Nancy OShea
Maybe, as an aside note which moderator deleted my response showing a couple of code examples which would have resolved the OPs question?
The question here was......'how do l distribute the videos evenly across the width of the browser window'. With all due respect yourself and Ben seem to be providing a completely different answer to the one asked. Not that they are unwelcome of course but the fix for the OP was simple and that post has for some curious reason been deleted.............hummmm.
Dear Osgood,
The entire code of the whole page can be found in the attached pdf-file, maybe you can find the mistake that is stopping the 2 upper videos from displaying evenly across the window width. By the way, I do think the videos are indeed too small, but I don't know how to fix this wihtout giving them a fixed hight or width, which will delete responsiveness.
I use Chrome, Safari , Firefox and sometimes Opera to test html-pages. Thus far I detected no difference between them with the test-video page.
Your deleted post can still be found in my e-mail.
Regards,
Edina
By @edinav24550678
See if the below code snippet works for you, it uses Bootstrap 4.4.1 same version as you are using. Its ONLY the video section, but I think its how you want it to be laid out?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Video</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.container-fluid {
width: 90%;
}
video {
width: 100%;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="container-fluid m-auto">
<div class="row">
<div class="col-md-6">
<figure>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/EBcL7xK7JUQ"></iframe>
</div>
<figcaption>
<p class="text-center">Presentatie Dickens in de Lage Landen, 4 februari 2012 in Trou moet Blijcken, Haarlem (1)</p>
</figcaption>
</figure>
</div>
<!-- end col-md-6 -->
<div class="col-md-6">
<figure>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tLB6ryTsQos"></iframe>
</div>
<figcaption>
<p class="text-center">Presentatie Dickens in de Lage Landen, 4 februari 2012 in Trou moet Blijcken, Haarlem (2)</p>
</figcaption>
</figure>
</div>
<!-- end col-md-6 -->
<div class="col-md-6 text-center">
<figure>
<video class="embed-responsive-4by3" title="Vertelster" controls="controls">
<source src="../10.mp4" type="video/mp4">
</video>
<figcaption>
<p class="text-center">Dit is het bijschrift</p>
</figcaption>
</figure>
</div>
<!-- end col-md-6 -->
<div class="col-md-6 text-center">
<figure>
<video class="embed-responsive-4by3" title="Vertelster" controls="controls">
<source src="../10.mp4" type="video/mp4">
</video>
<figcaption>
<p class="text-center">Dit is het bijschrift</p>
</figcaption>
</figure>
</div>
<!-- end col-md-6 -->
</div>
<!-- end row -->
</div>
<!-- end container-fluid -->
</body>
</html>
Dear Osgood,
I've applied your code-snippets and the big advantage is the YT-video's aren't so small anymore. Yet they still are not evenly divided over the page, they are justified to the left, leaving a gap at the right side. What properties or class do I havo to add to "iframe' (op perhaps the row-column?) to get the desired result?
Dear Osgood,
I've applied your code-snippets and the big advantage is the YT-video's aren't so small anymore. Yet they still are not evenly divided over the page, they are justified to the left, leaving a gap at the right side. What properties or class do I havo to add to "iframe' (op perhaps the row-column?) to get the desired result?
By @edinav24550678
It's difficult to know what you are doing or not, can you post the complete pages code plus any custom css you are using other than the default Bootstrap 4 css, preferably in a new thread as this one is getting a bit lengthy now and hard to follow or better still upload the page/css to your remote server and provide a link to the page. Once l have the whole code at my disposal l will be able better to see first hand what's wrong.
Dear Osgood,
I've applied your code-snippets and the big advantage is the YT-video's aren't so small anymore. Yet they still are not evenly divided over the page, they are justified to the left, leaving a gap at the right side. What properties or class do I havo to add to "iframe' (op perhaps the row-column?) to get the desired result?
By @edinav24550678
It's difficult to know what you are doing or not, can you post the complete pages code plus any custom css you are using other than the default Bootstrap 4 css, preferably in a new thread as this one is getting a bit lengthy now and hard to follow or better still upload the page/css to your remote server and provide a link to the page. Once l have the whole code at my disposal l will be able better to see first hand what's wrong.
By @osgood_
I hope that the pdf-files of my html-page and my custom stylehsheet attached here will be enough information for you.
I cannot yet upload the page to a remote server.
Dear Osgood,
I've applied your code-snippets and the big advantage is the YT-video's aren't so small anymore. Yet they still are not evenly divided over the page, they are justified to the left, leaving a gap at the right side. What properties or class do I havo to add to "iframe' (op perhaps the row-column?) to get the desired result?
By @edinav24550678
It's difficult to know what you are doing or not, can you post the complete pages code plus any custom css you are using other than the default Bootstrap 4 css, preferably in a new thread as this one is getting a bit lengthy now and hard to follow or better still upload the page/css to your remote server and provide a link to the page. Once l have the whole code at my disposal l will be able better to see first hand what's wrong.
By @osgood_
I hope that the pdf-files of my html-page and my custom stylehsheet attached here will be enough information for you.
I cannot yet upload the page to a remote server.
By @edinav24550678
No pdfs aren't any good as they are static and meaningless. It's best to post the actual code here or link to the page on a remote server, if possible. That way we can see immediately the layout and even make adjustments using the browser tools. In my experience responders here won't download a pdf file and then attempt to grab the code its just way to much hassle.
As you can't yet upload to a remote then try posting the code, all of it, with all of your custom css if you are using any. Don't worry about the Bootstrap css and js as that is already linked or if it's not we can link to a cdn to get that.
Try creating another thread if you post as this one is way to long now and finding responses is getting difficult.
You are better off having the video play in a modal. That way you are ensured that not two videos are playing at the same time. Copy the following code and paste it in a new document to see the result.
By @BenPleysier
Seems reasonable but it could have been done with way less code using a vanilla javascript component, the only real good use l've personally found to date for using a component is handing it off to a less experienced developer where they would only need to change a couple of attributes in a custom tag.
AdChoices