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ページでは裏話なんかも。

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

  関連記事

すきま産業だから考えるべき、ごく当たり前な4つのポイント。

photo by cyawan みなさんお気づきでしょうか。当ブログの画像には本 …

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

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

インクの匂いが好きな人へ贈る、印刷されたばかりの本のにおいがする香水があるとか。

roomieさんからのネタです。 本好きというか、あのインクの匂いが好きな人には …

【動画】【閲覧注意】YouTubeVICE日本語チャンネルが面白そう

※下記に貼付けるYoutubeの動画は閲覧注意です。 ViceMagazineと …

河川カメラはもう少し使えるコンテンツにならんのか。

photo by sidibousaid60 台風。怖いです。 届いてますか?携 …

地味だけど超使えるROW関数。エクセル/Googleスプレッドシートテクニック。

photo by John Cooper あーもう久しぶり。前回コレを書いたのが …

Feedlyボタンを設置してみたら、簡単すぎて拍子抜け。

  開発者じゃないのでこういう類の記事を書くこともないんだけど、あまり …

Gmailのエイリアス機能を利用して、情報漏洩に防衛線を張る。

photo by kellinahandbasket ※2013年5月2日:記事 …

amazon marketing services amazon pages
「Amazon Marketing Service」の「Amazon Pages」申請に落ちた

当たり前といえば当たり前なんですけど。 Amazon Marketing Ser …

徳田耕太郎 (Tokura) は4位で残念。しかしレッドブルのイベントはいつもニクい。

photo by by *_* 9月も後半だというのに、まだ蒸し暑いですね。短パ …

mautic is open source marketing automation