How To Add A Responsive Video Gallery To Your Blogger Website - Live Blogger

SVNANGKORWAT 0 Comments
CSS: Ctrl+F ( ]]></B:template-Skin> ) សូមចម្លងដាក់ខាងលើ ]]></B:template-Skin> 

.video-gallery {
    font-family: "Raleway", sans-serif;
    width: 600px;
    padding: 0 32px;
    margin: 0 auto;
    box-sizing: border-box;
}

.video-gallery img {
    width: 100%;
}

.video-gallery h2 {
    font-size: 40px;
    font-weight: 800;
    margin: 0;
    padding: 16px 0;
    color: #303030;
}

.video-gallery h2.related-videos-title {
    display: none;
}

.video-gallery .featured-video .video-card {
    position: relative;
}

.video-gallery .featured-video .video-card .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    transform: translate(-50%, -50%);
}

.video-gallery .featured-video .video-card h3 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 32px;
    background: linear-gradient(0deg, #000 0%, #000 33%, rgba(0, 0, 0, 0) 100%);
    margin: 0;
    color: #fff;
}

.video-gallery .related-videos {
    display: flex;
    gap: 8px;
    margin-top: 24px;
}

.video-gallery .related-videos .thumbnail {
    position: relative;
}

.video-gallery .related-videos .thumbnail .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    transform: translate(-50%, -50%);
}

.video-gallery .related-videos .video-card h3 {
    padding: 0 16px;
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
}

.video-gallery .related-videos .video-card {
    background-image: linear-gradient( 135deg, #0856af 10%, #0a5d64 100%);
}

.video-card {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 16px -6px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}


.video {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    font-family: "Raleway", sans-serif;
}

.video.active {
    display: flex;
    z-index: 1000;
}

.video .videoPlayer {
    width: 70vw;
}

.video .close-btn {
    position: absolute;
    top: 32px;
    right: 32px;
    font-size: 64px;
    background: white;
    padding: 0 12px;
    border-radius: 50%;
    line-height: 0.8;
    cursor: pointer;
    transform: rotateZ(45deg);
}

@media (max-width: 700px) {
    .video-gallery {
        width: 100%;
        padding: 0px 16px;
    }

    .video .videoPlayer {
        width: 100vw;
    }
}


@media (max-width: 550px) {
    .video-gallery .related-videos {
        flex-direction: column;
        margin-top: 0;
    }

    .video-gallery .related-videos .video-card {
        margin: 8px 0;
    }

    .video-gallery h2.related-videos-title {
        display: block;
        margin-top: 32px;
    }
}


JavaScript Ctrl+F ( </body> ) សូមចម្លងដាក់ខាងលើ </body> For VideoPlayer.Src = VideoUrl; 


<script type='text/javascript'>
//<![CDATA[

const video = document.querySelector(".video");
const videoPlayer = document.querySelector(".video .videoPlayer");
const closeBtn = document.querySelector(".video .close-btn");

const playVideo = (videoUrl) => {   

    if (document.pictureInPictureElement == null) {
        video.classList.add("active");
    }

    videoPlayer.src = videoUrl;
}

closeBtn.addEventListener("click", () => {
    video.classList.remove("active");
    videoPlayer.pause();
})

videoPlayer.addEventListener("enterpictureinpicture", () => {
    video.classList.remove("active");
})

videoPlayer.addEventListener("leavepictureinpicture", () => {
    video.classList.add("active");
});

//]]>
</script>


JavaScript Ctrl+F ( </body> ) សូមចម្លងដាក់ខាងលើ </body> For VideoPlayer.Src = GoogleDrive ID; 


<script>
  
  const video = document.querySelector(".video");
const videoPlayer = document.querySelector(".video .videoPlayer");
const closeBtn = document.querySelector(".video .close-btn");

const playVideo = (videoId) => {   

    if (document.pictureInPictureElement == null) {
        video.classList.add("active");
    }

    videoPlayer.src = `https://drive.google.com/uc?export=download&id=${videoId} `;
}

closeBtn.addEventListener("click", () => {
    video.classList.remove("active");
    videoPlayer.pause();
})

videoPlayer.addEventListener("enterpictureinpicture", () => {
    video.classList.remove("active");
})

videoPlayer.addEventListener("leavepictureinpicture", () => {
    video.classList.add("active");
})

  
  
  </script>


HTML Past Hear: 



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div class="video-gallery">
        <div class="featured-video">
            <h2>Featured Video</h2>
            <div class="video-card" onclick="playVideo('videos/video3.mp4')">
                <img src="images/thumbnail3.png" alt="">
                <h3>How To Get Good At Photography</h3>

                <img class="play-icon" src="images/play-icon.png" alt="">
            </div>
        </div>

        <h2 class="related-videos-title">Related Videos</h2>

        <div class="related-videos">
            <div class="video-card" onclick="playVideo('videos/video1.mp4')">
                
                <div class="thumbnail">
                    <img src="images/thumbnail1.png" alt="">

                    <img class="play-icon" src="images/play-icon.png" alt="">
                </div>
                
                <h3>Record High Quality Videos</h3>

                
            </div>

            <div class="video-card" onclick="playVideo('videos/video2.mp4')">
                
                <div class="thumbnail">
                    <img src="images/thumbnail2.png" alt="">

                    <img class="play-icon" src="images/play-icon.png" alt="">
                </div>
                
                <h3>Smartphone Photography</h3>
                
            </div>

            <div class="video-card" onclick="playVideo('videos/video4.mp4')">
                
                <div class="thumbnail">
                    <img src="images/thumbnail4.png" alt="">

                    <img class="play-icon" src="images/play-icon.png" alt="">
                </div>
                
                <h3>Basics of DSLR Camera</h3>
    
            </div>
        </div>
    </div>


    <div class="video">
        <video controls autoplay class="videoPlayer">
            <source src="videos/video1.mp4" type="video/mp4">
        </video>

        <div class="close-btn">+</div>
    </div>

    <script src="main.js"></script>

</body>
</html>


ខ្មែរ៖ កូដមួយនេះខ្ញុំបានកែសម្រួលរួចហើយអាចយកទៅប្រើប្រាស់បាន។ ជាកូដ ស៊ី អេស អេស

សូមបន្ថែមកូដនូវក្នុង HTML   Add a Gadget


<style>
/* Video Gallery */ 
  
  
  .video-gallery {
    font-family: &quot;Raleway&quot;, sans-serif;
    width: 650px;
    padding: 0 32px;
    margin: 0 auto;
    box-sizing: border-box;
}

.video-gallery img {
    width: 100%;
}

.video-gallery h2 {
    font-size: 40px;
    font-weight: 800;
    margin: 0;
    padding: 16px 0;
    color: #303030;
}

.video-gallery h2.related-videos-title {
    display: none;
}

.video-gallery .featured-video .video-card {
    position: relative;
}

.video-gallery .featured-video .video-card .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    transform: translate(-50%, -50%);
}

