Google Drive ifram with logo and moving text

ifram code-

পোস্ট এ পেস্ট করতে হবে।

<div class="video-container">

    <!-- Placeholder Thumbnail -->

    <img alt="Thumbnail" id="thumbnail" onclick="playVideo()" 

         src="https://drive.google.com/thumbnail?sz=w800&amp;id=1xEWnupWxOIBcdquCG8hrwFBFZzXP-zSz" />

    <!-- Video iFrame -->

    <iframe allowfullscreen="true" id="videoFrame" 

            src="https://drive.google.com/file/d/1xEWnupWxOIBcdquCG8hrwFBFZzXP-zSz/preview">

    </iframe>

    <!-- Moving Text -->

    <div id="movingText" class="moving-text">

        <div>

            🎥 Thank you for watching this video | Please 👉 follow and subscribe us for new video 💯

        </div>

    </div>

    <!-- Logo visible only when the video is playing -->

    <div id="logoDiv" class="logo-container">

        <img alt="Logo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjovy2GsSEXyrXNl1Q8uthHFC2uGbnsXeQAlLPjGLcj9cteSbH2hcchGfUuzqhZRVzCHwLKxP9rLo3phobnWEUvDe26xuMdGPB-EcEbWYc0DXBuk3CHB-dXu6-s2iJpbosHLbYiuEbV2bLOBSPXzuuwoxPmcXASHGYCC9VW6Q0Bpr8Z7p7XXdSNWpM0_ojX/s3264/20241223_150840.png" />

    </div>

</div>

css code-

</style>  এর উপরে পেস্ট করতে হবে।

/* Container for the video and thumbnail */

.video-container {

    border-radius: 5px;

    border: 2px solid rgb(255, 0, 0);

    height: 0;

    margin: auto;

    max-width: 800px;

    overflow: hidden;

    padding-bottom: 56.25%;  /* For maintaining the 16:9 aspect ratio */

    position: relative;

    width: 100%;

}

/* Thumbnail image */

.video-container img {

    cursor: pointer;

    height: 100%;

    left: 0;

    object-fit: cover;

    position: absolute;

    top: 0;

    width: 100%;

}

/* Video iframe */

.video-container iframe {

    border: 0;

    display: none;

    height: 100%;

    left: 0;

    position: absolute;

    top: 0;

    width: 100%;

}

/* Moving text styling */

#movingText {

    display: none;

    position: absolute;

    top: 0;

    left: 10px;

    width: 100%;

    overflow: hidden;

    z-index: 10;

}

#movingText div {

    display: inline-block;

    white-space: nowrap;

    animation: scrollText 30s linear infinite;

    font-size: 10px;

    font-weight: bold;

    color: #ffffff;

}

/* Keyframes for the moving text */

@keyframes scrollText {

    0% {

        transform: translateX(100%);

    }

    100% {

        transform: translateX(-100%);

    }

}

/* Logo when the video starts playing */

#logoDiv {

    display: none;

    left: 5px;

    position: absolute;

    top: 5px;

    z-index: 10;

}

#logoDiv img {

    height: 30px;

    width: 30px;

}

 java script code-

</body>  এর উপরে পেস্ট করতে হবে।

function playVideo() {

    // Hide the thumbnail

    document.getElementById('thumbnail').style.display = 'none';

    // Show the video iframe

    const iframe = document.getElementById('videoFrame');

    iframe.style.display = "block";

    // Show the moving text

    document.getElementById('movingText').style.display = 'block';

    // Show the logo when the video starts playing

    document.getElementById('logoDiv').style.display = 'block';

}

এছাড়াও ব্লগ পোস্ট এ html মোডে নিচের পুরো কোড পেস্ট করলেই হবে।

এখানে শুধু থাম্বেল এবং ইমেজ url পরিবর্তন করতে হবে। 

<div style="border-radius: 5px; border: 2px solid rgb(255, 0, 0); height: 0px; margin: auto; max-width: 800px; overflow: hidden; padding-bottom: 56.25%; position: relative; width: 100%;">

    <!-- Placeholder Thumbnail -->

    <img alt="Thumbnail" id="thumbnail" onclick="playVideo()" 

         src="https://drive.google.com/thumbnail?sz=w800&amp;id=1xEWnupWxOIBcdquCG8hrwFBFZzXP-zSz" 

         style="cursor: pointer; height: 100%; left: 0px; object-fit: cover; position: absolute; top: 0px; width: 100%;" />

    <!-- Video iFrame -->

    <iframe allowfullscreen="true" id="videoFrame" 

            src="https://drive.google.com/file/d/1xEWnupWxOIBcdquCG8hrwFBFZzXP-zSz/preview" 

            style="border: 0; display: none; height: 100%; left: 0; position: absolute; top: 0; width: 100%;">

    </iframe>

    <!-- Moving Text -->

    <div id="movingText" style="display: none; position: absolute; top: 0px; left: 10px; width: 100%; overflow: hidden; z-index: 10;">

        <div style="display: inline-block; white-space: nowrap; animation: scrollText 30s linear infinite; font-size: 10px; font-weight: bold; color: #ffffff;">

            🎥 Thank you for watching this video | Please 👉 follow and subscribe us for new video 💯

        </div>

    </div>

    <!-- Logo visible only when the video is playing -->

    <div id="logoDiv" style="display: none; left: 5px; position: absolute; top: 5px; z-index: 10;">

        <img alt="Logo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjovy2GsSEXyrXNl1Q8uthHFC2uGbnsXeQAlLPjGLcj9cteSbH2hcchGfUuzqhZRVzCHwLKxP9rLo3phobnWEUvDe26xuMdGPB-EcEbWYc0DXBuk3CHB-dXu6-s2iJpbosHLbYiuEbV2bLOBSPXzuuwoxPmcXASHGYCC9VW6Q0Bpr8Z7p7XXdSNWpM0_ojX/s3264/20241223_150840.png" 

             style="height: 30px; width: 30px;" />

    </div>

</div>

<script>

    function playVideo() {

        // Hide the thumbnail

        document.getElementById('thumbnail').style.display = 'none';

        // Show the video iframe

        const iframe = document.getElementById('videoFrame');

        iframe.style.display = "block";

        // Show the moving text

        document.getElementById('movingText').style.display = 'block';

        // Show the logo when the video starts playing

        document.getElementById('logoDiv').style.display = 'block';

    }

</script>

<style>

    /* Keyframes for moving text */

    @keyframes scrollText {

        0% {

            transform: translateX(100%);

        }

        100% {

            transform: translateX(-100%);

        }

    }

</style>