Youtube Videolarını Responsive Yapmak

Şu sıralar popüler olan metro tasarımlar ve responsive tasarımlar çoğaldıkça alternatiflerde çoğalıyor. Tasarımların yanı sıra artık widget olarak kullandığımız araçlarda responsive yani ekran çözünürlüğüne duyarlı hale geliyor.

İlk önce embed kodlarını sayfanıza eklerken bir class ile birlikte ekliyoruz.

         

            <div class="video-container">

                <iframe width="583" height="320" src="//www.youtube.com/embed/o3mP3mJDL2k"                                                                      frameborder="0" allowfullscreen></iframe>

                </div>

Daha sonra .css dosyamıza bu class’ın karşılığını yazalım ve ekleyelim.

               .video-container {

               position: relative;

               padding-bottom: 56.25%;

               padding-top: 30px; height: 0; overflow: hidden;

               }

               .video-container iframe,

               .video-container object,

               .video-container embed {

                position: absolute;

                top: 0;

                left: 0;

                width: 100%;

                height: 100%;

                }

Bu şekilde kayıt ettikten sora youtube videolarını responsive olacaktır.