ハイリンクス

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_2797544238
ping送信先一覧!生きてる・効果があるURL20個をご紹介!

突然ですが・・・pingを送信していますか? まぁ正直ping送信したからアクセ …

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

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

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

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

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

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

medium_2536017020
無料ブログではなく独自ドメイン(WordPress)を使用する意味!

初めてブログを運営する。こう考えたときに頭に思い浮かぶことはFC2やseesaa …

medium_6040687408
サーバーを使用してWordPressをドメインに自動インストールする方法

サイトを運営するにあたってWordPressというのはとても優れものです。無料ブ …

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

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

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

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

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

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

131221_1302
Vertacalタイプ(箱型)のソーシャルメディアボタンをプラグインなしで実装する方法!

サイトにソーシャルメディアの共有ボタンがあるとないとでは記事の拡散にかなりの違い …