ハイリンクス

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

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

関連記事

medium_4167966264
初心者さん必読!サーバー契約から記事投稿(WordPress)までの流れ

ウェブサイトを全く作ったことがない人にとっては何から始めていいのか?わからないこ …

131110_2301
プラグインなしでmoreタグ部分にアドセンス広告を挿入する方法

Google AdSenseの配置でクリックされやすい効果的な配置場所として「記 …

140105_2201
【WordPress】画像をアップロードし記事に貼り付ける方法!

WordPressに画像をアップロードして記事に貼り付ける方法をご紹介しておきま …

131129_2201
【zenback】サイトへのアクセス数がアップ↑する魔法のブログパーツ

zenbackはサイト・ブログの記事下・サイドバーに設置することで、関連記事やソ …

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

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

131212_2138
WordPressのコメント欄をカスタマイズ!メルアド・サイト項目を削除

WordPressのデフォルトのコメント欄って要らない項目を削除することが素人に …

medium_3008912290
WordPressをインストールしたら絶対行なうべき6つの設定変更!

お名前ドットコムやムームードメイン、バリュードメインなどのレジストラでドメインを …

medium_8663075893
WordPressの記事公開前に「いいの?」と警告メッセージを表示する方法

WordPressでサイト・ブログを作成しているなら一度は経験したことがあるあれ …

131125_2201
hootsuiteでWordPressの更新記事をGoogle+ページに自動で投稿する方法

WordPressの更新記事をGoogle+ページに自動で投稿する方法をご紹介し …

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

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