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

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

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