YouTubeなどiframeの動画のレスポンシブ対応~CSSとWordPressプラグインどっちがいい?

速水です。

WordPressなどでテンプレートをレスポンシブのものに変えても、動画はレスポンシブになってなかったりします。

あ、レスポンシブというのは、パソコンとかスマホとか、画面の大きさに応じてサイトの表示を変えてくれますよ、というものです。

それで、文章とか画像とかは、レスポンシブのテンプレを使っておけば大丈夫なんですけど、動画は駄目みたいなんですよね。

ユーチューブの動画を、ブログに貼り付けたりしますよね。それで、スマホなんかで見ると、動画が画面からはみ出してしまう、ということですね。

だから、動画も何とか、画面に合わせて伸縮してほしいと。

それでその方法を探してみたわけです。

それで、3つ方法を見つけました。

一つはWordPress限定の方法で、二つ目はCSS(スタイルシート)を使っているサイトならどんなサイトでも使える方法。SeesaaとかFC2とか無料ブログでも使えると思います。最後の一つは賢威でしか使えない方法

WordPress専用の方法

ということでまず、WordPress特有の方法ですが・・・というともうあれですよね。プラグイン。

Advanced Responsive Video Embedder

というプラグインですね。

これ、WordPressのプラグイン管理画面で検索してインストール、有効化すればすぐに使えます。

適当にいじっていれば使い方はすぐにわかります。

特に設定もいりませんが、「オートプレイ」はオフにしておいたほうがいいでしょう。アクセスしただけで動画が再生されるページなんて、イヤですからね。^^;

ただ。

最大の欠点が・・・

欠点というのはこれです。

69936

上記プラグインをインストールして有効化するとですね、この画像のような長ったらしい文章が、WordPressの管理画面に表示されるようになります。

しかも恐ろしいことに、全てのページに! 消すこともできません。

この画像は旧バージョンのものですが、試しに最新のものに変えてみると、文章は消えるどころか更に増えました・・・(泣

こんな邪魔なものが常時表示されるというのは・・・私としてはイヤだったので、結局Advanced Responsive Video Embedderはアンインストールしてしまいました。^^;

気にならないなら使ってもいいと思います。すごく便利なプラグインですので。

WordPress以外でも使える方法

ということで、私が採用したのは二つ目の方法。WordPress以外でも使える方法ですね。

こちらのほうが簡単かもしれません。

まず、CSS(スタイルシート)に以下のように書き込みます。

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

そうそう、書き込むべき場所ですけど、賢威のWordPress用テンプレでは「design.css」に書き込むとうまくいきました。無料ブログですとだいたいCSS(スタイルシート)は一つしかないので迷うことはないでしょう。

これで準備完了。

あとは動画を貼り付けるときに、動画のソースを「<div class=”video-container”>~</div>」というタグで挟むだけです。

<div class=”video-container”>

<iframe width=”480″ height=”300″ src=”https://www.youtube.com/embed/iC5FDzUh0P4″ frameborder=”0″ allowfullscreen></iframe>

</div>

このようにします。これで実際に動画を表示させてみると・・・

 

こうなります。

 賢威専用の方法

ただですね、よくよく調べてみると、賢威の場合はもっと簡単なようです。

CSSへの書き込みも必要なく、ただ、

<div class=”v-wrap al-c m30-b”>~</div>

というタグで、動画の貼り付けソースを挟むだけです。

でもこの方法はもちろん「賢威限定」ですので、他のWordPressテンプレや無料ブログでは使えません。

他のテンプレの場合は、上記の「CSSに書き込んだあとタグで挟む」方法をとるとよさそうです。

 

速水でした。

最短距離で成果に到達し、将来も安定して報酬を得続けるために
こちらで私の持つ知識をまるごとお伝えしています。

速水鏡の「東大式」ネットビジネス講座
ネットビジネスで生き残るための「3つの必須スキル」プレゼント中

何でも気軽にお問い合わせください。^^

お問い合わせフォーム

関連記事:

速水鏡のインターネット副業講座【目次】

サブコンテンツ
管理人

管理人:ハヤミ(速水鏡)

趣味:オンラインゲーム、
読書、パソコン自作

特技は立ち読み。「タダ」で最後まで読み切った本は軽く百冊を超える。本屋さんの敵。(笑

そしてネコ好き

プロフィールはこちら

このページの先頭へ