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.

Yorumlar

  1. Adsız19.11.14

    You Tube videoları kendiliğinden otomatik başlasın

    YanıtlaSil
  2. Adsız27.2.15

    ``eski yerlesdirme kodu kullan`` bolumu niye gozukmuyor ? sizde 5 isaretleme yeri var , bende 3 tane

    YanıtlaSil
    Yanıtlar
    1. Youtube varsayılan izleme seçeneği artık html5 olarak vermeye başladı. yani flash kodları pasife çektiler. Ama hala çalışır sorun değil.

      Sil
  3. Adsız16.8.15

    muhteşem olmuş, benim sorun yaşadığım yer şu: img dosyalarında genişlik %80 yükseklik auto yapıyorum tüm boyutlarda sorunsuz çalışıyor. ama bunu video için yapamıyorum. genişlik oranı tutuyor yükseklik tutmuyor

    YanıtlaSil
    Yanıtlar
    1. Soruyu tam anlamadığım için çözüm yolunu söyleyemiyorum.

      Sil
  4. Merhaba ben videoyu hala ıstedıgın noktada başlatamıyorum mesela bir şarkı dınlıcem şarkı 5 dk ilk 2 dk saçma sapan ön gösterim sonra şarkı gırıyor

    ıstenılen zamanı ayarlıyorum tik işaretıne tıklayıp vıdeoyu kaydetten urlden kaydediyorum ancak olmuyor

    YanıtlaSil
  5. Reklam deyıl normal olarka videoda durgun luk var yanı şarkı 3dk ama adam 2dk lık ön gösterim çekmiş onu atlamak isityorum şarkının baladıgı noktadan yani olmuyor

    reklam deyil

    önceden videonun başlangıcını ve bitişini ayarlaya biliyordum cubuklar vardı başlangıc ve bıtıs ayarlıyorduma ama bunu untuum yad deyıstı nasıl odlgunu bılmıyormusunuz


    başlangıccı istedigimiz dakikada başaltmayı

    burdakı öneriler bend e ölmüyor ayarlardan biryermi açmam lazım yad kapatmam bilmiyorum

    YanıtlaSil
    Yanıtlar
    1. https://support.google.com/youtube?hl=tr#topic=4355266

      Eğer çözemezseniz , birebir olan Profesyonel Yardımlarımız Ve Danışmanlık Hizmetlerimiz Ücretlidir. Yardımcı oluruz.

      Sil
  6. Mobilde video otomatik başlar mı

    YanıtlaSil
    Yanıtlar
    1. O konu biraz karışık,
      Mobil cihaza, işletim sistemine, izin verilen ayarlara, ve web sitesini görüntüleme seçeneklerine göre değişsede, başlar.

      Sil
  7. Mobilde otomatik başlamasını istiyorum videonun mümkün mü ?

    YanıtlaSil
    Yanıtlar
    1. Değişir. Sitenin mobil sürümü neye göre ayarlı ve ziyaretçi cihazını neye göre ayarlamış vs.

      Sil
  8. merhaba ben siteme youtubedan video ekledım ancak video bittikten sonra youtube kanalındaki diğer videoların sitemdeki kişilere görünmesini istemiyorum. Yanı eklenen video bittikten sora başa dönsün ve beklesin istiyorum nasıl yapabilirim ? yardımcı olursanız sevinirim. kodum iframe blogunun icerisinde

    YanıtlaSil
    Yanıtlar
    1. YouTube > Paylaş > Ekle > DAHA FAZLA GÖSTER > Video bittiğinde önerilen videoları göster

      Sil
  9. Merhaba Konum Şu Yardımcı olursanız sevinirim Ben Sitemde 7 8 Tane Mp3 Eklemek İstiyorum Kodu Alıyorum Ama Mp3leri Nasıl Atacağımı Bilmiyorum Yardımcı olursanız Sevinirim Teşekkürler

    YanıtlaSil
    Yanıtlar
    1. Selamlar
      Sizin sitenizin altyapısı PHP yani bu kodlar HTML olduğundan farklı dil kullanılmaktadır. Yukarıda belirtiğim yolları izleyerek sadece PHP olarak kodları alırsanız çalışacaktır. bunun dışında googleye "sitene müzik çalar ekle" diye bir mp3 player ekleyerekte yapabilirsin.

      Sil
  10. çok teşekkürler yardımlarınız için.Sorunu çözdüm çok teşekkürler

    YanıtlaSil
  11. Iframe ile alınan video sayfada oynatıldıktan sonra bittiğinde önerilen videolar görünüyor. Bunu engelleme şansımız var mı?

    YanıtlaSil
    Yanıtlar
    1. YouTube > Paylaş > Ekle > DAHA FAZLA GÖSTER > Video bittiğinde önerilen videoları göster

      Sil
  12. merhabalar ben youtube videoları hemen başlasın ve fulscreen olsun istiyorum

    https://www.youtube.com/watch_popup=e8aAhVz0ZvU&outoplay=1 desem burdaki hata nedir sorun çıkıyor fullscreen için watch dan donra _popup eklenmesi diye bişey okumuştum olmuştu o zaman şimdi olmuyor. yani youtubedeki video linkine hem fullscreen hemde otomatik başlaması için kod ekleyebilirmiyim

    YanıtlaSil
    Yanıtlar
    1. Buradaki hata kod eksik. popup olarak tam ekran başlayabilir. Bunu popup kodları ile yapılabilir. Ancak hemen hemen her tarayıcıda varsayılan olarak bu engellenir ve youtube varsayılan olarak tam ekran başlamaz. Yapılabilir ancak varsayılan kodları değiştirmek gerekir.

      Sil
  13. Bende otomatik video nasıl kapatılır onu araştıyorum :)
    Arkadaşlar yapmayın şunu ya, müzik dinliyorum sayfada patt bi reklam sesi bangır bangır. Bulana kadar uğraşacağıma bazen sayfayı kapatıyorum..

    YanıtlaSil
  14. Adsız14.6.16

    merhaba ben siteme link girişi yaptım link adresi siteye yapıştırıldıgında video direk sitede açılsın istiyorum yardım lutfenn

    YanıtlaSil
    Yanıtlar
    1. Siteye kod ekleyerek yapılabilir. Bakmak lazım , bilmiyorum.

      Sil
  15. Adsız29.6.16

    yaralı bir paylaşım.
    peki video otomatik başlarken ses seviyesini nasıl ayarlıyacağız?
    örnek olarak ses seviyesi 0 da yada yarıda veya full olmasını istiyorsak ne yapmamız lazım

    YanıtlaSil
  16. böyle siteye ekler otomatik başlar ve izlenme sayısıyla para kazanırım diye düşünenler malesef video linkinin sonuna başka şeyler eklediğimiz için youtube de izlenme diye sayılmıyor

    YanıtlaSil
  17. Merhabalar php sayfam için kodu nereye eklemem gerekiyor site açıldığında video açılacak ve kullanıcı X ile kapatacak

    YanıtlaSil
    Yanıtlar
    1. Kpdlar aynı şekilde çalışır lakin PHP uzun zaamdır kullanmadığım için bilemiyorum.

      Sil
  18. merhabalar ben siteme otamatik başlayan video ekledim ama youtube kanalıma izlenme gelmiyor lütfen yardım edin

    YanıtlaSil
    Yanıtlar
    1. Selamlar öncelikle sorunuz tam anlaşılamıyor, tahminimce sitenize eklenen videolar izlendiğinde youtube sayacı değişmişmiyor nasıl çözerim ? şeklinde anladım.
      ♥ ........ Profesyonel Yardımlarımız Ve Danışmanlık Hizmetlerimiz Ücretlidir ........ ♥
      Hatırlatmak isteriz.

      Sil
  19. peki video görüntüleme sayılır mı

    YanıtlaSil
  20. Hocm youtube videosunu facede otomatik oynatılmasını ıstıyorum. Tek tek gidis sekli nedir. paylas ekle falan .ayrıca ekleyecegımız kodları nereye ekleyecez

    YanıtlaSil
    Yanıtlar
    1. ♥ ........ Profesyonel Yardımlarımız Ve Danışmanlık Hizmetlerimiz Ücretlidir ........ ♥

      Sil
  21. Adsız24.1.18

    cep telefonunda neden otomatik başlamaz. bu kodları kullandım sitede (pc) sorun yok ama cep tellerde videonun resmi geliyor play tuşu bile çalışmıyor

    YanıtlaSil
    Yanıtlar
    1. Web Kenti22 Aralık 2015 10:20
      O konu biraz karışık,
      Mobil cihaza, işletim sistemine, izin verilen ayarlara, ve web sitesini görüntüleme seçeneklerine göre değişsede, başlar.

      Web Kenti4 Şubat 2016 11:53
      Değişir. Sitenin mobil sürümü neye göre ayarlı ve ziyaretçi cihazını neye göre ayarlamış vs.

      Sil
  22. Adsız18.1.23

    Adding and Customizing YouTube Videos to the Site

    YanıtlaSil

Yorum Gönder

🔺 YUKARI ÇIK 🔺