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 :)