Modals
Various card types of modals and content
Modal Props
title: [string] - Modal title
modId: [string] - Modal unique ID
modifier: [string] - Additional display classes for the modal dialog
Video Modal
This modal is used for displaying YouTube videos. Video is set to stop playing when modal is closed.
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl rbn-video-modal">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="exampleModalLabel"><span class="visually-hidden">Robern video modal</span></h2>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- BEGIN: Modal Content -->
<div class="ratio ratio-16x9">
<iframe id="ytPlayer" src="https://www.youtube.com/embed/6OVwy1wvLlI?rel=0&modestbranding=1&playsinline=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<div class="rbn-video-body">
<h3>[Video Title]</h3>
<p>Video short description: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit quam, voluptas excepturi ex vel nulla. Eos culpa nam officiis rerum, ad facilis voluptas quam ab aut vel. Unde facilis, dignissimos.</p>
</div>
<!-- END: Modal Content -->
</div>
</div>
</div>
</div>