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; }