openBtn.addEventListener('click', e=> e.preventDefault(); modal.style.display = 'flex'; // analytics (replace with your lib) console.log('church_fudge_video_click'); );
<script> const openBtn = document.getElementById('openFudgeVideo'); const modal = document.getElementById('fudgeModal'); const closeBtn= document.getElementById('closeFudge'); Church Of Fudge Video Link
<div class="modal-body"> <iframe src="https://www.youtube.com/embed/<VIDEO_ID>?rel=0&modestbranding=1" title="Church Of Fudge video" allow="autoplay; encrypted-media" allowfullscreen loading="lazy" width="100%" height="450"></iframe> </div> openBtn
<!-- 1️⃣ Thumbnail --> <div style="max-width:480px;margin:auto;"> <a href="#" id="openFudgeVideo" style="display:block;position:relative;"> <img src="https://img.youtube.com/vi/abc123XYZ/hqdefault.jpg" alt="Church Of Fudge – video preview" style="width:100%;border-radius:8px;"> <span style=" position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); background:rgba(0,0,0,0.6);color:#fff;padding:12px 16px; border-radius:50%;font-size:24px;">▶︎</span> </a> </div> modal.style.display = 'flex'
Feel free to copy‑paste the template into your product‑management tool (Jira, ClickUp, Notion, etc.) and adjust the details to match your exact workflow. Feature Name: Church Of Fudge Video Link Feature ID: (e.g. VID‑001 ) Owner / Sponsor: [Insert team or stakeholder] Target Release: [Insert sprint / version]
<div class="modal-footer"> <button class="copy-link" data-clipboard-text="https://youtu.be/<VIDEO_ID>">Copy Link</button> <button class="show-embed">Embed</button> </div>