Youtube Videolarını Responsive Olarak Siteme Nasıl Eklerim?

Youtube Videolarını Responsive Olarak Siteme Nasıl Eklerim?

Siz de bu soruyu sorduğunuz için siteme ulaştınız ve hoş geldiniz.

İnternette bir çok örnek bulabilirsiniz. Bunların içinde mesela overflow:hidden; kullanılan bir örnekte video kapsayıcısının yüksekliği 0px kalmıştı, dolayısı ile işime yaramadı.

Aşağıdaki örnekle videoları responsive olarak kolayca sitenize ekleyebilirsiniz.

CSS kodlarımızı tanımlayalım

Örnekte 16:9 kullandım farklı çerçeve oranlarını (3:2, 21:9 ve 4:3) da ekledim. Siz hangisini isterseniz kullanabilirsiniz.

.videoKapsayici {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 çerçeve oranı */
	/*
	padding-bottom: 66,67%;	3:2 çerçeve oranı
	padding-bottom: 42,86%;	21:9 çerçeve oranı
	padding-bottom: 75,00%;	4:3 çerçeve oranı
	*/
	padding-top: 25px;
	height: 0;
}
.videoKapsayici iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

ve HTML kodumuzu ekleyelim

<div class="videoKapsayici">
    <!-- YouTube, Vimeo vb. bir siteden iframe kodunu kopyalayıp aşağıdaki ile değiştirin -->
    <iframe
        allowfullscreen="" 
        frameborder="0" 
        height="315" 
        src="https://www.youtube.com/embed/jSSWFGq8RU4" 
        width="560">
    </iframe>
</div>

Sonuç olarak responsive videom aşağıda. Bu arada videodaki grubun vokali benim. Git isimli bestemizi seslendiriyoruz :)

 

Beğendiyseniz lütfen paylaşın :)



Yıldırım Erdemli
Yazar: Yıldırım Erdemli
Site:
Link: Youtube Videolarını Responsive Olarak Siteme Nasıl Eklerim?
Yayın Tarihi: 2017-01-25 10:02:36


Yorumlar