Known Participant

Answered

How do I position an iframe in a bootstrap 5 Grid-layout?

Forum|Forum|2 years ago
August 7, 2023
5 replies
8989 views

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>

code-test-video-page.pdf

This topic has been closed for replies.

Correct answer osgood_

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.

BenPleysier

Community Expert

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.

<!doctype html>
<html lang="en-AU">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Untitled Document</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
    <style>
        .video-item {
            display: block;
            position: relative;
        }

        .video-item .btn {
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -40px;
            margin-top: -30px;
            z-index: 840;
            outline: 0 !important;
        }

        svg.btn-youtube {
            fill: var(--bs-danger);
            fill-opacity: 0.85;
            color: var(--bs-light);
            width: 55px;
            height: 40px;
        }

        svg.btn-youtube:hover {
            fill: var(--bs-primary);
            fill-opacity: 1;
        }

        svg .image {
            fill: currentColor;
        }
    </style>
</head>

<body>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
        <defs>
            <symbol id="icon-video" viewBox="0 0 1024 721">
                <title>YouTube Play Button</title>
                <path class="button" d="M1023.6,361.5c0,24.5,0.9,49-0.2,73.5c-1.7,36.6-4.7,73.1-7.3,109.6c-2,28.9-8.5,56.9-19.3,83.8 c-18.2,45.4-52.8,70.6-100,78.3c-23.1,3.8-46.7,4.9-70.1,6.1c-41.1,2.1-82.2,3.5-123.3,5c-22.1,0.8-44.3,1.1-66.4,1.5 c-42.3,0.6-84.6,1.5-126.9,1.3c-46.1-0.1-92.3-1-138.4-1.9c-36.6-0.7-73.2-1.6-109.9-3c-30.8-1.2-61.6-2.4-92.2-5 c-19-1.6-38.1-4.6-56.6-9.3c-43-11.1-71.6-38.4-86-80.7c-8.9-26-14.7-52.5-16.6-79.9c-2.5-35.4-5.8-70.7-6.7-106.1 C2.5,389.7,2.8,344.9,3.3,300c0.5-48,4-95.8,10.1-143.4c3.3-25.8,10.5-50.9,22.3-74.2c18.4-36.2,48.9-57,87.9-65 c17.2-3.5,34.9-4.9,52.5-5.9c38.2-2.2,76.5-3.9,114.7-5.2c32.9-1.2,65.9-1.7,98.9-2.3c25.6-0.5,51.3-0.8,76.9-1 c24.3-0.2,48.6-0.5,73-0.5c30.3,0.1,60.6,0.5,90.9,1c28.6,0.5,57.3,1,85.9,2c44.6,1.7,89.2,3.5,133.7,5.9 c21.2,1.1,42.7,2.1,63.2,8.2c44.1,13.2,73,41.9,87.5,85.7c8.8,26.7,14.1,54,15.9,82c2.2,34.2,5,68.4,6.5,102.7 C1024.5,313.8,1023.7,337.6,1023.6,361.5C1023.6,361.5,1023.6,361.5,1023.6,361.5z M408.2,494c92.1-47.8,183.5-95.1,275.9-143 c-92.5-48.3-183.9-96-275.9-144C408.2,303,408.2,397.9,408.2,494z">
                </path>
                <path class="image" d="M408.2,494c0-96.1,0-191,0-287c92,48,183.4,95.7,275.9,144C591.6,398.9,500.3,446.3,408.2,494z" fill="white"></path>
            </symbol>
        </defs>
    </svg>
    <div class="container">
        <div class="row row-cols-2">
            <div class="col">
                <div class="card bg-transparent shadow">
                    <div class="video-item">
                        <img class="card-img-top" alt="The Grumpy Bloke" src="https://i.ytimg.com/vi/N_dq3SBz2ls/maxresdefault.jpg">
                        <button type="button" class="btn p-0" data-bs-toggle="modal" data-bs-target="#mdlVideo" data-bs-video="N_dq3SBz2ls" aria-label="Play Video">
                            <svg class="btn-youtube">
                                <use xlink:href="#icon-video"></use>
                            </svg>
                            <span class="visually-hidden">2. The Grumpy Bloke</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- MODAL FOR VIDEO -->
    <div class="modal fade" id="mdlVideo" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" is="dmx-bs5-modal">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="ratio ratio-16x9">
                        <iframe title="YouTube video" allowfullscreen=""></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var videoModal = document.getElementById('mdlVideo')
            videoModal.addEventListener('show.bs.modal', function (event) {
            // Button that triggered the modal
            var button = event.relatedTarget
            // Extract info from data-bs-* attributes
            var video = button.getAttribute('data-bs-video')
            // Update the modal's content.
            var modalBodyIframe = videoModal.querySelector('.modal-body iframe')
    
            modalBodyIframe.src='https://www.youtube.com/embed/' + video + '?rel=0'
        })
    	// Stop the video playing when modal is closed
        videoModal.addEventListener('hidden.bs.modal', function (event) {
            videoModal.querySelector('.modal-body iframe').src=''
        })
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
</body>

