Bootstrap ile YouTube Videolarını Web Sitenize Gömme
Bootstrap, web geliştirme için popüler bir CSS çerçevesidir ve YouTube videolarını web sitenize kolayca gömme özelliği de dahil olmak üzere çok sayıda özellik sunar. Bu makalede, Bootstrap kullanarak YouTube videolarını web sitenize nasıl gömeceğinizi adım adım göstereceğiz.
Adım 1: Bootstrap’i Web Sitenize Ekleyin
Bootstrap’i web sitenize eklemek için aşağıdaki <link> etiketini sayfanızın <head> bölümüne ekleyin:
html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Adım 2: YouTube Videoları İçin Gerekli Sınıflar
Bootstrap, YouTube videolarını görüntülemek için özel sınıflar sağlar. Bu sınıflar şunlardır:
.embed-responsive: Duyarlı bir video oynatıcısı oluşturur..embed-responsive-item: Duyarlı video oynatıcısının içindeki videoyu tutar.
Adım 3: YouTube Video Kodunu Alın
YouTube videosunun gömme kodunu almak için şu adımları izleyin:
- YouTube’da videoyu açın.
- “Paylaş” düğmesine tıklayın.
- “Göm” sekmesine tıklayın.
- “Kodu Kopyala” düğmesine tıklayın.
Adım 4: YouTube Video Kodunu Sayfanıza Ekleyin
YouTube video kodunu sayfanıza eklemek için aşağıdaki HTML kodunu kullanın:
“`html
“`
“YOUTUBEVIDEO_URL” ifadesini YouTube videosunun gömme koduyla değiştirdiğinizden emin olun.
İstediğiniz Boyutu Ayarlama
Varsayılan olarak, YouTube videoları 16:9 en boy oranıyla görüntülenir. Farklı bir en boy oranı istiyorsanız, .embed-responsive sınıfına aşağıdaki ek sınıfları ekleyebilirsiniz:
.embed-responsive-4by3: 4:3 en boy oranı.embed-responsive-1by1: 1:1 en boy oranı
Oynatma Kontrollerini Gizleme
Varsayılan olarak, YouTube videoları oynatma kontrolleriyle görüntülenir. Oynatma kontrollerini gizlemek için .embed-responsive-item sınıfına controls=0 özniteliğini ekleyebilirsiniz:
“`html
“`