2016/01/31

ブログ埋め込みのYoutube動画を自動的にスマホ向けにサイズ変更する方法

 

この記事を書いている人 - WRITER -

さいたま市1975年生まれの男性です。ブログを書いて生活しています。ブログは40個あって、いろいろテストしています。ひとの役に立つブログをかけるように日々勉強しています。よろしくお願いします。

ワードプレスでYoutubeを使いこなす方法。その1

iPhoneでブログを見ているとき、YouTubeの動画が、ブログ内で紹介されていたが、動画のサイズが画面からはみ出していた・・という経験ありませんか?

サイズ

Youtubeの動画のサイズを、自動的に、その閲覧者のスマホの画面のサイズに縮小してくれる方法をご紹介します。

動画のサイズの自動変更方法

youtubeの動画をブログにはりつけるのは一般的になってきましたね。

貼り付けたいと思った動画の、こんな感じのコードをYoutubeからとってきて、ビジュアルエディタではなくて、テキストエディタの方に、普通に、ブログを書き込む画面にくっつければいいわけなんですが・・


↑普通にブログ埋め込みコードを貼っただけの場合です。

スマホで、見てる場合は、右側がはみ出しているのではないでしょうか?

※ここまで、わかっているとして。ここまでが、わからない場合は、こちらを先に読んでください。

まあ、もっと、簡単にやるなら、YoutubeのURLをのせておくだけで、ワードプレスは、動画を埋め込んでくれるわけですが・・

ここで、スマホの画面サイズの問題が起きる

問題は、サイズを自動的に調整してくれないので、だいたいの動画が560ピクセルのサイズで表示されちゃうんですね。

まあ、パソコンでみてる場合は、問題になりませんが、スマホとかだと、画面から、右側がはみ出してきちゃうので、美観をそこねるし、なにしろ、動画がみづらいんです。

※そのために、ぼくは、昔はiPhoneを再優先して、横幅を300ピクセルに変換していたんですけど、それだと、逆にパソコンで見た場合、ちょう見づらいんですよね。

そのYoutube動画横幅問題を解消

もし、ワードプレスで、賢威ってテンプレートを使っているなら、

このiframeなんちゃらって、コードを

ってコードで囲めばいいんですね。

これは、賢威って、テンプレートで、あらかじめ用意されているクラスで、自動的に最適なサイズに変えてくれます。

そうすると、↓↓↓のように、自動的に大きさを変換してくれます。

もし賢威じゃない場合は?

もし、賢威じゃなくても、ワードプレスのCSSを追加して、カスタマイズしてあげれば、できるようになりますよ。

以下のコードを。ワードプレスの右の欄の、『外観』>>>『CSSの編集』のところに貼り付けてつかってください。

表示の大きさを変えてくれるCSS

賢威じゃない人は、これを『外観』>>>『CSSの編集』のところに貼り付けて

という風に、ためしてくださいね。こちらの関連記事も読んでください。
↓↓↓
youtubeの埋め込み動画スマホ(iphone)サイズ最適化する方法2

自分用予備コード

Similar Posts:

この記事を書いている人 - WRITER -

さいたま市1975年生まれの男性です。ブログを書いて生活しています。ブログは40個あって、いろいろテストしています。ひとの役に立つブログをかけるように日々勉強しています。よろしくお願いします。

 

Copyright© 藤田マリオのネットビジネス , 2015 All Rights Reserved.