Geçtiğimiz senelerde, YouTube videolarını responsive yapmak hakkında bilgi paylaşımında bulunmuştum. Bildiğiniz gibi birçok video sitesi, videoların embed kodunda iframe içerikli HTML kodu sunar. Ancak sitenize, bazı (Dailymotion gibi) video sitelerinden video gömerken, responsive amaçlı ek CSS kodlarına, div etiketlerine ihtiyaç duyabilirsiniz. Dolayısı ile tüm bunlar yerine, aşağıdaki kodu, temanızın style.css dosyasına eklemeniz yeterli olacaktır.

AYRICA: Embed ve Object Videoları CSS ile Responsive Yapalım

Iframe Videoları CSS ile Responsive Yapıyoruz

Yani böylelikle, iframe etiketli videolar, otomatik olarak boyutlandırılacak ve responsive bir hâle gelecektir. İlgili özellik, çok fazla gelişmiş değildir. Dolayısı ile, ilgili kod üzerinden çok kompleks bir işlevsellik beklemek doğru olmaz. Ancak ilgili CSS kodları, iframe içerikli görüntülerinizin, videolarınızın v.b. ekran ile daha uyumlu, responsive görünmesini sağlayacaktır.

iframe {max-width:100%!important;width:100%!important}

Bu içeriğimizde, iframe videoları responsive yapmak hakkında bilgi paylaşımında bulunmaya özen gösterdik. Karmaşık JS veya jQuery kodları yerine, kısa bir CSS kodu ile de, bu yönde aksiyon almayı düşünebilirsiniz.