Blogger Duyarlı ve Hızlı Şekilde Youtube Videosu Ekleme

Herhangi bir Javascript OLMADAN Blogger'da Duyarlı YouTube video yerleştirmeleri nasıl daha hızlı yüklenir.


Bu hızlı yükleme YouTube videosu 📼web sitenize yerleştirme yöntemi hayatınızı değiştirecek. Gerçekten işe yarıyor!🤩 Bir ton üçüncü taraf JavaScript'i yükleyerek, sayfa hızı puanınızı düşüren ve web sitenizi etkileyen YouTube video yerleştirmeleri yüzünden kendinizi öldürüyorsanız, yalnız değilsiniz!

Youtube Video Embed Blogger

Ne yazık ki, küçük resmin küçük resmin dinozordan önce nasıl yükleneceğine dair her çözüm 🦖YouTube yerleştirme kodu ya zaten ağır olan şablona daha fazla JavaScript ekliyordu ya da yanıt vermiyordu. 

YouTube videolarını ve YouTube oynatma listelerini gömmek için buradaki çözüm

  • 📲 Responsive
  • ✔️Kelimenin tam anlamıyla JavaScript'i yok
  • 🤩Yalnızca SİZİN videolarınızı YouTube video oynatıcı önerilerinde gösterir 
  • 🎥hem YouTube videoları hem de YouTube oynatma listeleri için çalışır
  • ayrıca lazy load yükler.

Blogger'a bir YouTube video Oynatma Listesi yerleştirmek için eksiksiz kod:

<
style="box-sizing: border-box; user-select: initial;"><div class="doveranalyst-responsive-video"><iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture;" allowfullscreen="allowfullscreen" class="responsive-iframe" defer="true" async="true"loading="lazy"title="BURAYA VİDEO BAŞLIĞI"srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:100px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/videoseries?list=KENDİ VİDEO PLAYLİST LİNKİNİZ&rel=0;modestbranding=1;autoplay=1><img defer='true' async='true' loading='lazy'src=https://i3.ytimg.com/vi/KENDİ VİDEO KAPAK FOTO LİNKİNİZ alt='doveranalyst rj mrunmayee indian youtuber radio jockey vlogs'><span>▶</span></a>" src="https://www.youtube.com/embed/videoseries?list=KENDİ VİDEO PLAYLİST LİNKİNİZ



Duyarlı YouTube videosunu Blogger'a nasıl yerleştirebilirim? 

Tüm YouTube iframe yerleştirme kodunu bir ebeveyn <div> içine koymanız ve şablonunuza aşağıdaki css'i atamanız yeterlidir, böylece <div class="doveranalyst-responsive-video"> veya herhangi bir ad vermek istediğinizde söyleyin. , bunu .youtube-responsive-video olarak değiştirebilirsiniz. Meslekten olmayan/kadın terimleriyle, blog yayınınıza bir YouTube iframe yerleştirme kodunu her yapıştırdığınızda, bunun sınıfın açıkça belirtildiği bir başlangıç ​​ve bitiş div içinde olduğundan emin olmalısınız (sınıf adı, aşağıda css kodunda bahsettiğiniz ad olacaktır). ).

 <div class="doveranalyst-responsive-video"><iframe................></iframe></div> 

YouTube videosu ekleme adımları, Blogger Blogspot/özel Etki Alanı Temasına Kod css gömme Blogger şablonunuza gidin. Tema bölümünden bir Yedek alın (herhangi bir hata yaparsanız güvenli bir şekilde geri almak için. Temayı indirdikten sonra, EDIT HTML'yi ve CTRL+F'yi açın

 </b:template-skin> 

Aşağıdaki kodu hemen yukarıya kopyalayın

 ]]> </b:template-skin> ]]>

 veya güvenlik amacıyla css'in herhangi bir yerine yapıştırın veya Temayı Özelleştir>Gelişmiş'den Ek css Ekle'yi kaçırmayın. Bir }'den sonra ve başka bir css öğesi başlamadan önce css'inizde bir yerde olmalıdır. Yeni bir video eklerken her zaman açıklandığı gibi div sınıfını kullanın. Duyarlı YouTube videosu yerleştirme Kodu ve Duyarlı iframe kodu

.doveranalyst-responsive-video{position:relative;width:100%;overflow:hidden;padding-top:56.25%}
.responsive-iframe
{position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%;border:none}
Videolarınıza schema ile zengin sonuçlar işaretini de aşağıdaki linkten ekleyebilirsiniz.
https://classyschema.org/Video?example=single

Yorum Gönder

0 Yorumlar