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.

Kaynak ikonu

XF 2.0 Eklenti 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.681
İ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.