Customizing the video popup

[glembymarcos]

Looks better in Notepad ++

So I added the code in their respective folders, CSS and JS custom files. I was not entirely sure where to add the HTML code you sent. I tried different alternatives. But this is my starting point: In the navigation bar there is a list and in there I have a logo. And the logo has a link to the modal.
Note: When I did the changes I managed to see the video, but it will show immediately as full screen, and the option of closing or stopping the video was not found.

Further down you have the example of the link for the modal. And how the modal is structured.

<li class="align-items-center d-none d-lg-flex order-4 px-5 mx-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="250">
														<span class="header-logo">
															<a href="#.html">
																<img alt="Byspeiderne - Demo Coffee" width="180" height="122" src="img/aurora.png" />
															</a>
														</span>
													</li>
												</ul>
											</nav>
										</div>



					<!-- Video One MODAL-->	

							<div class="modal fade" id="modalOne" tabindex="-1" role="dialog" aria-labelledby="videoOne" aria-hidden="true">
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header">
											<h4 class="modal-title" id="videoOne">Video en (Våre verdier)</h4>
											<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true">×</button>
										</div>
										<div class="modal-body">
											<div class="position-relative">
												<div class="ratio ratio-16x9">
													<video id="presentation" class="float-start" width="100%" height="100%" muted loop preload="metadata" poster="video/presentation.jpg">
														<source src="video/presentation.webm" type="video/webm">
														<source src="video/presentation.mp4" type="video/mp4">
													</video>
													<a href="#">
														<i class="fas fa-play text-5"></i>
													</a>
												</div>
											</div>
										<div class="modal-footer row justify-content-center text-center text-lg-start py-4">
										<p>This is where things are described as well as possible</P>
											<button type="button" class="btn btn-light" data-bs-dismiss="modal">Lukk</button>
										</div>
									</div>
								</div>
							</div>
							</div>

---

• This topic was modified 4 weeks, 1 day ago by Support.

[Support]

This reply has been marked as private.

[glembymarcos]

Thanks I managed to get it to work.
But there are few things I would like to adjust:
I would like the image to appear in the center covering a good portion of the screen. But not the whole screen. If people want they can enlarge it (full-screen).
When the video is present I would like the background to become more opaque, like a black overlay that has 50% opacity.
And lastly is a close button. It would be nice to have a button that allows you to stop the video/ close the video.

Reference in the attachment. Thanks!

---

[glembymarcos]

Here I found an example of how the video would look like. But my videos are not linking to YouTube, but to the web hotel.
https://preview.themeforest.net/item/bisy-online-courses-education-react-template/full_screen_preview/46885752

---

[Support]

Hello, you can add mas-width/height in that CSS and center the video. I used 800×600, but you can change that f you want. Also added the overlay and the close button.

CSS:

.custom-overlay{
     position: fixed;
     top:0px;
     left: 0px;
     height:100%;
     width:100%;
     z-index: 99999999;
     opacity:0.7;
     display:none;
}
 .custom-close{
     position: fixed;
     top:30px;
     right:30px;
     width:24px;
     height:24px;
     color: #FFF;
     font-size: 24px;
     z-index:99999999;
     display:none;
     cursor: pointer;
	 background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFF'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}
 .custom-main-vid-box{
     position: fixed;
     width: 100%;
     height:100vh;
     display:none;
     top:0px;
     left:0px;
     z-index: 99999999;
}
 .custom-video-wrapper {
     position: relative;
     z-index:99999999;
     background-color: rgba(0, 0, 0, 0.7);
     width:100%;
     height: 100%;
     margin:0 auto;
}
 .custom-video-wrapper video {
    position: relative;
    top: 50%;
    left: 50%;
    z-index: 99999999;
    width: 100% !important;
    height: 100% !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 40px;
    border-style: solid;
    border-color: transparent;
    transform: translate3d(-50%, -50%, 0);
    max-width: 800px;
    max-height: 600px;
}

---

[glembymarcos]

Perfect! Thank you so much!
At the moment the code looks something like this:

<span class="header-logo">
<a class="custom-video-link" href="#" data-video-url="https://www.w3schools.com/html/mov_bbb.mp4">
<img class="scale-4" alt="Byspeiderne - Demo Coffee" width="180" height="122" data-sticky-width="82" data-sticky-height="40" data-sticky-top="72" src="img/aurora.png"></a>
</span>

My question. How do I link the video to the following:

<source src=”../videos/ByspeiderneWeb.mp4″ type=”video/mp4″>
?

---

[Support]

This reply has been marked as private.

[glembymarcos]

Excellent, thank you so much.
But one last thing. I noticed that when I see the website from the phone the name “Byspeiderne” is too large so you can not really read the text. And the hamburger menu disappeared.

Any idea on how to fix that?

---

[Support]

This reply has been marked as private.

[Author]

Posts