ハイリンクス

WordPressのプラグインやオススメツール・ソフト、その他実際に使ってみて「コレだ!」というものをご紹介

WordPressにビデオ動画を埋め込んでもwindow幅に合わせて自動でリサイズする神ワザ!

      2013/12/18

131217_2202

WordPressの記事中にyoutube動画を埋め込むときってこんな感じですよね

youtube動画ページ > 共有 > 埋め込みコード > 動画のサイズを選択 > テキストエディタにコピペ

スポンサーリンク

 

サイトコンテンツの幅によって動画のサイズを変更すると思いますけど、何気にジャストフィットで収まるwidthの調整って難しいですよね?というかあまり気にしないでyoutubeが指定しているサイズでそのままっていう人が多いはず。

別に気にしないぜ!って場合でも、youtubeの一番嫌なところはhtmlを使用してもコンテンツの真ん中に寄せることが出来ないこと・・・とりあえず左側ぴったりになるんですよね。。。

しかも!パソコンではまぁ良くても(実際には気に入りませんが!)スマホやタブレットで見てみると・・・愕然とするくらい横幅が広くて下にスクロールしているのに横に移動したりと・・・う、うざい・・・ということがあります。

 

今回はビデオ動画をwindow幅に合わせてリサイズしてくれる超超超神ワザをご紹介します!!正直、コレを知ったときの感動は忘れられません^^

ちなみにこんな感じでコンテンツ幅ピッタリ!ジャストフィット!!

131217_2201

ご紹介といってもこちらの記事を参考に・・・いや、コードはそのまま使用させてもらっています^^マジで感謝です!!

http://blog.quusookagaku.com/wordpress/6234/

 

 

 

神ワザの方法

下記のコードをCSSに書き加えます。どこでもOKなので分かりやすく一番下に。

もしPCとスマホでは違うテンプレートを使用しているのであれば、スマホ用のCSSにも同じコードを貼り付けましょう。

 

そしてビデオ動画のコードを下記のコードでサンドイッチしちゃいましょう^^

 

なんと・・・これで終~了~なんです!驚くほど簡単でしょ!!

ビデオ動画幅を自動でリサイズするのでコード作成時に必要なwidth=”xxx”やheight=”xxx”は全く気にしなくてOKです。

これはマジでスゴイ!!

 

 

 

AddQuicktagでストレスフリー

記事に動画をい~っぱい埋め込むサイトじゃない限り<div>を一回一回手打ちすればいいんですけど・・・正直面倒くさいですよね?

そんな時に役に立つのが・・・WordPressプラグインのAddQuicktag!!

これで事前にタグを登録しておきましょう。

131217_2301

 

これでビデオ動画をWordPressに埋め込むのは飛躍的に楽になりましたね^^

 

 

 

まとめ

WordPress記事中にあるビデオ動画をwindow幅に合わせて自動でリサイズする神ワザをご紹介させて頂きました!(実際にはほとんど参考させてもらっていますが^^)

このやり方ならば今まで気になっていたビデオ動画の幅を気にすることもなく、サイトの見栄えがグンっとあがります。特にスマホ・タブレットで横幅がきっちり収まるのがサイコーです!

是非とも今からやってみてください。感動してしまいますよ^^

 

 

 

追記

youtubeなどの動画だけでなく、google mapでも幅がピッタリフィットしました!!この方法なら外部サービスをWordPressに埋め込むときにサイズを気にしないでいいですね^^

ちなみに画像はムリでした

 

 

 - WordPress


  • このエントリーをはてなブックマークに追加

Message

メールアドレスが公開されることはありません。

関連記事

140105_1903
Google Analytics(アクセス解析)をWordPressに導入する方法!

サイトを運営するにあたってアクセス解析は必ず導入しておきましょう。いつ誰がどんな …

141122_2101
Font AwesomeアイコンをCSSを使ってWordPressサイトに表示させる

Stinger5では記事公開日やカテゴリーなどのアイコンがデフォルトでFont …

141118_1904
エックスサーバーからワンクリックでWordPressの表示速度が高速化!

はてブをチェックしていたらこんな記事を発見しました。 レンタルサーバーの速度向上 …

140416_2101
WordPressでカテゴリーごとに広告表示を切り替える条件分岐タグのやり方

WordPressで広告を掲載しているんだけど、カテゴリーによってはマッチしない …

131223_2301
WordPressのRSS feedがエラー表示されているときの対処法!

当サイトではRSSフィードとIFTTT(イフト)を連携させてTwitterとfa …

140105_1803
WordPressにテーマ(テンプレート)をインストールする方法!

WordPressの初期インストールされているテンプレートってちょっとだけ見栄え …

credit: WingedWolf via FindCC
WordPressサイトのテーマ・テンプレートやプラグインがチェックできるウェブサービス

ウェブサイトやブログを見ていて「このサイトって何のWordPressテーマ使って …

131220_2102
WordPressでソースコードをファイル毎に分けて管理する方法!これは断然ラク!

WordPressをインストールしたらデフォルト設定のまま使用するってことは(た …

131205_2221
【IFTTT(イフト)】WordPressプラグイン不要でTwitterやfacebookに自動投稿する方法

IFTTTは「If This Then That」ということだ!・・・まったく意 …

140319_2202
これだけ?.htaccessに3行コードを追加するだけでWordPressが高速化!

ボクのサイトは記事数がまだまだ100ページと少なく、画像もTinyPiNGやJP …