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 {

    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
Pocket

コメントを残す

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