YouTube Videolarını Siteye Eklemek Ve Özelleştirmek

Web Sitelerinde YouTube Videolarını Oynatma Özellikleri

En çok kullanılan video izleme sitesi YouTube servisinden istediğiniz videoları sitenize, forumlara, mesaj ve blogunuza eklemeniz mümkündür. Bir çok webmaster standart ekleme yollarını tercih etse de bazı durumlarda özelleştirme yapmak gerekiyor. Şimdi neler yapabileceklerimize beraber bakalım...

YouTube Videolarımı Siteme / Bloguma Nasıl Eklerim, Nasıl Özelleştiririm ?

Youtube videolarını sitenizde göstermek için kodları istediğiniz gibi düzenlemenize olanak verir.

Youtube Videolarını Site Veya Blogunuza Varsayılan Düzende Eklemek İçin :

Videonun altındaki Paylaş bağlantısını tıklayın.

Altında gözüken sosyal bağlantı ikonlarından istediğinizi seçin ve videoyu ilgili platformda (facebook, twitter, blogger...) paylaşın.

YouTube videolarını Site Veya Blogunuza Özelleştirilebilir Kod ile Eklemek İçin :

Videonun altındaki Paylaş bağlantısını tıklayın. Yerleştir kodu ile 

Genişletilmiş kutuda sağlanan kodu kopyalayın.
Kodu blogunuza veya web sitenize HTML olarak yapıştırın.

İsterseniz bu kodu özelleştirebilirsiniz örneğin:

<iframe width="560" height="315" src="https://www.youtube.com/embed/YjgR_YKdPac" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

width="560" height="315" : Video çerçevesinin genişliği ve yüksekliğidir. Çerçeve boyutu px değerindedir, istenilen boyuta ayarlanabilir. Videoyu görünmez yapmak için bu değerlere 0 px atanabilinir.

Başlat : Kısmı işaretlenerek videonun başlama zamanı ayarlanabilinir.

autoplay : Videoyu otomatik başlatmak için kullanılır bu değeri autoplay=1 ile değiştirirseniz videonuz otomatik başlar.

Web Sitelerinde YouTube Videolarını Arka Fon Müziği Olarak Kullanmak

Web sitelerinde YouTube videolarını istersek bir sayfada yada sitenin tamamında fon müziği olarak yada çeşitli melodiler veya repliklerle başlayan ses efektleri kullanıp sitemizi daha ilgi çekici hale dönüştürebiliriz. Bunun için Youtube yerleştirme kodunu

<iframe width="560" height="315" src="https://www.youtube.com/embed/YjgR_YKdPac" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

width="560" height="315" : Video çerçevesinin genişliği ve yüksekliğidir. Çerçeve boyutu px değerindedir, istenilen boyuta ayarlanabilir. Videoyu görünmez yapmak için bu değerlere 0 px atanabilinir.

Başlat : Kısmı işaretlenerek videonun başlama zamanı ayarlanabilinir.

yada

Youtube videosunu istediğimiz yerden başlatmak için YouTube linkinin sonuna

&start=292 eklediğimizde video 4:52 ′den başlar (4 dakika + 52 saniye = 292 saniye)

Youtube videosunu istediğimiz yerde bitirmek için

&stop=299 eklediğimizde video 4:59 ′da biter (4 dakika + 52 saniye = 299 saniye)

Örneğin : 

<iframe width="0" height="0" src="https://www.youtube.com/embed/YF51oiHz0JY?rel=0&autoplay=1&start=292&stop=299" frameborder="0" allowfullscreen></iframe>

autoplay : Videoyu otomatik başlatmak için kullanılır bu değeri autoplay=1 ile değiştirirseniz videonuz otomatik başlar.

&autoplay=1 Bir kez otomatik oynat anlamındadır, iki kez tekrar istiyorsak &autoplay=2 şeklinde tekrar sayısına göre 3,4... diye değiştirebilirsiniz.

YouTube Videolarını Sessiz ve Otomatik Başlatmak İçin :

Web sitelerinde aniden başlayan seslere gıcık olduğumdan, açılan sayfayı bir an önce kapatırım. Ancak sessiz bir şekilde videonun başlaması ve ziyaretçi isterse sesini açması güzel bir özellik olarak web sitelerinde kullanılabilinir.

İstediğiniz bir YouTube Videosunun URL adresini kopyalayın.

https://youtube.com/watch?v=XYZ  Buradaki XYZ video kimlik numarasıdır yani YOUR_VIDEO_ID

<div id="muteYouTubeVideoPlayer"></div>
<script async src="https://www.youtube.com/iframe_api"></script>
<script>
function onYouTubeIframeAPIReady() {
var player;
player = new YT.Player('muteYouTubeVideoPlayer', {
videoId: 'YOUR_VIDEO_ID', // YouTube Video ID
width: 560, // Çerçeve genişliği (px)
height: 316, // Çerçeve yüksekliği  (px)
playerVars: {
autoplay: 1, // Auto-play 1 otomatik başlatma.
controls: 1, //  Kontrolcüleri göster
showinfo: 0, // Video başlığını gizle
modestbranding: 1, // YouTube logosunu gizle
loop: 1, // Video döngü sayısı
fs: 0, // Tam ekran düğmesini gizle
cc_load_policy: 0, // Altyazıları gizle
iv_load_policy: 3, // Video Açıklamalarını Gizle
autohide: 0 // Oynatırken video kontrollerini gizle
},
events: {
onReady: function(e) {
e.target.mute();
}
}
});
}
// Written by @labnol + webkenti.net
</script>

YOUR_VIDEO_ID : Yerine otomatik ve sessiz başlatmak istediğiniz YouTube videosunun URL adresindeki  (https://youtube.com/watch?v=XYZ)  sadece XYZ kısmını kod içine yerleştirin.

Kısaca YOUR_VIDEO_ID yazan yeri XYZ ile değiştirin. Web sitelerine HTML olarak eklediğinizde YouTube videoları hem sessiz hemde otomatik başlayacaktır.

Youtube Videolarını Duyarlı Hale Getirme

Youtube videolarını sitemizde duyarlı ekran boyutlarında çalıştırmak istersek aşağıdaki kodu kullanabilirsiniz

<style>

.youtube-maps {

position: relative;

padding-bottom: 55%; // Video en-boy oranı.

height: 0;

overflow: hidden;

}

.youtube-maps iframe {

position: absolute;

top: 0;

left: 0;

width: 100% !important;

height: 100% !important;

}

</style>

<div class="youtube-maps">

YOUTUBE YERLEŞTİRME KODU

</div>

Kodları istediğiniz gibi özelleştirebilirsiniz.