2015年10月アーカイブ

スマホ対応する案件が増えるに連れ、YouTubeを横幅100%に対応させることも増えてきました。
その度に検索しにいっているので残して置こうと思います。

いつも参考にさせていただいてるのはこちらの記事。



■HTML

<div class="movie">
    <iframe src="https://www.youtube.com/embed/XXXXXXXXXXX?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>


■CSS

.movie {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; /* 現プレイヤーでは不要? */
    height: 0;
    overflow: hidden;
}
 
.movie iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

上記で簡単に実装できます。


レスポンシブなサイトを作る場合、PC表示では決まった width・height に背景画像を敷くだけで良かったものが、SP表示では横幅に合わせて可変させなければならない、という場面は多いと思います。
背景画像に合わせて高さを可変させることはできませんが、この指定を応用することで実装可能です。
上記のソースの padding-bottom に背景画像の縦の比率を入れ、背景画像と背景サイズの指定を加えます。

.movie {
    position: relative;
    padding-bottom: XXX%;
    background: url(背景画像のパス);
    background-size: 100%;
    height: 0;
    overflow: hidden;
}

このアーカイブについて

このページには、2015年10月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2015年1月です。

次のアーカイブは2016年2月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。