PC・デジモノ・旅行など他にも色々語りたいブログ

Sponsor link

プラグインを使わないでYouTubeをレスポンシブにする方法

      2016/12/06

midashi-web

「YouTubeのサイズをレスポンシブにする」のにWordpressならばそのようなプラグインがいくつかあります。

しかし、Wordpressでも記事ならばそのプラグインを使えば良いかもしれませんが、サイドバーなどプラグインが使えない場所にYoutubeを貼り付けたかったり、WordpressのようなCMSツールを使わないサイト構成だったりした場合に、お困りじゃないでしょうか?

今回は、Javascriptを使って「YouTubeのサイズをレスポンシブにする」方法 をブログしたいと思います。

Sponsor link
Sponsor link

はじめに

YouTubeの貼付けコードはHTMLにただ貼り付けただけではレスポンシブになっていません。したがってPCでは普通に見えても、スマートフォンで見た時にはえらいこっちゃになっています。実際に見たほうが早いので下の画像をご覧ください。

jsfit02

上が対応させていないYoutubeですが切ないことになっていますね。

jquery.fitvids.js を用意しよう

>davatron5000/FitVids.js

から必要な「.js」ファイルを入手します。入手の仕方は、開いたらピンク線の引いてある(画像参照)「jquery.fitvids.js」を選択します。あとはコピーして自分のJSファイルに貼り付けます。

jsfit01

サイトに設置しよう

Jqueryを使えるようにしていない場合は、<head></head>の間に

その下に

更にその下に

便宜上「.fix」とclassを記述していますが、任意のclass名を入れてもらってOKです。

HTML

動画をレスポンシブで表示させてたい箇所に以下のコードを入れればレスポンシブになっています。「YouTubeの埋め込みコード 」の部分には配布されている「ifream」のコードを入れてくださいね。また、<aside>をつかっていますが、別に<div>でもOKですよ。

class名は上記で便宜上決めたやつです。任意の名前を決めた場合はそれをいれてくださいね。

CSS

もしも動画の余白やボーダーなどを厳密に設定下と場合には、今回の例の場合はclass「.fix」にしているので、

のようにレイアウト用の自分で用意したCSSに記述してあげれば言うことを聞いてくれるはずです。

まとめ

スマートフォンからブログやサイトを見るケースが多くなっていますので、やはりYouTubeもそれなりの配慮をしなければいけませんよね。それではまた!ノシ