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

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

  関連記事

アメブロのリンクがnofollowになってたらしい。で、いつ独自ドメインに乗り換えるの?

photo by Hunter-Desportes はいはい、今でしょ今でしょ。 …

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

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

株式会社メトロール
【事例紹介】株式会社メトロール/精密位置決めスイッチ専門メーカー

今日はfacebook活用事例の紹介でもしましょうか。 株式会社メトロール ふた …

腐女子の「二次元萌え」プロセスが僕の思考を軽々と超越していた件。

「当盛五人揃肌競」 豊原国周 最近ブログネタを血眼で探している僕です。巷ではブロ …

Webライティングの基本を切磋琢磨しながら実践するサマージャムはじめました(身内の話)。

photo by pedrosimoes7 暑い。暑い。暑い。毎日暑い。 こうも …

facebookの公開投稿をブログなどに埋め込むことが可能に!ついでにうちの犬畜生を紹介!

photo by Howard Dickins 今日蒸し暑い!そのへんに水蒸気が …

軍艦島のGoogleストリートビュー撮影に感じた尊敬と、Google先生へ提言ひとつ。

photo by Googleストリートビュー Googleストリートビューがあ …

グランフロント大阪の影響をモロに受けてるかもしれないアレ。

photo by Eneas どうも。harappa岡本です。 2013年4月2 …

横文字を使わずマーケティングオートメーション(MA)とは何か簡単に説明します!〜MA初級〜

2014年ごろから日本でも注目されるようになってきた、マーケティングオートメーシ …

大阪のウェブコンサル・コンサルティングってどうなのよ。ちょっとGoogle先生に聞いてみた。

photo by goingslo 今年は桜が散るタイミングに差がありませんか? …