ハイリンクス

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_8663075893
WordPressの記事公開前に「いいの?」と警告メッセージを表示する方法

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

131206_2304
【Recommendation Bar】いいね!の多い記事が表示されるfacebook公式プラグイン

Recommendation Barは表示されている記事の下に、いいね!が押され …

medium_9044771759
WordPressのビジュアルリッチエディタとテキストエディタが表示・使用できないときの対処方法

この記事を書く一つ前の記事にてビジュアルリッチエディタとテキストエディタがまった …

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

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

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

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

140105_2301
【WordPress】YouTubeやデイリーモーションの画像を記事に貼り付ける方法!

WordPressにYouTubeやDailymotionなどの動画を記事に貼り …

140419_1704
WordPressで記事ごとに広告表示・サイズを切り替える方法

前回コチラの記事で WordPressでカテゴリーごとに広告表示を切り替える条件 …

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

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

medium_5598172
WordPressでの記事の投稿方法を簡単にまとめました!

WordPressでの記事投稿方法をご説明していきます。 今まで無料ブログで記事 …

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

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