.video-gallery .featured-video .video-card h3 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 32px;
    background: linear-gradient(0deg, #000 0%, #000 33%, rgba(0, 0, 0, 0) 100%);
    margin: 0;
    color: #fff;
}

.video-gallery .related-videos {
    display: flex;
    gap: 8px;
    margin-top: 24px;
}

.video-gallery .related-videos .thumbnail {
    position: relative;
}

.video-gallery .related-videos .thumbnail .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    transform: translate(-50%, -50%);
}

.video-gallery .related-videos .video-card h3 {
    padding: 0 16px;
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
}

.video-gallery .related-videos .video-card {
    background-image: linear-gradient( 135deg, #0856af 10%, #0a5d64 100%);
}

.video-card {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 16px -6px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}


.video {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    font-family: &quot;Raleway&quot;, sans-serif;
}

.video.active {
    display: flex;
    z-index: 1000;
}

.video .videoPlayer {
    width: 70vw;
}

.video .close-btn {
    position: absolute;
    top: 32px;
    right: 32px;
    font-size: 64px;
    background: white;
    padding: 0 12px;
    border-radius: 50%;
    line-height: 0.8;
    cursor: pointer;
    transform: rotateZ(45deg);
}

@media (max-width: 400px) {
    .video-gallery {
        width: 100%;
        padding: 0px 16px;
    }

    .video .videoPlayer {
        width: 100vw;
    }
}


@media (max-width: 350px) {
    .video-gallery .related-videos {
        flex-direction: column;
        margin-top: 0;
    }

    .video-gallery .related-videos .video-card {
        margin: 8px 0;
    }

    .video-gallery h2.related-videos-title {
        display: block;
        margin-top: 32px;
    }
}
</style>


នេះជាកូដ សម្រាប់បង្ហោះ ទំព័រ បង្ហោះសារ សូមចម្លងហើយ កែប្រែ ID នឹង រូបភាព របស់វីដេអូ របស់អ្នក តាមចិត្ត តែសុំកុំបង្ហោះ រឿងបំពុលសង្គម អាចធ្វើអោយខូចដល់គេឯង


 <div class="video-gallery">
        <div class="featured-video">
            <h2>Featured Video</h2>
            <div class="video-card" onclick="playVideo('1NLD9mDvMArDCPoSqUJuijqNOw7UZ3Wkn')">
                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFHAtcOjlQjY4ASuqcvnFnGYGjESfsHG3-EXQ6JI6pkpytYy3m-FZW-xBNHU3oCK-kOF23l_2SE9Yz9LQzuef0ltfEwoT7RI0Ncm2wK0-srroxqc90MAKJfQOAEv4W7INpd7vxGJRy-Vm_oFf0Kbkf7axWix3s-NJWY5-t7heUBAIV9zFqYz-XtwkY/s1600/thumbnail3.png" alt="">
                <h3>How To Get Good At Photography</h3>

                <img class="play-icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwzGRsbu9Ear4ObrjcYmKdR1ueAK4IiYKi76ubRxp9Hu9QtX2cPvJqeD8F0H6ksCO9J0e3WA9MX2UxSCPPGD66UelfELm7Q7RNXs5nJQCOhD1FJuRzaP11aj3a1anwsX72BoTndZ3nEjkSQV3zkvcr-bffn4YIJ4R0jRx3A94lygknvxsLQNgucGe-/s1600/play-icon.png" alt="">
            </div>
        </div>

        <h2 class="related-videos-title">Related Videos</h2>

        <div class="related-videos">
            <div class="video-card" onclick="playVideo('1hhMSpVaH5IwSY8Q5oltOt_BHCTMgQhB4')">
                
                <div class="thumbnail">
                    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF5ARjcYHX2Ju-wbL5MjkL-2Oj8qkE60Rp1oCQEIxcFvavmKhKQOpqBE8eBtRZODL6uHx7ftx1RebJglfXq0UtiGTrdRwlE4pL_MjiEeFAEbCtuFupantLguOonqJBA2uO4T7aE00nJ5vCM03AIx9CZdxT4vR9IqiCYjLVxsmklPrGA-GBoQvfRbZX/s1600/thumbnail1.png" alt="">

                    <img class="play-icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwzGRsbu9Ear4ObrjcYmKdR1ueAK4IiYKi76ubRxp9Hu9QtX2cPvJqeD8F0H6ksCO9J0e3WA9MX2UxSCPPGD66UelfELm7Q7RNXs5nJQCOhD1FJuRzaP11aj3a1anwsX72BoTndZ3nEjkSQV3zkvcr-bffn4YIJ4R0jRx3A94lygknvxsLQNgucGe-/s1600/play-icon.png" alt="">
                </div>
                
                <h3>Record High Quality Videos</h3>

                
            </div>

            <div class="video-card" onclick="playVideo('1yibR4pevg7T5EVh9CGaVgaBBCZw5NNHM')">
                
                <div class="thumbnail">
                    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7LufMpytjZzAh3Jr6qSr6Sxn_qd92jg_CFvYqfjM2zffjoyumNTwFTUdJuplTH5NWu1bi5vCqQkhDmoBH_X06UPdq5iCxBQX3DgoQzJH9Jahg-xz7lyRoTQ9cIHTHeBeR6d-ho9KC59mK1Ve4orPEYKLfoASylZVfCVh27THZT0Al2Bmjmyj0qZPF/s1600/thumbnail2.png" alt="">

                    <img class="play-icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwzGRsbu9Ear4ObrjcYmKdR1ueAK4IiYKi76ubRxp9Hu9QtX2cPvJqeD8F0H6ksCO9J0e3WA9MX2UxSCPPGD66UelfELm7Q7RNXs5nJQCOhD1FJuRzaP11aj3a1anwsX72BoTndZ3nEjkSQV3zkvcr-bffn4YIJ4R0jRx3A94lygknvxsLQNgucGe-/s1600/play-icon.png" alt="">
                </div>
                
                <h3>Smartphone Photography</h3>
                
            </div>

            <div class="video-card" onclick="playVideo('1ZpZp6Zc2rg3jMxlVXYDhiZ-BXxxM--7z')">
                
                <div class="thumbnail">
                    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOtAf2BmBLE1ZJg2F7IQXOVBzp7Eu9Dqy-Sliy7cLWs5xiCNLJ9IwfxFQHYpYDdJdEQcp3DpDhliJ-lAt1eV3uynqvRU4571zTs7CoE5MAbGu8v5CzHiPhy9TYMv37ZEWpOkaXjJ2-XBWcan433t72F6G-bLKW_d3aS1cfHk5gmKX2q2VWbAlbu3L8/s1600/thumbnail4.png" alt="">

                    <img class="play-icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwzGRsbu9Ear4ObrjcYmKdR1ueAK4IiYKi76ubRxp9Hu9QtX2cPvJqeD8F0H6ksCO9J0e3WA9MX2UxSCPPGD66UelfELm7Q7RNXs5nJQCOhD1FJuRzaP11aj3a1anwsX72BoTndZ3nEjkSQV3zkvcr-bffn4YIJ4R0jRx3A94lygknvxsLQNgucGe-/s1600/play-icon.png" alt="">
                </div>
                
                <h3>Basics of DSLR Camera</h3>
    
            </div>
        </div>
    </div>


    <div class="video">
        <video controls autoplay class="videoPlayer">
            <source src="videos/video1.mp4" type="video/mp4">
        </video>

        <div class="close-btn">+</div>
    </div>

<script>
  
  const video = document.querySelector(".video");
const videoPlayer = document.querySelector(".video .videoPlayer");
const closeBtn = document.querySelector(".video .close-btn");

const playVideo = (videoId) => {   

    if (document.pictureInPictureElement == null) {
        video.classList.add("active");
    }

    videoPlayer.src = `https://drive.google.com/uc?export=download&id=${videoId} `;
}

closeBtn.addEventListener("click", () => {
    video.classList.remove("active");
    videoPlayer.pause();
})

videoPlayer.addEventListener("enterpictureinpicture", () => {
    video.classList.remove("active");
})

videoPlayer.addEventListener("leavepictureinpicture", () => {
    video.classList.add("active");
})

  
  
  </script>

Tags

Post a Comment

Post a Comment

Previous Post Next Post