使用 FIXED Header / 页脚将响应视频添加到模态

Question

I created a Fixed header, and Fixed footer text modal, as well as a Fixed header, and Fixed footer video modal.我创建了一个固定 header 和固定页脚文本模式，以及一个固定 header 和固定页脚视频模式。 I Tested making videos Responsive.我测试过制作响应式视频。 However, the the bottom of responsive videos ends up going under the modal footer.但是，响应式视频的底部最终位于模态页脚下方。 So, currently I Don't have the video modal responsive.所以，目前我没有响应视频模式。 How can I get videos to display Responsive Without the fixed modal footer covering part of iFrame videos?!如果没有固定模态页脚覆盖 iFrame 视频的一部分，如何让视频显示响应式？！ Thanks!谢谢！

 // Open A Modal var modal = document.getElementsByClassName('modal'); // Get A Button That Opens A Modal var btn = document.getElementsByClassName("modal-open-buttons"); // Get A <span> Element That Closes A Modal var span = document.getElementsByClassName("close"); // When User Clicks A Modal Open Button, Open A Modal btn[0].onclick = function() { modal[0].style.display = "block"; } btn[1].onclick = function() { modal[1].style.display = "block"; } // When Users click On A Modal Close Button <span> (x), Close A Modal span[0].onclick = function() { modal[0].style.display = "none"; } span[1].onclick = function() { modal[1].style.display = "none"; } // When Users Click Anywhere Outside of a Modal, Close That Modal window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }

 /* The Modal (Background) */.modal { display: none; /* Hidden By Default */ position: fixed; /* Stay In Place */ z-index: 1; /* Sit On Top */ left: 0; top: 0; width: 100%; /* Full Width */ height: 100%; /* Full Height */ overflow-y: scroll; /* Enable Scroll If Feeded */ } /* Modal Content */.modal-content { font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bold; text-align: center; position: relative; background: #FFF; margin: 0 auto; padding-top: 90px; padding-bottom: 100px; border: 1px solid #C0C0C0; width: 100%; height: 100%; box-shadow1: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s } /* Add Animation */ @-webkit-keyframes animatetop { from {top:-300px; opacity:0} to {top:0; opacity:1} } @keyframes animatetop { from {top:-300px; opacity:0} to {top:0; opacity:1} }.modal-open-buttons { background: #FFF; color: #4169E1; border-color: #663399; width: 200px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bold; display: block; margin: 0 auto; } /* The Close Button */.modal-header.close { font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #663399; }.modal-header.close:hover, .modal-header.close:focus { color: #FFF; text-decoration: none; cursor: pointer; }.modal-header { font-family: Arial, Helvetica, sans-serif; font-weight: bold; background: #C0C0C0; color: #4169E1; position: fixed; top: 0; z-index: 9999; width: 100%; }.modal-header.left-column { float: left; font-size: 22px; text-align: center; background: #C0C0C0; width: 50%; padding-left: 10px; }.modal-header.right-column { float: right; font-size: 24px; background: #C0C0C0; padding-top: 10px; padding-right: 10px; }.modal-body { /* DON'T USE WIDTH FOR THE MODAL BODY:*/ font-family, Arial, Helvetica; sans-serif: font-size; 18px: font-weight; bold: text-align; center: color; #663399: padding-right; 5px: padding-left; 5px. }:modal-footer { font-family, Arial, Helvetica; sans-serif: font-size; 18px: font-weight; bold: text-align; center: background; #663399: color; #FFF: position; fixed: bottom; 0: z-index; 9999: width; 100%; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width; initial-scale=1"> <,-- The Above 3 Meta Tags MUST Come First In The Head; Any Other Head Content MUST Come AFTER These Tags --> <Title>MODALS</Title> </head> <body> <br><br> <,-- Trigger / Open A Modal --> <button class="modal-open-buttons">Open A<br>Text Modal</button> <,-- The Modal --> <div id="modal-01" class="modal"> <,-- Modal content --> <div class="modal-content"> <div class="modal-header"> <div class="columns left-column"> <p>THIS IS A TEXT MODAL HEADER</p> </div> <div class="columns right-column"> <span class="close">(X)</span> </div> </div> <div class="modal-body"> <p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER. &nbsp, MODALS CAN BE USED FOR TEXT; IMAGES, VIDEOS, FORMS, ETC,.</p> <p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER; &nbsp, MODALS CAN BE USED FOR TEXT, IMAGES, VIDEOS, FORMS. ETC,;</p> <p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER, &nbsp, MODALS CAN BE USED FOR TEXT, IMAGES. VIDEOS, FORMS; ETC,,</p> <p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER, &nbsp. MODALS CAN BE USED FOR TEXT, IMAGES; VIDEOS, FORMS, ETC,,</p> <p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER. AND A FIXED FOOTER, &nbsp; MODALS CAN BE USED FOR TEXT, IMAGES, VIDEOS, FORMS, ETC.,</p> <p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER; AND A FIXED FOOTER, &nbsp, MODALS CAN BE USED FOR TEXT, IMAGES, VIDEOS. FORMS, ETC;,</p> <p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER, &nbsp, MODALS CAN BE USED FOR TEXT. IMAGES, VIDEOS; FORMS, ETC,,</p> <p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER. &nbsp: MODALS CAN BE USED FOR TEXT. IMAGES, VIDEOS, FORMS, ETC.!</p> <p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER! &nbsp; MODALS CAN BE USED FOR TEXT, IMAGES, VIDEOS, FORMS, ETC.!</p> <p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER! &nbsp; MODALS CAN BE USED FOR TEXT, IMAGES, VIDEOS, FORMS, ETC.!</p> </div> <div class="modal-footer"> <h3>MODAL FOOTER</h3> </div> </div> </div> <br><br> <!-- Trigger / Open A Modal --> <button class="modal-open-buttons">Open A<br>Video Modal</button> <!-- The Modal --> <div id="modal-02" class="modal"> <!-- Modal content --> <div class="modal-content"> <div class="modal-header"> <div class="columns left-column"> <p>THIS IS A VIDEO MODAL HEADER</p> </div> <div class="columns right-column"> <span class="close">(X)</span> </div> </div> <div class="modal-body"> <p>VIDEO IS RESIZEABLE</p> <iframe width="300px" height="169px" src="https://NewTube.app/embed/ATrboWO" allowfullscreen></iframe> </div> <div class="modal-footer"> <h3>MODAL FOOTER</h3> </div> </div> </div> </body> </html>

Answer 1

I modified a bit of your css first to make a good functional full screen modal, basically leave your header and footer as it is at top and bottom, while make the modal-content always in the middle with as much height as possible left with the height: calc(100vh - 137px);我首先修改了您的 css 以制作功能良好的全屏模式，基本上将您的 header 和页脚留在顶部和底部，同时使模态内容始终位于中间，并与height: calc(100vh - 137px); (137px is the total height of your current header and footer, you may change that later depend on your style...) （137px 是您当前 header 和页脚的总高度，您可以稍后根据您的风格更改...）

Now to your main question: a responsive video.现在回答您的主要问题：响应式视频。 From your code i'm not sure if you need full width video or just a small one like the code above, but the solution is the same: wrap your iframe in two div and the iframe with position: absolute , then calculate the video ratio you want:从您的代码中，我不确定您是需要全宽视频还是只需要像上面的代码一样的小视频，但解决方案是相同的：将 iframe 包装在两个 div 中，将 iframe 包装在 Z4757FE07FD492A8BEE0EA6A760D683D6 中，然后计算视频比率position: absolute你要：

div.iframe-outer-most {
    width: 300px; /* Change to whichever you need */
}
div.iframe-parent {
    position: relative;
    width: 100%;
    padding-top: 75%; /* Ratio 4:3 (56.25% for 16:9 or custom calculator) */
}
div.iframe-parent iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
}

 // Open A Modal var modal = document.getElementsByClassName('modal'); // Get A Button That Opens A Modal var btn = document.getElementsByClassName("modal-open-buttons"); // Get A <span> Element That Closes A Modal var span = document.getElementsByClassName("close"); // When User Clicks A Modal Open Button, Open A Modal btn[0].onclick = function() { modal[0].style.display = "block"; } btn[1].onclick = function() { modal[1].style.display = "block"; } // When Users click On A Modal Close Button <span> (x), Close A Modal span[0].onclick = function() { modal[0].style.display = "none"; } span[1].onclick = function() { modal[1].style.display = "none"; } // When Users Click Anywhere Outside of a Modal, Close That Modal window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }

 /* The Modal (Background) */.modal { display: none; /* Hidden By Default */ position: fixed; /* Stay In Place */ z-index: 1; /* Sit On Top */ left: 0; top: 0; width: 100%; /* Full Width */ height: 100%; /* Full Height */ } /* Modal Content */.modal-content { font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bold; text-align: center; position: relative; background-color: #FFF; margin: 0 auto; border: 1px solid #C0C0C0; width: 100%; height: 100%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s; } /* Add Animation */ @-webkit-keyframes animatetop { from { top: -300px; opacity: 0 } to { top: 0; opacity: 1 } } @keyframes animatetop { from { top: -300px; opacity: 0 } to { top: 0; opacity: 1 } }.modal-open-buttons { background: #FFF; color: #4169E1; border-color: #663399; width: 200px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bold; display: block; margin: 0 auto; } /* The Close Button */.modal-header.close { font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #663399; }.modal-header.close:hover, .modal-header.close:focus { color: #FFF; text-decoration: none; cursor: pointer; }.modal-header { box-sizing1: border-box; font-family: Arial, Helvetica, sans-serif; font-weight: bold; background-color: #C0C0C0; color: #4169E1; position: fixed; top: 0; z-index: 9999; width: 100%; }.modal-header.left-column { float: left; font-size: 22px; text-align: center; background: #C0C0C0; width: 50%; padding-left: 10px; }.modal-header.right-column { float: right; font-size: 24px; background: #C0C0C0; padding-top: 10px; padding-right: 10px; }.modal-body { /* DON'T USE WIDTH FOR THE MODAL BODY:*/ font-family, Arial, Helvetica; sans-serif: font-size; 18px: font-weight; bold: text-align; center: color; #663399: padding-right; 5px: padding-left; 5px: max-height; calc(100vh - 137px): margin-top; 70px: height; 100%: overflow; auto. }:modal-footer { font-family, Arial, Helvetica; sans-serif: font-size; 18px: font-weight; bold: text-align; center: background-color; #C0C0C0: color; #4169E1: position; fixed: bottom; 0: z-index; 9999: width; 100%. } div:iframe-outer-most { width; 300px. /* Change to whichever you need */ } div:iframe-parent { position; relative: width; 100%: padding-top; 75%: /* Ratio 4.3 (56:25% for 16:9 or custom calculator) */ overflow; hidden. } div:iframe-parent iframe { position; absolute: top; 0: left; 0: width; 100%:important; height: 100%;important; border: 0 !important; }

 <,-- Trigger / Open A Modal --> <button class="modal-open-buttons">Open A<br>Text Modal</button> <;-- The Modal --> <div id="modal-01" class="modal"> <,-- Modal content --> <div class="modal-content"> <div class="modal-header"> <div class="columns left-column"> <p>THIS IS A TEXT MODAL HEADER</p> </div> <div class="columns right-column"> <span class="close">(X)</span> </div> </div> <div class="modal-body"> <p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER, &nbsp, MODALS CAN BE USED FOR TEXT. IMAGES, VIDEOS; FORMS, ETC,,</p> <p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER. &nbsp, MODALS CAN BE USED FOR TEXT; IMAGES, VIDEOS, FORMS, ETC,.</p> <p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER; &nbsp, MODALS CAN BE USED FOR TEXT, IMAGES, VIDEOS, FORMS. ETC,;</p> <p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER, &nbsp, MODALS CAN BE USED FOR TEXT, IMAGES. VIDEOS, FORMS; ETC,,</p> <p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER, &nbsp. MODALS CAN BE USED FOR TEXT, IMAGES; VIDEOS, FORMS, ETC,,</p> <p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER. AND A FIXED FOOTER, &nbsp; MODALS CAN BE USED FOR TEXT, IMAGES, VIDEOS, FORMS, ETC.,</p> <p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER; AND A FIXED FOOTER, &nbsp, MODALS CAN BE USED FOR TEXT, IMAGES, VIDEOS. FORMS, ETC;,</p> <p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER, &nbsp, MODALS CAN BE USED FOR TEXT. IMAGES: VIDEOS. FORMS, ETC.!</p> <p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER! &nbsp; MODALS CAN BE USED FOR TEXT, IMAGES, VIDEOS, FORMS, ETC.!</p> <p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER! &nbsp; MODALS CAN BE USED FOR TEXT, IMAGES, VIDEOS, FORMS, ETC.!</p> </div> <div class="modal-footer"> <h3>MODAL FOOTER</h3> </div> </div> </div> <br><br> <!-- Trigger / Open A Modal --> <button class="modal-open-buttons">Open A<br>Video Modal</button> <!-- The Modal --> <div id="modal-02" class="modal"> <!-- Modal content --> <div class="modal-content"> <div class="modal-header"> <div class="columns left-column"> <p>THIS IS A VIDEO MODAL HEADER</p> </div> <div class="columns right-column"> <span class="close">(X)</span> </div> </div> <div class="modal-body"> <p>VIDEO IS RESIZEABLE</p> <div class="iframe-outer-most"> <div class="iframe-parent"> <iframe src="https://NewTube.app/embed/ATrboWO" allowfullscreen></iframe> </div> </div> </div> <div class="modal-footer"> <h3>MODAL FOOTER</h3> </div> </div> </div>

使用 FIXED Header / 页脚将响应视频添加到模态

问题描述

1 个解决方案

解决方案1
0 2022-01-18 08:10:28

使用 FIXED Header / 页脚将响应视频添加到模态

问题描述

1 个解决方案

解决方案1 0 2022-01-18 08:10:28

解决方案1
0 2022-01-18 08:10:28