youtubeのレスポンシブ化をCSSを使って簡単に解決する方法

ワードプレスを使ってブログをしている方でyoutubeやgooglemapを埋め込む人も多いと思います。今まで、パソコンで見る分には問題なかったので全く無視していたのですが、googleのモバイルフレンドリー対策でどうしても必要になったので取り入れてみました。

CSSについて初心者の僕ですが、誰にでも簡単にできる方法(WordPressや通常サイトでYoutubeやVimeoの動画の埋め込みをCSSで簡単にレスポンシブWeb対応にさせる方法)がありましたので、こちらを交えて紹介いしたいと思います。やることは3つだけで設定もコピペだけ、かつ10分あれば十分に終わります。

youtubeがレスポンシブ化される前

昨日投稿したブログですが、テンプレはレスポンシブ化していたものの、youtube はレスポンシブ化していなかったので、最初はこんな結果に…。
2015-07-12 11.37.42
キリンの頭が映らず、
2015-07-12 11.37.53
文字も切れてしまっています。

 

レスポンシブ化された後

それがレスポンシブ化した後だと、こんなふうに綺麗に画像に反映されます。

2015-07-12 13.40.56 2015-07-12 13.44.41

 

動画の内容もしっかり把握できるし、ブログページからyoutubeページに飛ばすことなく動画をみることができるのでページ滞在時間をあげるのにも効果的です。

 

レスポンシブ化する方法

まず、下のコードをコピーします。

 

style.cssに貼り付ける

cssに詳しくない僕はいったいこのコードをどこへコピーしたらいいのか、最初わかりませんでした。cssと言われても、新しいcssファイルを作らなければならないのか、それともどこかのファイルにハリルければいいのか…。

そんな感じでしたが、色々試してみてわかったことはテンプレートのファイルの中にあるstyle.cssの一番下に貼り付ければいいだけでした。

style.cssの場所

ftpをいじれる人であれば、テンプレートのファイルの中にあると分かれば、どこにstyle.cssがあるかわかるでしょう。テンプレートのしたのディレクションに入ってます。

それでわからない人はワードプレスのダッシュボード→外観→テーマの編集に。

 

そしたら、

❶スタイルシートをクリック

❷スタイルシートの編集画面の一番下に行き、コードを貼り付ける。

❸ファイルの更新

スクリーンショット 2015-07-12 14.47.03

これでCSSの設定は終わりです。次にaddquicktagというプラグインをインストールするします。これをすることによって格段に効率化できます。

Addquikctagをインストール、設定

このプラグインをの入れると、たったボタンを2回おすだけで、全てのyoutubeやvimeoなどの動画をレスポンシブ対応にしてくれます。設定もコピペでできます。

インストール

スクリーンショット 2015-07-12 14.52.26

Addquicktagの設定

インストールしたら設定画面で下記のように文字を入れます。コピペで着るように画像の下にコードを貼り付けておきました。また、画像右側にあるビジュアルエディター等のチェック欄に全てチェックを入れてから「変更を保存」することを忘れずに。

スクリーンショット 2015-07-12 14.53.17

 

  • ボタンのラベル= 動画タグ
  • sutat tag = <div class="move">
  • 終了tag=</div>
  • access key and 順番 =0

これで編集の準備が整いました。ビジュアルエディター等のチェック欄に全てチェックすることも忘れずに。

編集で動画の文字を埋め込む

ここで必要なのは貼り付けたいyoutubeのURLです。

スクリーンショット 2015-07-12 15.27.11

編集画面で動画をはめ込むタグをクリックして、

 

スクリーンショット 2015-07-12 15.24.42

動画を挿入/編集が表示されていない場合はTINY MCS ADVANCEDの設定とインストールが必要になりますのでこちらを参考にしてください。

ソースの欄にURLを貼り付けます。

 

 

スクリーンショット 2015-07-12 15.29.17

 

動画が下記のように表示されたら、編集ツールにあるQuicktagsから動画タグを選択。

 

スクリーンショット 2015-07-12 15.29.43

 

すると、動画はこのように色つきになります。(こちらは画像です)
youtubeのレスポンシブ化をCSSを使って簡単に解決する方法

編集画面での大きさはレスポンシブしてないですが、これを投稿後、もしくはレビュー画面で確認するときちんとレスポンシブに対応していることがわかります。

レスポンシブ対応してない場合はAddquickタグの設定が間違っている場合が多いのです。もう一度最初から確認してみてください。

レスポンシブ対応したミスター・ビーンの動画

グーグルマップのレスポンシブ化

グーグルマップのレシポンシブ化はURLではなくて、iframeのタグを引っ張っきて動画を挿入するタグのをクリックし、「埋め込む」を選択しコードを貼り付けます。
css レスポンシブ対応 youtube
一般の「ソース」に貼り付けると表示されません。そのあとは同様に表示されたグーグルマップを選択し、Quicktagから動画タグを選択すると、下のグーグルマップのようにレスポンシブ対応となります。

まとめ

最初は、HTMLもいじれないしのにCSSなんてやたらにいじって大丈夫なのか?なんて思いましたが、コピペだけでできるので簡単です。

ここ数年で、スマホからのアクセスが7割ほどに増えているので、どんどん、スマホ対策は必須になっていきますね。動画やマップもしっかりとレスポンシブ対応したいという人は是非参考にしてみてください。

 

今回参考にさせていただいた、WordPressや通常サイトでYoutubeやVimeoの動画の埋め込みをCSSで簡単にレスポンシブWeb対応にさせる方法 のサイトですが、この大本は下にある「現場でかならず使われているWordPressデザインのメソッド」だそうです。

できれば、動画タグを入れなくても動画のURLもしくはiframeタグを入力すればいい方法を探しているので、もう少しCSSも勉強していきたいと思います。

youtubeのレスポンシブ化をCSSを使って簡単に解決する方法
Tagged on:             

コメントを残す

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