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>
Full code to nai
ReplyDelete