BizVektor Video Unitので動画表示調整

WordPressで構築したホームページに動画を埋め込むケースがありますよね。

BizVoktorのテンプレートで動画プラグインを導入して、スマホでの表示がうまくいかなかったので Googleでいろいろと事例を探索!

なんとか、下記の2つの事例で、パソコン版とスマホ版の表示がうまくいくようになりました^^

 

BizVektor Video Unitので動画の両側が切れて再生される
http://forum.bizvektor.com/forums/topic/video-unit%E3%81%A7%E5%8B%95%E7%94%BB%E3%81%AE%E4%B8%A1%E5%81%B4%E3%81%8C%E5%88%87%E3%82%8C%E3%81%A6%E5%86%8D%E7%94%9F%E3%81%95%E3%82%8C%E3%82%8B/

 

表示タイプが Youtubeの場合

※表示タイプで「Youtube」を選択した場合、モバイル端末では Youtube アプリで動画を再生します。

============================

#bvu_wrap{
height: auto!important;
padding-bottom: 55%;
background-size: contain!important;
}
#mbYTP_bvu_video_ytb_player{
width: 100%!important;
margin: 0!important;
margin-top: -5%!important;
}

ただ、開いているウィンドウの横幅によっては Youtube の黒い帯が入ってしまうことがございますので、padding-bottom: 55%; と margin-top: -5%!important; の % の数値をご調整下さいませ。

先にご案内した CSS は Youtube で再生時のものとなります。
動画を Upload された時は以下のコードでお試しいただけますでしょうか。

 

表示タイプが Uploadの場合

#bvu_wrap{
height: auto!important;
padding-bottom: 55%;
/* ↑この%は動画の縦横の比率に応じて変更して下さい */
background-size: contain!important;
}
#bvu_video{
top: 0;
left: 0;
width: 100%;
-webkit-transform: translate(0);
-ms-transform: translate(0);
transform: translate(0);
}

BizVektor Video Unitの表示幅大きすぎるので固定したい
http://forum.bizvektor.com/forums/topic/bizvektor-video-unit_size/

.bvu_wrap { width:80%; margin:0 auto; }