Celtis_s テーマの動画等レスポンシブ対応について

Celtis_s テーマは、レスポンシブ対応のテーマなので、文章や画像はコンテンツエリアの幅に応じて適切にサイズ調整されて表示されるようになっています

ただ、素のテーマだけでは、埋め込んだ動画やスライド等が適切にフィットしない場合が有りますので、celtispack プラグインをインストールして FitVids と oEmbed extend 機能を有効化して下さい

動画等へのレスポンシブ対応

動画やスライドは oEmbed という機能で WordPress の記事内に埋め込まれることが多いのですが、埋め込まれた iframe 要素内のコードがレスポンシブに対応しているかどうかというのはまちまちです

そこで FitVids という jQUery プログラムを使うとコンテンツエリアの幅にフィットさせて表示することが出来るようになります

FitVids.JS – A lightweight, easy-to-use jQuery plugin for fluid width

埋め込んだ要素側でレスポンシブ対応しているのがベストですが、対応していない場合でも FitVids をカスタマイズすれば対応できる可能性もあります

サンプル

動画やスライドを埋め込んでみます

埋め込む方法は、その動画やスライドへのリンクを貼るだけです
スマートフォンから、タブレット、デスクトップまでそれぞれ最適なサイズで表示されます

デスクトップで閲覧しているならばブラウザのサイズをいろいろ変えてみてください

いい感じで拡大縮小してくれるはずです
SlideShare と SpeakerDeck のスライドが混在してもサイズが揃って表示されます (^^)

 

Youtube

Vine

Vine
The entertainment network where videos and personalities get really big, really fast. Download Vine to watch videos, remixes and trends before they blow up.
Vine

SlideShare

SpeakerDeck

soundcloud

Celtis_s テーマと Celtispack プラグインをテスト環境にでもインストールして実際に確認してみてください

幅を狭くしても上下に黒いエリアが出なかったり、縦横比が保たれていることが確認できるよ思います

以上

動画やスライド等のレスポンシブ対応についての紹介でした (^^)

 


まとめ記事紹介

go-to-top