Neler yeni

Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.

  • Forumdan daha fazla yararlanmak için, profilinizi telefon numaranız 📱 ile doğrulayın ve daha ayrıcalıklı olun 😉
    Daha fazla bilgi!
Kaynak ikonu

XF 2.0 Youtube Video Widget Nasıl Yapılır ?

Bu eklenti, add-ons XenForo 2.0.X ile uyumlu ve stabil olarak çalışmaktadır.
Yine bir HTML widget konusu ile sizlerleyiz :) Bu seferki konumuz, Youtube kanalımıza yüklü herhangi bir Videoyu Widget olarak göstermek.

Youtube Widget_1.jpg


Bu işlem daha önce paylaştığımız HTML widget işlemlerine göre oldukça kolay sayılır.

XenForo 2 - Twitter HTML Widget Nasıl Yapılır
XenForo 2 - Facebook HTML Widget Nasıl Yapılır

NASIL YAPILIR:
1- Görünüm ve diller -> Widget yöneticisi alanına gelerek Widget Ekle butonuna tıklayın. Karşınıza gelen Widget tanımıseçeneklerinden HTML seçeneğini seçip Widget Ekle butonuna tıklayın.

Youtube Widget_2.jpg

2- Karşınıza gelen alandaki seçenekleri aşağıdakine benzer bir şekilde düzenleyin ve yukarıda kopyaladığımız kodları sırası ile "Şablon" kısmına kopyalayın

Widget kimliği-ID: youtube_channel
Başlık: Haftanın Videosu
Bu pozisyonlarda göster: Forum listesi: Kenar çubuğu (Sıra 60 Olsun)
Gelişmiş mod : Seçiyoruz
Şablon:
Kod:
<div class="block" {{ widget_data($widget) }}>
        <div class="block-container">
            <h3 class="block-minorHeader">
                <a href="https://www.youtube.com/channel/UCUaLPOE7Tphhp3py5Kn0mzg?view_as=subscriber">Haftanın Videosu</a>
            </h3>
            <div class="block-body block-row">
                <iframe width="224" height="129" src="https://www.youtube.com/embed/Uei4MJDS7Os" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
    </div>
</div>

Youtube Widget_3.jpg

Şimdi bu ilave ettiğimiz bu kodun kendinize göre nasıl değiştirmemiz gerekiyor, kısaca açıklayalım :

1-) <a href="https://www.youtube.com/channel/UCUaLPOE7Tphhp3py5Kn0mzg?view_as=subscriber">Haftanın Videosu</a> kodunda bulunan
a-) /UCUaLPOE7Tphhp3py5Kn0mzg kısmını sizin youtube kanal adresine uygun olarak değiştirmeniz gerekiyor.
b-)>Haftanın Videosu</a> bu ifade widget adıdır.

2-) <iframe width="224" height="129" src="https://www.youtube.com/embed/Uei4MJDS7Os" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> kodunda bulunan
a-) /Uei4MJDS7Os" kısmı paylaşılan videonun ID'si
b-)<iframe width="224" height="129" Sidebar uygun olarak videonun boyutları ayarlanmaktadır.
Yazar
mkucuksari
Görüntüleme
1,940
İlk yayınlama
Son güncelleme
Değerlendirme
5.00 yıldız 3 değerlendirme

mkucuksari ait diğer kaynakar

Son incelemeler

mobıl kullanımda sag kısımda bosluk olusmakta

extra.less sablonuna youtube responsıve kodunu ekleyıp

.video-responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.video-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}

wıdget html kısımını bu sekılde duzenlenırse ekrana tam oturuyor

<div class="block" {{ widget_data($widget) }}>
<div class="block-container">
<h3 class="block-minorHeader">
<a href="https://www.youtube.com/channel/UC11zdjMbYWOZKpILFopN9tg?view_as=subscriber">Haftanın Videosu</a>
</h3>
<div class="block-body block-row">
<div class="video-responsive">
<iframe width="230" height="130" src="https://www.youtube.com/embed/JYu_JIXqtW8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
mkucuksari
mkucuksari
Faydalı bilgilendirme icin teşekkürler
Ellerine sağlık kardeşim faydalı bir anlatım olmuş.
mkucuksari
mkucuksari
Teşekkürler kardeşim.

Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.