Youtubeをレスポンシブデザインに対応

動画の縦横比率がおかしくなってカッコ悪いとお嘆きのあなたに!

WordPressでのカスタマイズ例です。Youtubeなどの動画をレスポンシブデザインに対応させるFitVidsという実に便利なjQueryがあるのですが、そのカスタマイズ例などを拝見していると、色々参考になることが書いてありました。まずは下記ご参照ください。

AUTOMATIC RESPONSIVE VIDEOS IN WORDPRESS WITH OEMBED

なるほど、色々とカスタマイズ出来そうですね。しかもこのFitVidsはWordPressプラグインまであるらしいので、それを使用すればオシマイ!という話ではあるのですが・・・しかし、私はあえてFitVidsは使用せずに、STEP3のfunction.phpをカスタマイズするところだけ参考にしました。iframeタグの前後に自動的にdivで囲ってあげるという部分です。

あとはCSSに下記を記述するだけ。「padding-top: 56.25%;」とするのは動画が16:9の比率だから。先ほどのfunction.phpを使って動画を投稿するたびに自動的に<div class=”video”></div>でサンドイッチするようになります。便利\(^o^)/

.video {</p>
<p>    position: relative;<br />
    width: 100%;<br />
    padding-top: 56.25%;<br />
}<br />
.video iframe {<br />
    position: absolute;<br />
    top: 0;<br />
    left: 0;<br />
    width: 100%;<br />
    height: 100%;<br />
}

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です