YouTube動画をレスポンシブサイト表示に対応させる
記事にYouTube動画を貼付けるには、<iframe>を使用します。
但し、レスポンシブサイトには対応していないため、動画表示が崩れてしまいます。
これをcssなどを使用して、縦横比率を維持しつつ上手く表示されるようにカスタマイズしていきます。
設定方法
1.以下のコードをStyle.cssに記載します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/* YouTubeのビデオ */ iframe { max-width: 100%; } .video { position: relative; width: 100%; height: 0; padding-top: 56.25%; overflow: hidden; margin-top: 30px; margin-bottom: 20px; } .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } |
2.YouTubeの<iframe>を<div class=”video”>で囲みます。
1 2 3 |
<div class="video"> <iframe width="560" height="315" src="https://www.youtube.com/embed/pkPM3ssKoL8" frameborder="0" allowfullscreen></iframe> </div> |
これで、きれいに縦横比率を維持してスマホなどでも表示されるようになりました。
自動的にdivで囲う
毎回divタグで囲う記述をするのは、面倒な場合があります。
WordPressでは、fanctions.phpに以下のコードを記述すると、自動で<div class=”video”>タグでマークアップされるようになります。
1 2 3 4 5 6 7 8 9 |
//YouTubeのビデオ:<div>でマークアップ function ytwrapper($return, $data, $url) { if ($data->provider_name == 'YouTube') { return '<div class="video">'.$return.'</div>'; } else { return $return; } } add_filter('oembed_dataparse','ytwrapper',10,3); |
記事にYouTubeの<iframe>を貼付けるだけに作業が楽です。
PR:プラグインの広告
*以下は動画プラグイン「Video Blogster Pro」の広告です。
Video Blogster Pro
「Video Blogster Pro」はYouTubeから自動で動画を取得して、記事を自動作成する有料プラグインです。
動画のまとめサイトやアンテナサイトが簡単に作成できます。全て自動で記事が作成されるため更新する作業は必要ありません。
YouTubeの設定を済ませれば、後は自動で大量の記事が作成され続けます。
参照記事:動画まとめサイトを自動で作成するWordPressプラグイン
レビュー
素晴らしいプラグイン!:)
私はコメント大量インポート機能が好きです
カスタマーサポートが感心しましたが、プラグインの品質は全体的に優れています。
プラグインは堅牢で柔軟性があり、適切にコード化されており、エンドユーザーでもテーマ開発者でも大変便利です。
フィードの作成と編集にはまだ改善の余地があります。
素晴らしいプラグインです。私はかなり同じことをやろうとしていた他のいくつかのプラグインを試しましたが、大規模なプロジェクトでは実用的ではなく、まったく時間がかからずに大規模な未編成の混乱に終わりました。
削除されたアイテム(ブラックリストなし)を自動的に再インポートし、既にインポートされたアイテムを再処理する方法はありませんでした。Video Blogsterは魅力的に機能し、特に私のような音楽関連プロジェクト(Soundcloud、Mixcloud、Spotify、Youtubeなど)のために、豊富なソースを持っています。
開発者のJohnは非常に有益で、質問に迅速に応答し、100%正常に機能していないようなことがあればすぐにアップデートを進めます。
私は長い期間このプラグインを使用しています、私にとっては最高の20ドルプラグインです!
このプラグインは私のすべてのニーズを完全に満たしました。敏感なサポート。私はお勧めです。
簡単に動作し、非常に手頃な価格です。
多くの便利なオプションがついています。これまでに1000本ものビデオで記事を作成しました。 WordPressの動画サイトスクレイピングは良いです。正直言って、私はこれの2倍の価格を支払っても良いでしょう!
すごいテーマ!素晴らしいサポート!7つ星
レンタルサーバによっては動かない場合もあるので一概にはいえませんが、それ程値段も高くないため一度使用してみるのも良いです。
結局プラグインを使うのはアイデア次第で、何かしらSEOも必要です。単純に動画だけを大量に作成した記事だらけにするのではなく、自分のオリジナル要素も追加して、アクセスを増やしたいものです。
*この広告はcodecanyon.netに記載されたレビューです。参考程度に留めておいてください。