Step 1: Thumbnail + Play Button (goes inside your .acm-hero section)
<div class="acm-hero style-2">
<div class="video-intro">
<div class="thumb-intro">
<img src="/raymillacta3/images/plantas/campo_maiz.jpg" alt="Video Thumbnail" />
<div class="play-icon">
<a id="myvideo-111" class="video-btn-111" data-bs-toggle="modal" data-src="/raymillacta3/videos/myvideo.mp4" data-bs-target="#videoModal-111">
<span class="fa fa-play"></span>
</a>
</div>
</div>
</div>
</div>
Step 2: Video Modal (place near the bottom of your template or module layout)
<div class="modal fade" id="videoModal-111" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-body position-relative">
<button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="ratio ratio-16x9">
<video id="video111" width="100%" height="auto" controls>
<source src="" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
</div>
</div>
Step 3: JavaScript (add at the bottom of your layout file or in a custom JS block)
<script>
document.addEventListener('DOMContentLoaded', function () {
const trigger = document.querySelector('.video-btn-111');
const video = document.getElementById('video111');
const source = video.querySelector('source');
const modal = document.getElementById('videoModal-111');
modal.addEventListener('show.bs.modal', function () {
const videoSrc = trigger.getAttribute('data-src');
source.setAttribute('src', videoSrc);
video.load();
video.play();
});
modal.addEventListener('hidden.bs.modal', function () {
video.pause();
video.currentTime = 0;
});
});
</script>