Popup Video Code

/* CSS */
padding-top: (@paddingTop * 15px);
padding-bottom: (@paddingBottom * 15px);
& when (@bg-type = 'color') {
  background-color: @bg-value;
}
& when (@bg-type = 'image') {
  background-image: url(@bg-value);
}
.main-row {
  & when (@reverseContent) {
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
}
.mbr-figure img {
  border-radius: .25rem;
}
.mbr-text {
  color: #8d97ad;
}
.mbr-media {
  display: flex;
  & when (@buttonsAlign = "left") {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
  }
  & when (@buttonsAlign = "center") {
    -webkit-justify-content: center;
    justify-content: center;
  }
  & when (@buttonsAlign = "right") {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
  }
}
.play {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 15px;
  @newColor: contrast(@playColor);
  border-color: transparent transparent transparent @newColor;
  margin-right: -3px;
}
.btn-play {
  box-shadow: 2px 8px 20px rgba(115, 128, 157, 0.3);
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  position: relative;
  background: @playColor;
  width: 60px;
  height: 60px;
  border: 1px solid @playColor;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  text-align: center;
  line-height: 60px;
  font-size: 27px;
  cursor: pointer;
  display: inline-flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-transition: 0.15s ease-in-out;
  transition: 0.15s ease-in-out;
  -webkit-transition-property: color, background, border-color;
  transition-property: color, background, border-color;
}
.modalWindow {
  display: none;
  position: fixed;
  z-index: 5000;
  left: 0;
  top: 0;
  background-color: rgba(61, 61, 61, 0.65);
  width: 100%;
  height: 100%;
  .modalWindow-container {
    display: table-cell;
    vertical-align: middle;
  }
  .modalWindow-video {
    height: calc(80vw / 1.778);
    width: 80vw;
    margin: 0 auto;
  }
}
.wrapper-video {
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}
.icon-description {
  margin-left: 1rem;
  color: #ff64a3;
}
a.close {
  position: absolute;
  right: 4vw;
  top: 4vh;
  color: #ffffff;
  z-index: 5000000;
  font-size: 37px;
  background: #000;
  padding: 20px;
  border-radius: 50%;
  &:hover {
    color: #ffffff;
  }
}
@media (max-width: 767px) {
  .mbr-section-title, .mbr-text {
    text-align: center;
  }
  .wrapper-video {
    -webkit-justify-content: center !important;
    justify-content: center !important;
  }
}
.mbr-fallback-image.disabled {
  display: none;
}
.mbr-fallback-image {
  display: block;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  & when (@bg-type = 'video') {
    background-image: url(@fallBackImage);
  }
}
H2 {
  color: #ff64a3;
}




<!-- HTML -->
<section data-bs-version="5.1" class="features15 businessm4_features15" group="Features" data-bg-video="{{bg.type == 'video' && bg.value.url}}" plugins="PlayerVimeo" mbr-class="{'mbr-fullscreen': fullScreen,
                    'mbr-parallax-background': bg.parallax}">

    <mbr-parameters>

        <header>Size</header>
        <input type="range" inline title="Top" name="paddingTop" min="0" max="8" step="1" value="6">
        <input type="range" inline title="Bottom" name="paddingBottom" min="0" max="8" step="1" value="6">
        <header>Show / Hide</header>
        <input type="checkbox" title="Title" name="showTitle" checked>
        <input type="checkbox" title="Text" name="showText" checked>
        <input type="checkbox" title="Popup Video" name="showVideo" checked>
        <input type="checkbox" title="Description" name="showDescription" condition="showVideo" checked>
        <input type="text" title="Modal Video" name="modalVideo" value="https://youtu.be/iM-NestDPNQ" condition="showVideo">
        <select name="buttonsAlign" title="Buttons Align" condition="showVideo">
            <option value="left" selected>left</option>
            <option value="center">center</option>
            <option value="right">right</option>
        </select>
        <input type="checkbox" title="Image on Right/Left" name="reverseContent" checked>
        <header>Background</header>
        <input type="color" title="Play Btn" name="playColor" value="#ff4f7b" condition="showVideo">
        <fieldset type="background" name="bg" parallax>
            <input type="image" value="../_images/background8.jpg" title="Image" parallax>
            <input type="color" value="#000000" title="Color" selected>
            <input type="video" value="https://youtu.be/iM-NestDPNQ" title="Video">
        </fieldset>
        <header condition="bg.type === 'video'">Fallback Image</header>
        <input type="image" title="Fallback Image" value="../_images/background1.jpg" name="fallBackImage" condition="bg.type === 'video'">

        <input type="checkbox" title="Overlay" name="overlay" condition="bg.type !== 'color'">
        <input type="color" title="Overlay Color" name="overlayColor" value="#8d97ad" condition="overlay && bg.type !== 'color'">
        <input type="range" inline title="Opacity" name="overlayOpacity" min="0" max="1" step="0.1" value="0.2" condition="overlay && bg.type !== 'color'">

    </mbr-parameters>
    <div class="mbr-fallback-image disabled" mbr-if="bg.type == 'video'"></div>


    <div class="mbr-overlay" mbr-if="overlay && bg.type!== 'color'" mbr-style="{'opacity': overlayOpacity, 'background-color': overlayColor}">
    </div>

    <div class="container align-center">
        <div class="row justify-content-center align-items-center main-row">
            <div class="col-md-6">
                <h2 class="mbr-section-title align-left py-2 mbr-fonts-style" mbr-theme-style="display-2" mbr-if="showTitle">
                    INTRO WITH VIDEO POPUP
                </h2>
                <p class="mbr-text align-left py-2 mbr-fonts-style" mbr-theme-style="display-7" mbr-if="showText" data-app-selector=".mbr-text,.mbr-section-btn">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, voluptatum dicta, rerum cumque vitae
                    maxime, ut dolorem consectetur minima impedit rem earum illum, doloribus reprehenderit. In
                    perferendis voluptatum aut reprehenderit.
                </p>
                <div class="wrapper-video" mbr-if="showVideo" mbr-class="{'justify-content-center':buttonsAlign=='center',
                                 'justify-content-start':buttonsAlign=='left',
                                 'justify-content-end':buttonsAlign=='right'}">
                    <div class="mbr-media show-modal align-left py-2" data-modal=".modalWindow">
                        <div class="btn-play" data-modal=".modalWindow">
                            <span class="play"></span>
                        </div>
                    </div>
                    <div mbr-text class="icon-description align-center mbr-fonts-style" mbr-theme-style="display-7" mbr-if="showDescription" data-app-selector=".icon-description"><b>Play the video</b></div>
                </div>
            </div>

            <div class="col-md-6 py-3 ">
                <div class="mbr-figure">
                    <img src="file:///Users/ME/Library/Application%20Support/Mobirise.com/Mobirise/projects/project-2025-08-20_213824/assets/images/mbr.jpg" alt="Mobirise">
                </div>
            </div>
        </div>
    </div>
    <div>
        <div class="modalWindow">
            <div class="modalWindow-container">
                <div class="modalWindow-video-container">
                    <div class="modalWindow-video">
                        <iframe width="100%" height="100%" data-src="{{modalVideo}}" frameborder="0" allowfullscreen="1"></iframe>
                    </div>
                    <a class="close" role="button" data-dismiss="modal" data-bs-dismiss="modal">
                        <span aria-hidden="true" class="mbri-close mbr-iconfont closeModal"></span>
                        <span class="sr-only visually-hidden">Close</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>