【CSSコード】スマホで動画がはみ出る時の対処方法【レスポンシブ化】

動画が画面をはみ出していた時の絶望感と、きちんと画面内に収めることができた時の快感が忘れられません、リョウです。

みなさんも埋め込み動画を使った記事をチェックした時に、PCでは画面内に収まっているのに、スマホでは画面外にはみ出してしまった経験をしたことはありませんか?

これは、スマホ画面の解像度を動画の解像度(横幅)が超えている場合に起こります。
※PCの場合は解像度が高いので通常は発生しません。

ここでは、CSSにコードを記述して、動画をレスポンシブ化する方法を説明したいと思います。

スタイルシート(CSS)に動画レスポンシブコードを記述する方法

基本的には、下記のコードをテンプレートのCSS(Cascading Style Sheets、スタイルシート)に追記すれば、動画が画面内に収まるようになります。

※”responsive”の部分は任意の文字列に変更してOKです(dougaやmovieなど)。

.responsive{
position:relative;
width:100%;
padding-top:56.25%;
} 

.responsive iframe{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
}

このコードを簡単に説明すると、.responsiveという名前のクラスを作成して、動画の位置や幅を設定しています。

実際に記事に動画を貼る際には、上のコードの記述は必要なく、下記のように動画の埋め込みコード(<iframe>~<frame>)を”divタグ”で囲うようにします。

HTML編集モードで行います(ワードプレスならテキストモードです)。

<div class="responsive">

<iframe>動画のコード</iframe>

</div>

”div”はdivisionの略称で、分割や区分といった意味を持ちます。
つまり、divで囲んだ範囲をひとまとめにできるということです。

よく見ると、divの後に”class”と続いていますが、classにはdivに意味を持たせる働きがあります。

<div class=”responsive”>とすることで、divで囲んだ範囲に”.responsive”で設定した内容を含ませることができるわけです。

追加CSS(デザインCSS)に動画レスポンシブコードを記述する方法

もし上の方法で駄目だった場合、追加CSSに記述してみてください。

ワードプレスであれば、「外観」→「カスタマイズ」→「追加CSS」と進みます。

他の無料ブログでは、たとえば”はてなブログ”なら「デザインCSS」と表記されていると思います。

記事単位で動画レスポンシブコードを記述する方法

たいていは上二つの方法でレスポンシブ化することができますが、稀に適用されないケースも存在します。

その場合は、1記事ごとに内部スタイルシートを使って記述すると上手くいきます。

上でテンプレートのCSSに組み込んだのと同じコードを、

<style>< /style>

で囲って、HTML編集モード(テキストモード)で追記します。

”styleタグ”は、テンプレートのCSSに記述できないコードを、記事単位で直接指定する機能を持ちます。

下記のように、divタグと動画埋め込みコードの間の”.responsiveクラス”を挟む形で記述してください。

<div class="responsive">

<style>

.responsive{
position: relative;
width: 100%;
padding-top: 56.25%;
}

.responsive iframe{
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}

</style>

<iframe>動画のコード </iframe>

</div>

これで問題なく画面に合わせてレスポンシブ化することができるはずです。


以上、動画をスマホではみ出さないようにする3つのレスポンシブ化方法をご紹介しました。

3つ目の方法は、SEO的には如何なものか分かりませんが、少なくとも体感速度といったユーザビリティに変わりありませんでした。
(動画サイトでソースコードを見てみると、使ってるところもけっこうありますよ)

検索エンジン以前に、ユーザーを意識することの方が大切なので、ぜひ活用してください。

もし、今回紹介したコードを見て、「何が何だか意味が分からない」という人は、プログラミングを学ぶとすんなり分かるようになりますよ。

それではまた~。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です