</html>

To add another video, simply add the following code snippet

            <div class="col">
                <div class="card bg-transparent shadow">
                    <div class="video-item">
                        <img class="card-img-top" alt="The Grumpy Bloke" src="https://i.ytimg.com/vi/N_dq3SBz2ls/maxresdefault.jpg">
                        <button type="button" class="btn p-0" data-bs-toggle="modal" data-bs-target="#mdlVideo" data-bs-video="N_dq3SBz2ls" aria-label="Play Video">
                            <svg class="btn-youtube">
                                <use xlink:href="#icon-video"></use>
                            </svg>
                            <span class="visually-hidden">2. The Grumpy Bloke</span>
                        </button>
                    </div>
                </div>
            </div>

To change the video, all that is required is to change the video ID, in this case it is the `N_dq3SBz2ls`

I have produced a tutorial which uses a different IDE

https://youtu.be/lqZqOapCxiQ

(Wappler hoofdkwartier is in Enschede)

OT: Vrouwen WK 2023 - finale: Ned - Aus (mijn voorspelling)

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

osgood_

Brainiac

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.

BenPleysier

Community Expert

That is exactly what I have done as you can see here: wappler-youtube-player - npm (npmjs.com)

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Nancy OShea

Community Expert

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.

<div class="ratio ratio-16x9">
  <h3>Aspect Ratio 16:9</h3>
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

It's important your code classes match the version of Bootstrap you're referencing or it doesn't work right.

Nancy O'Shea— Product User, Community Expert & Moderator

osgood_

Brainiac

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.

Nancy OShea

Community Expert

The topic as written is ambiguous.

I don't know if the OP means Bootstrap version 5, grid layout.

Or Bootstrap, 5-grid layout.

Not knowing which version they're using puts us at a disadvantage. We may never know for sure as most people who post questions here don't respond unless they need more help.

Nancy O'Shea— Product User, Community Expert & Moderator

Nancy OShea

Community Expert

Use the built-in Bootstrap video embed classes to maintain responsive aspect ratio.

Below is an example with YouTube videos in <iframes>.

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap Responsive Video Examples</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="jumbotron mx-auto">
<h2>Bootstrap 4 in Dreamweaver</h2>
<p>Responsive video deomonstration.  This uses YouTube in <iframe> but any MP4 video will work. </p>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<h2>Aspect ratio 1:1</h2>
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
<div class="col-lg-6">
<h2>Aspect ratio 4:3</h2>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-6">
<h2>Aspect ratio 16:9</h2>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
<div class="col-lg-6">
<h2>Aspect ratio 21:9</h2>
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
</div>
<hr>
<div class="row">
<footer>Footer goes here.... </footer>
</div>
</div>

<!--First jQuery then Popper then Bootstrap JS--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

Hope that helps. Post back if have any questions.

Nancy O'Shea— Product User, Community Expert & Moderator

edinav24550678Author

Known Participant

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.

osgood_

Brainiac

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.

kglad

Community Expert

in the future, to find the best place to post your message, use the list here, https://community.adobe.com/

p.s. i don't think the adobe website, and forums in particular, are easy to navigate, so don't spend a lot of time searching that forum list. do your best and we'll move the post if it helps you get responses.

<"moved from using the community">

kglad

Community Expert

what adobe app (or service)?

edinav24550678Author

Known Participant

Sorry, should have looked better! it's Dreamweaver CC.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded