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

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

  関連記事

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

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

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

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

GoogleAnalytics(グーグルアナリティクス)って何ができて、何ができないの?

photo by FlackJacket2010 愛犬がわたしの寝床を占領してど …

facebookの「いいね」誰が押したのかすごく気になります(棒読み)

photo by Chris Owens どうもどうも。とある事情で数年ぶりに写 …

SEO対策は誰のため?
SEO対策は誰のため?

はじめまして、愛媛県松山市でインターネットメディアを運営しているぬこファクトリー …

Webライティングサマージャムの途中経過と、まわりのちょっとした変化

photo by harappa (Canon EOS 70D) そうなんです( …

ゴールばかりを見ていると、大事なものを失くすかも。というリスク。

photo by Elsie esq. この仕事するようになってから男らしくなっ …

【新日本プロレス壁紙】G1 CLIMAX 24を撮ってきたー!

※この記事はWebライティングを磨く「Webライティングサマージャム」の企画記事 …

Youtubeへの動画アップロードの方法と所要時間。おまけに画質の比較をしてみた

photo by slava 先日「Youtubeのメリット・デメリット」を書い …

お金をかけりゃいいってもんじゃない。道具は身の丈にあったものから。

自戒の念を込めて。。。 GIZMODEさんに「ぜんぜんデジタル一眼レフを使いこな …