ভিডিও প্লে বাটোন যুক্ত করার সম্পুর্ন কোড।

 





CODE

<div style="position: relative; width: 100%; max-width: 800px; aspect-ratio: 16/9; background: #000; border-radius: 12px; overflow: hidden;">
    <!-- থাম্বনেইল ও প্লে বাটন -->
    <div id="thumbContainer" style="position: absolute; inset: 0; background: url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1200&auto=format&fit=crop') center/cover; display: flex; align-items: center; justify-content: center; z-index: 2; transition: opacity 0.4s;">
        <button onclick="playDriveVideo()" style="background: #ef4444; color: #fff; border: none; padding: 14px 28px; font-size: 16px; font-weight: 600; border-radius: 50px; cursor: pointer; display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 25px rgba(239, 68, 68, 0.5);">
            <i class="fa-solid fa-play"></i> Play Video
        </button>
    </div>
    <!-- ভিডিও ফ্রেম -->
    <iframe id="videoIframe" src="" style="position: absolute; width: 100%; height: 100%; border: none;" allow="autoplay" allowfullscreen></iframe>
</div>

<script>
function playDriveVideo() {
    // 👇 নিচের কোটেশনের ভেতরে আপনার গুগল ড্রাইভের লিংকটি বসিয়ে দিন
    let driveLink = "YOUR_GOOGLE_DRIVE_LINK_HERE";
    
    if(driveLink.includes("view")) {
        driveLink = driveLink.replace("/view?usp=sharing", "/preview").replace("/view", "/preview");
    } else if(!driveLink.includes("preview") && driveLink.includes("file/d/")) {
        driveLink = driveLink + "/preview";
    }
    
    document.getElementById('videoIframe').src = driveLink + (driveLink.includes("?") ? "&" : "?") + "autoplay=1";
    document.getElementById('thumbContainer').style.opacity = '0';
    setTimeout(() => document.getElementById('thumbContainer').style.display = 'none', 400);
}
</script>

Comments

Post a Comment