Şablonlar xenforo link yönlendirme youtube videosu koyma ve abone ol butonu koyma (1 İzleyici)

<xf:css src="xgt_HariciBaglanti_Yonlendir.less" />
<xf:title>{{ phrase('xgt_HariciBaglanti_yonlendiriliyorsunuz') }}</xf:title>

<!-- 🎬 YouTube Video -->
<div class="xv_video_player xv_disable" style="background-image: url('https://i.ytimg.com/vi_webp/kE7bcq4qUrc/hqdefault.webp');" loading="lazy">
    <iframe
        data-src="https://www.youtube.com/embed/kE7bcq4qUrc?autoplay=1&amp;mute=1"
        id="xv_youtube_iframe"
        width="560"
        height="315"
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen
        loading="lazy"
        src="https://www.youtube.com/embed/kE7bcq4qUrc?autoplay=1&amp;mute=1">
    </iframe>
</div>

<!-- 🚀 Yönlendirme Alanı -->
<div class="xgt-Yonlendirme-govde">       
    <div class="yonlendirme-blok">   
        <div class="yonlendirme-basligi">
            <i class="fad fa-bells uyari-ikonu"></i>
            <h3>{{ phrase('xgt_HariciBaglanti_yonlendiriliyorsunuz_baslik') }}</h3>
        </div>
        <div class="yonlendirme-icerik">

            <!-- ⚠️ Uyarı -->
            <div class="yonlendirme-uyari-sabit">
                <strong>Önemli:</strong> Kişisel şifrelerinizi paylaşmayın, dosya indirmeyin!
            </div>

            <!-- ⏳ Geri sayım -->
            <div id="gerisayim-goster" style="text-align:center; margin-top:15px;">
                <div id="geri-sayim-ikonlari"></div>
            </div>

            <!-- 🔔 Abone ol -->
            <div id="abone-buton-alani" style="display:none; text-align:center; margin-top:15px;">
                <p>Önce YouTube kanalımıza abone olun, sonra siteye devam edin!</p>
                <p>First, subscribe to our YouTube channel, then continue to the site!</p>

                <button id="youtube-abone-butonu" class="youtube-abone-butonu">
                    <i class="fab fa-youtube"></i> Abone Ol
                </button>

                <br><br>
                <button id="devam-et-butonu" class="devam-et-butonu" style="display:none;">
                    <i class="fad fa-external-link-alt"></i> Siteye git
                </button>
            </div>

        </div>   
    </div>
</div>

<!-- ⚙️ JS -->
<xf:js>
$(document).ready(function() {
    var geriSayim = parseInt({$xf.options.xgt_HariciBaglanti_Gerisayim});
    var ikonContainer = $('#geri-sayim-ikonlari');
    ikonContainer.empty();

    for(var i=geriSayim; i>=1; i--){
        ikonContainer.append('<div class="ikon-sayac" data-sayi="'+i+'">'+i+'</div>');
    }

    var interval = setInterval(function(){
        if(geriSayim>0){
            $('.ikon-sayac').removeClass('aktif');
            $('.ikon-sayac[data-sayi="'+geriSayim+'"]').addClass('aktif');
            geriSayim--;
        } else {
            clearInterval(interval);
            $('#gerisayim-goster').hide();
            $('#abone-buton-alani').fadeIn();
        }
    },1000);

    // ✅ Abone ol
    var youtubeChannelUrl = "https://www.youtube.com/@Patron2?sub_confirmation=1";
    $('#youtube-abone-butonu').on('click', function() {
        window.open(youtubeChannelUrl, '_blank');
        setTimeout(function(){
            $('#devam-et-butonu').fadeIn();
        }, 10000);
    });

    // ✅ Siteye git yönlendirmesi
    $('#devam-et-butonu').on('click', function() {
        window.location.href = "https://youtu.be/kE7bcq4qUrc";
    });
});
</xf:js>

<!-- 🎨 CSS -->
<style>
.xv_video_player {
    position: relative;
    aspect-ratio: 16/9;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom:30px;
    max-width: 795px;
    margin: 0 auto;
}
.xv_video_player iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.yonlendirme-uyari-sabit {
    font-size: 16px;
    color: #333;
    text-align:center;
    margin-bottom:15px;
    padding:10px;
    border-radius:8px;
    background:#fff3cd;
    border:1px solid #ffeeba;
    font-weight:bold;
}

#geri-sayim-ikonlari {
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:10px;
}
.ikon-sayac {
    width:40px;
    height:40px;
    border-radius:50%;
    background:#ffffff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:20px;
    font-weight:bold;
    color:#FFD700;
    box-shadow:0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.3s, background 0.3s, color 0.3s, box-shadow 0.3s;
}
.ikon-sayac.aktif {
    background:#6966FF;
    color:#fff;
    transform: scale(1.2);
    box-shadow:0 0 15px #6966FF;
}

.youtube-abone-butonu {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    background: #FF0000;
    color: #fff;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    margin-bottom:10px;
    transition: background 0.3s;
}
.youtube-abone-butonu:hover { background: #cc0000; }
.youtube-abone-butonu i { margin-right: 8px; }

.devam-et-butonu {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    background: #4CAF50;
    color: #fff;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    margin-top:10px;
    transition: background 0.3s;
}
.devam-et-butonu:hover { background: #45a049; }
</style>