harappa Office

大阪府堺市を中心に中小企業、個人事業主のみなさまのウェブマーケティング支援を行っています

ウェブやブログにyoutubeなどの動画を貼付ける時、はみださないようにするレスポンシブ的な方法。

      2013/11/03


photo by LimarieC

世の中はGWのようです。わたしのまわりに「海外行くんだー」とか「実家帰るんだー」って人が少ないのでまったく実感が無いです。

今日は特にツカミネタ無し。harappa岡本です。

デザイナーとかコーダーとかプログラマーとか名乗ったことはまったく無いですが、自分のサイトのことは自分でしないといけないので、たまにいじります。今回は動画貼付けのお話。

このサイトはWordpressのレスポンシブテーマを利用しています。

レスポンシブって何?おいしいの?って方もいると思います。そんなの常識。っていうかアレはアレで微妙よね。とか思ってる人はこの先読まなくていいです。レスポンシブというのは、ザクッといっちゃうと、PC向け、スマホ向けと別々のサイトを作らずとも、一つのサイトでPCもスマホもキレイに見えちゃいますっていうウェブサイトの作り方。

もうちょい具体的にすると、サイトにアクセスしたブラウザの横幅を検知して、サイトのレイアウトをブラウザの横幅に合うように組み替えるという作り方。

その筋をガリガリやってらっしゃる作り手の方たちからすれば、乱暴な説明なのかもしれませんが、そういうことができるWordpressのテーマを使わせてもらってます。

埋め込んだYoutube動画がスマホビューで画面からはみ出る。

そんな次世代っぽいものを利用してサイトができているワケですが、あくまで本職の方がつくったテーマをそのまま使わせてもらっているだけ(無料で配布されてます。誰でも利用できます)で、いじればいじるほど元の動作をしないことも多々あります。

Youtubeの動画貼付けもその一つ。Youtubeってのは動画をブログなどに貼付けるために、htmlコードを用意してくれていますよね。

これをそのまま記事やページにコピペすれば動画が貼付けられるんだけど、もちろんこいつは「レスポンシブ」じゃありません。PCで見ても、スマホで見ても、縦横のサイズは固定されています。もちろん上の埋め込みコードはPCで見やすいサイズになってるので、スマホで見ると、ガッバーっとはみ出てしまいます。はみ出たスクリーンショット無くてごめんなさい。はみ出るんです。

CSSにちょちょっと書き加えてから、貼付ける時に一手間かける。

なんだか料理教室みたいな小見出しですね。やり方としては常に横幅100%にする、みたいなやり方だと思います。すみません細かいことを言葉で説明できるほど基礎知識がありませんわ。

ほんとこのまんまやっただけなんで、本家を参考にしてください。

まずCSSに以下を追記します。

[css]
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
[/css]

で動画を埋め込む時に以下のような書き方をしてください。

[html]
<div class="video-container">
<!– ここにYouTubeやVimeoの埋め込みコード –>
</div>
[/html]

そのまま書いてもOKですし、class要素を任意に書き換えてもOKです。ようはCSSに必要なことを書いて、記事を書くときにCSSが適用されるように当該class要素のdivでくくってやる。たったそれだけ。

一手間かけてあげるって、たいせつなこと、ですねぇ。

この記事を書いた人

harappa 岡本
harappa 岡本harappa 代表/Web解析士/愛玩動物飼養管理士
1980年大阪府堺市生まれ
広告・ウェブ制作ディレクター、プロデューサーを経て、2012年harappaとして活動開始。紙媒体、ウェブ媒体問わず、企画、要件定義、プロジェクトマネジメント、制作に関わるひととおりのディレクション、プロデュースの実務。ウェブサイトのアクセス解析、ヒューリスティック分析など調査実務、最近ではSNS運用やウェブに関連する講師もやっています。
もうちょっと詳しい自己紹介はこちら。
facebookページでは裏話なんかも。

 - お役立ち, ウェブテクニック, ブログ

  関連記事

smooth
【会社訪問】smoothさんにお邪魔してきました。

少し前ですが、京都の制作会社smoothさんにお邪魔してきました。 実は結構お久 …

WordPressをカスタマイズする場合は、子テーマを作成すべし。

僕のようなプログラムが書けない人間でも、比較的カンタンに設置とカスタマイズができ …

WordPressはそんな簡単に扱えるシロモノじゃねぇんだよ。

photo by nateOne GWも終わりですね。いつも投稿時間なんて考えず …

ウェブサイトのアクセスを10倍にするために行った、たった2つの基本のキ。

photo by shizhao 最近はWordpressのことばかりでWord …

営業マンのペースにつかまらない「費用対効果」の思考法。

photo by kelsey e. 今日、週刊誌の広告営業の電話がきました(理 …

Facebook認証・連携機能をAndroid版へ先行導入
LINEがFacebook認証・連携機能をAndroid版へ先行導入

【LINE、さらなるインフラ化・グローバル化を目指し、Facebook認証・連携 …

スタバの無料Wi-Fiに接続してみたけど、やっぱり公衆無線LANは怖い。

スタバでスマホを触ってるとき、ふと無料Wi-Fiスポットがあることを思い出して接 …

no image
【動画】本日思わず見入ってしまったYoutube動画

スローな部分は一切編集無しだそうですよ。 4人組ダンスユニットのダブステップのダ …

Youtubeを使うメリット・デメリット

    昨今 “Youtube”とい …

EC/通販サイトのメールマーケティングにまんまとハマった一部始終。

photo by jjsala 今日2013年10月27日は大阪マラソンでした。 …

mautic is open source marketing automation