YouTube videolarını nasıl eklemeliyim?

14-12-2019, 16:06:21

Selam arkadaşlar,

siteme youtube videosu eklediğim zaman ciddi performans kaybı yaşıyorum. Hiç video olmayan sayfa çok hızlı yüklenirken, video eklediğim sayfalar biraz bekliyor. Altta da youtube yüzünden beklediğini, videoyu getirmeye çalıştığını görebiliyorum. WordPress kullanıyorum ve bildiğimiz iframe kodunu yerleştirerek ekliyorum. Videoyu eklerken kullandığınız farklı metotlar var mıdır merak ettim. Bazı makalelerde 3-4 video ekliyorum, sorgulamalarda hız yüzdesi %10'lara kadar düşüyor. Videoları kaldırıyorum direkt 80'lere fırlıyor.

Yardım edenlere şimdiden teşekkürler.

14-12-2019, 16:07:24

#2

TrgySylr

takip

14-12-2019, 16:09:25

#3

Misafir

MertcanK adlı üyeden alıntı: mesajı görüntüle

Selam arkadaşlar,

siteme youtube videosu eklediğim zaman ciddi performans kaybı yaşıyorum. Hiç video olmayan sayfa çok hızlı yüklenirken, video eklediğim sayfalar biraz bekliyor. Altta da youtube yüzünden beklediğini, videoyu getirmeye çalıştığını görebiliyorum. WordPress kullanıyorum ve bildiğimiz iframe kodunu yerleştirerek ekliyorum. Videoyu eklerken kullandığınız farklı metotlar var mıdır merak ettim. Bazı makalelerde 3-4 video ekliyorum, sorgulamalarda hız yüzdesi %10'lara kadar düşüyor. Videoları kaldırıyorum direkt 80'lere fırlıyor.

Yardım edenlere şimdiden teşekkürler.

Merhaba;

<iframe width="560" height="315" src="https://www.youtube.com/embed/xRtkbDHcd0Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Bu şekilde kodlayarak mı ekliyorsunuz?

14-12-2019, 16:16:25

#4

MertcanK

Misafir adlı üyeden alıntı: mesajı görüntüle

Merhaba;

<iframe width="560" height="315" src="https://www.youtube.com/embed/xRtkbDHcd0Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Bu şekilde kodlayarak mı ekliyorsunuz?

Evet tam bu şekilde. Yanlış olduğunu düşünerek sektörümde bazı büyük firmaları inceledim, onlar da bu şekilde eklemiş.
iframe boyutunu değiştirerek falan da ekledim, küçültmek de pek etki etmedi hız konusunda.

14-12-2019, 16:29:21

#5

ibagmen

MertcanK adlı üyeden alıntı: mesajı görüntüle

Evet tam bu şekilde. Yanlış olduğunu düşünerek sektörümde bazı büyük firmaları inceledim, onlar da bu şekilde eklemiş.
iframe boyutunu değiştirerek falan da ekledim, küçültmek de pek etki etmedi hız konusunda.

İframe olarak değil video resmini koyarak, resime tıkladıgında iframe çağırması yapabilirsiniz.

Bootstrap tam uyumlu çalışır. Özel olarak kendinizde javascript kütüphanenize ekliyebilirsiniz.

<div class="youtube-video-place embed-responsive embed-responsive-4by3 " data-yt-url="https://www.youtube.com/embed/BjngNWP9C5s?rel=0&showinfo=0&autoplay=1">
<img src="Thumbnail adresi buraya gelecek" async class="play-youtube-video">
</div>

var video_wrapper = $('.youtube-video-place');
//  Check to see if youtube wrapper exists
if(video_wrapper.length){
// If user clicks on the video wrapper load the video.
$('.play-youtube-video').on('click', function(){
/* Dynamically inject the iframe on demand of the user.
 Pull the youtube url from the data attribute on the wrapper element. */
video_wrapper.html('<iframe allowfullscreen frameborder="0" class="embed-responsive-item" src="' + video_wrapper.data('yt-url') + '"></iframe>');
});
}

Kaynak: https://medium.com/@ryanlebel/speed-...me-c6b9148d0a2

14-12-2019, 16:58:38

#6

MertcanK

ibagmen adlı üyeden alıntı: mesajı görüntüle

İframe olarak değil video resmini koyarak, resime tıkladıgında iframe çağırması yapabilirsiniz.

Bootstrap tam uyumlu çalışır. Özel olarak kendinizde javascript kütüphanenize ekliyebilirsiniz.

<div class="youtube-video-place embed-responsive embed-responsive-4by3 " data-yt-url="https://www.youtube.com/embed/BjngNWP9C5s?rel=0&showinfo=0&autoplay=1">
<img src="Thumbnail adresi buraya gelecek" async class="play-youtube-video">
</div>

var video_wrapper = $('.youtube-video-place');
//  Check to see if youtube wrapper exists
if(video_wrapper.length){
// If user clicks on the video wrapper load the video.
$('.play-youtube-video').on('click', function(){
/* Dynamically inject the iframe on demand of the user.
 Pull the youtube url from the data attribute on the wrapper element. */
video_wrapper.html('<iframe allowfullscreen frameborder="0" class="embed-responsive-item" src="' + video_wrapper.data('yt-url') + '"></iframe>');
});
}

Kaynak: https://medium.com/@ryanlebel/speed-...me-c6b9148d0a2

Bu yöntemi 2 farklı yolla denemiştim. Bir farklı sitede değişik bir js kodu ile anlatımı vardı, ikisini de çalıştıramadım. WordPress için devreye girmemiş olabilir mi bilmiyorum.

14-12-2019, 17:02:08

#7

ibagmen

MertcanK adlı üyeden alıntı: mesajı görüntüle

Bu yöntemi 2 farklı yolla denemiştim. Bir farklı sitede değişik bir js kodu ile anlatımı vardı, ikisini de çalıştıramadım. WordPress için devreye girmemiş olabilir mi bilmiyorum.

Çok basit bir javascript kodu

Ilgili dive tiklanınca div de bulunan youtube linkini alıp iframe koduna ekliyor ve resim yerine divin içine iframeyi koyuyor.

Muhtemelen çakışmıştır jsleriniz yada cache temizlediginizden emin olun.

14-12-2019, 17:13:31

#8

Misafir

MertcanK adlı üyeden alıntı: mesajı görüntüle

Evet tam bu şekilde. Yanlış olduğunu düşünerek sektörümde bazı büyük firmaları inceledim, onlar da bu şekilde eklemiş.
iframe boyutunu değiştirerek falan da ekledim, küçültmek de pek etki etmedi hız konusunda.

Hocam eğer uygun olursa bakmak isterim. Bir 20 25 dakika kadar müsaitim. Yoksa akşam inceleyebilirim

14-12-2019, 17:41:02

#9

MertcanK

Misafir adlı üyeden alıntı: mesajı görüntüle

Hocam eğer uygun olursa bakmak isterim. Bir 20 25 dakika kadar müsaitim. Yoksa akşam inceleyebilirim

Şuan ben de bilgisayarda değilim, akşama mesaj atabilirim. Teşekkür ederim.