• Home
  • twitter
  • Facebook Page
  • google+
  • RSS
  • follow us in feedlyfeedly
  • Contact Form
OPEN
2012/08/08

Youtubeなどの動画コンテンツをスマートフォンの横幅に合わせてくれるjQuery「FitVids.js」の搭載手順

YouTube cafe
YouTube cafe / marioanima

WPtouchを搭載したブログによく見られるのですが、自分のブログでもYouTubeなどのビデオを掲載した記事をスマートフォンなどで閲覧した際、横幅が画面からはみ出してしまい気持ち悪かったので、動画コンテンツを自動的にスマホの横幅に合わせてくれるjQuery「FitVids.js」を導入してみました。


手順

参考にさせて頂いたのは@mk_mizuho さんのブログあかめ女子のwebメモさんの以下の記事。

[Å] YouTubeやVimeoなど固定サイズになった外部の動画をレスポンシブに対応させる方法 | あかめ女子のWebメモ

 

Skitched 20120807 212700

まずはdavatron5000/FitVids.js · GitHubへ訪れまして

Skitched 20120807 212835

Skitched 20120807 212922

上の手順で「jquery.fitvids.js」をDLしましょう。

 

Skitched 20120807 213140

DLしたファイルを解凍、「jquery.fitvids.js」をサーバの適当な場所にアップします。

 

コード

アップが終わりましたら、ヘッダー部分の<head>タグ内に以下を記述します。
WPtouchプラグインを使用しているのであれば、header.phpは「wp-content/plugins/wptouch/themes/core/core-header.php」になりますので注意。

header.php

<html>
<head>
(中略)
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/jquery.fitvids.js"></script>

<script>
//youtubeリサイズ
$(function(){
	$(".video_resize(任意)").fitVids();
});
</script>
(中略)
</head>

「.video_resize」は適当に名前を付けてあげましょう。

 

記事に動画コンテンツを配置する

ここまで済んだら、あとは動画コンテンツを含む記事をアップロードする際に、動画のタグをさきほど名前をつけたクラスのdivタグで囲んであげるだけでおk!

<div class="youtube_resize">
	動画コンテンツ
</div>

以上だ!

 

20120807012457

これで、搭載前はこんな感じで見えていた動画コンテンツが…

 

20120807012652

スマホの横幅ピッタリに自動的にサイジングされました!
ピッタリのスマホ!キッツキツのスマホ!

動画の幅が画面サイズからはみ出してると、格好悪い上に、それに付随してスクロールもしづらくなるしで良いこと無しなんですよね。

とても簡単にスマホのサイズに動画コンテンツを合わせてくれるこちらのjQuery。
ぜひお試しあれ:)

SPONSORED LINK

FB Comments

About This Site

Mac,iPhone,Evernote,Web,Foodを中心に様々な情報をお届けするブログです。
ふざけた文体が目につきますが、本人はいたってふざけております。
ご意見・ご感想は info[at]ozpa-h4.com もしくはコンタクトフォームまでどうぞ。
広告掲載、執筆、取材などの依頼も受け付けております。
さらに詳しく

SNS

×