Yeni Blogger Web Sitesine Açılır YouTube Video Oynatıcısı Nasıl Eklenir?

[Admin]

Bu yazıda size Blogger Web Sitesine Popup YouTube Video Oynatıcısını nasıl ekleyebileceğinizi göstereceğim.

Pop-up video oynatıcılar, videoların mevcut sayfadan ayrılmadan izlenmesine olanak sağlayarak gelişmiş bir kullanıcı deneyimi sağlar. Etkileşimi artırır, yerden tasarruf sağlar, bağlamsal sunum sunar, özelleştirmeye izin verir, performansı optimize eder ve genel olarak videoları sunmak için kullanıcı dostu ve ilgi çekici bir yol sunar.

JavaScript ve HTML kullanan bir Popup YouTube oynatıcısının kodu:

Kod: Tümünü Seç Tümünü Kopyala

<style>
        .popup-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(0, 0, 0, 0.8);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .popup-container.show {
            opacity: 1;
            pointer-events: auto;
        }

        .close-button {
            position: absolute;
            top: 30px;
            right: 30px;
            color: #ffffff;
            cursor: pointer;
            font-size: 25px;
        }

        .video-container {
            position: relative;
            width: 80%;
            max-width: 800px;
            margin: 0 auto;
        }

        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .play-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: fit-content;
            height: 40px;
            background-color: #4caf50;
            color: #ffffff;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }

        .play-button svg {
            width: 20px;
            height: 20px;
            margin-right: 8px;
        }

        @media only screen and (max-width: 768px) {
            .video-container {
                width: 90%;
                padding-top: 56.25%; /* 16:9 aspect ratio */
            }
        }

        @media only screen and (min-width: 769px) and (max-width: 1024px) {
            .video-container {
                width: 700px;
                height: 393.75px; /* 16:9 aspect ratio */
            }
        }

        @media only screen and (min-width: 1025px) {
            .video-container {
                width: 800px;
                height: 450px; /* 16:9 aspect ratio */
            }
        }
    </style>

    <button id="popup-button" class="play-button">
        <svg viewBox="0 0 24 24">
            <path fill="#ffffff" d="M8,5.14V19.14L19,12.14L8,5.14Z" />
        </svg>
        Watch Now
    </button>

    <div id="popup-container" class="popup-container">
        <span class="close-button" onclick="closePopup()">X</span>
        <div class="video-container">
            <iframe id="youtube-iframe" src="" frameborder="0" allowfullscreen></iframe>
        </div>
    </div>

    <script>
        function openPopup(videoId) {
            var popupContainer = document.getElementById('popup-container');
            var youtubeIframe = document.getElementById('youtube-iframe');

            youtubeIframe.src = "https://www.youtube.com/embed/" + videoId;
            popupContainer.classList.add('show');
        }

        function closePopup() {
            var popupContainer = document.getElementById('popup-container');
            var youtubeIframe = document.getElementById('youtube-iframe');

            youtubeIframe.src = "";
            popupContainer.classList.remove('show');
        }

        var popupButton = document.getElementById('popup-button');
        popupButton.addEventListener('click', function() {
            openPopup("VIDEO_ID_HERE");
        });
    </script>

Bu kodda "VIDEO_ID_HERE" ifadesini, yüklemek istediğiniz YouTube video kimliğiyle değiştirin.

Eğer Açılır pencerede farklı videoları açmak için aynı sayfaya birden fazla düğme eklemek istiyorsanız, birden fazla video kimliğini işlemek için JavaScript kodunu değiştirebilir ve bir düğme tıklandığında video kimliğini dinamik olarak ayarlayabilirsiniz. İşte bunu nasıl başarabileceğinize dair bir örnek:

Kod: Tümünü Seç Tümünü Kopyala

<style>
        /* Styles for popup and video container */

        /* ... (previous CSS styles) ... */

    </style>
   
    <button id="popup-button1" class="play-button" data-video-id="VIDEO_ID_1">
        <svg viewBox="0 0 24 24">
            <path fill="#ffffff" d="M8,5.14V19.14L19,12.14L8,5.14Z" />
        </svg>
        Play Video 1
    </button>

    <button id="popup-button2" class="play-button" data-video-id="VIDEO_ID_2">
        <svg viewBox="0 0 24 24">
            <path fill="#ffffff" d="M8,5.14V19.14L19,12.14L8,5.14Z" />
        </svg>
        Play Video 2
    </button>

    <!-- ... Add more buttons as needed ... -->

    <div id="popup-container" class="popup-container">
        <span class="close-button" onclick="closePopup()">X</span>
        <div class="video-container">
            <iframe id="youtube-iframe" src="" frameborder="0" allowfullscreen></iframe>
        </div>
    </div>

    <script>
        function openPopup(videoId) {
            var popupContainer = document.getElementById('popup-container');
            var youtubeIframe = document.getElementById('youtube-iframe');

            youtubeIframe.src = "https://www.youtube.com/embed/" + videoId;
            popupContainer.classList.add('show');
        }

        function closePopup() {
            var popupContainer = document.getElementById('popup-container');
            var youtubeIframe = document.getElementById('youtube-iframe');

            youtubeIframe.src = "";
            popupContainer.classList.remove('show');
        }

        var popupButtons = document.querySelectorAll('.play-button');
        popupButtons.forEach(function(button) {
            button.addEventListener('click', function() {
                var videoId = this.getAttribute('data-video-id');
                openPopup(videoId);
            });
        });
    </script>

Burada her düğmenin YouTube video kimliğini belirten bir data-video-id özelliği vardır. JavaScript kodu, sınıf oynat düğmesiyle tüm öğeleri seçer ve her düğmeye bir tıklama olayı dinleyicisi ekler. Bir düğmeye tıklandığında, veri-video-id değerini alır ve ilgili videoyu açılır pencerede açmak için bunu openPopup işlevine iletir.

Gerektiği kadar düğme ekleyebilirsiniz ve her düğmenin kendine özgü bir veri-video-id özelliği olabilir. "VIDEO_ID_1", "VIDEO_ID_2" ve benzerlerini, her düğme için yüklemek istediğiniz gerçek YouTube video kimlikleriyle değiştirin.

Bu makalenin Blogger web sitenize bir Youtube Açılır video oynatıcı düğmesi eklemenize yardımcı olacağını umuyorum. Aklınıza takılan bir soru olursa yorum yapınız.