ふかふか交易所

ふかふか交易所 | ゲーム、HP・ブログ制作、動画制作などのネットコンテンツ全般からレビュー情報まで分かりやすく紹介します

HP・ブログ関連 動画サイト関連

ホームページにYoutube動画を埋め込んだ際にレスポンシブ対応させる方法

こんにちは、ふかふかです!

ホームページにYoutubeの動画を埋め込んで再生できるようにしたのはいいものの、スマホなどで表示した際に、動画の横幅が画面サイズに合わなくてはみ出てしまう!...なんてことになったりはしていませんか?

そんな時でも大丈夫!今回紹介する簡単な解決方法を用いれば、Youtube動画を様々なデバイスにレスポンシブ対応(サイズ対応)させることができます!

Youtube埋め込みコードの記述

Youtubeの動画を埋め込む際、Youtube動画ページの"共有"→"埋め込みコード"をコピーして張り付けてますが、そのときのコードは以下のような感じになっていると思います。

コード例(編集前):

<iframe width="560" height="315" src="https://www.youtube.com/embed/aThCr0PsyuA" frameborder="0" allowfullscreen></iframe>

width(横幅)とheight(縦幅)があらかじめ指定されていますね。

レスポンシブに対応させるためには、widthを"100%"、heightを"auto"にしてください。

また、CSSの方でも編集を行うために、埋め込みコード全体を適当な属性を付けた<div></div>で囲んでおいてください(私の場合は"youtube"というクラス属性を与えています)。

 

コード例(編集後):

<div class="youtube">
<iframe width="100%" height="auto" src="https://www.youtube.com/embed/aThCr0PsyuA" frameborder="0" allowfullscreen></iframe>
</div>

CSSの編集

次に、上で埋め込みコードに割り当てた属性のCSSを編集します。

と言っても、CSSに以下のコードをコピーして貼り付けてるだけでOKです。

.youtube {
position: relative;
height: 0;
padding: 30px 0 56.25%;
overflow: hidden;
}

.youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

※.youtubeの部分は、自身が上で指定した属性に合わせてください。

 

以上で作業は完了です!

これで様々なデバイスの横幅に応じて、Youtube動画のサイズが変化すると思います。きちんとレスポンシブになっているかどうか、ご自身で確認してみてくださいね!

-HP・ブログ関連, 動画サイト関連
-, , , , , , , , , ,

Copyright© ふかふか交易所 , 2019 All Rights Reserved.