Video Unitで動画の両側が切れて再生される

[Gene参加者]

Video UnitとVASTを使ってTOPに動画を表示させています。
この動画は、YouTubeからのリンクしています。
動画の両側が切れて再生され、動画全体を再生することができません。
動画の仕様は　1280x720pixel です。
どこかの設定でしょうか？

[mocaco_参加者]

こんにちは！
video unit は開いたウィンドウの高さにあわせてビデオの表示エリアの大きさが変わるようなので、開いているウィンドウの大きさによって動画が切れてしまったりするみたいです…

[Gene参加者]

返信ありがとうございます。
なるほど、高さが基準なんですね。

レスポンシブで幅を基準にしてくれると嬉しいのにな。
動画にテロップを入れると幅の規制で、切れてしまいます。
せっかく長時間かけて作ったテロップが、何が書いてあるのかわからなくなってしまいました。
こうなると、動画の意味がなくなってしまい、テロップなしの状態でやり直しています。
ちょっと残念！

[mocaco_参加者]

残念ですよね…、
前にダウンロードマーケットで全部表示する対処法の質問があったのでわたしもやってみたことがあります、下にその引用を貼り付けますね、これをcssカスタマイズに貼り付けてみてはどうでしょうか

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

#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 された時は以下のコードでお試しいただけますでしょうか。

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

[Vektor,Inc.キーマスター]

Gene さま

Video Unit をご利用いただき誠にありがとうございます。

mocaco_ さまのおっしゃる通り、表示中のウィンドウ幅によって動画が見切れてしまう場合がございます。現在動画の幅に合わせて動画全体が表示できるような機能を追加する作業を行なっております。

先に mocaco_ さまに投稿いただいた CSS を管理画面 > CSSカスタマイズに貼り付けていただけるとウィンドウの高さではなく、動画の横幅に合わせて表示するようになりますので一度お試しいただけますでしょうか？

もしご不明なようであれば、DLマーケットの質問にてご質問いただけると幸いでございます。
ごめんどうをおかけして申し訳ございませんがよろしくお願いいたします。

[Gene参加者]

mocaco_さん
BizVektorキーマスターさん

早速の返信、ありがとうございます。

いただいたCSSで、早速試してみました。
padding-bottom:を調整することで、ほぼ全画面で幅基準でできました。
ありがとうございます。

スマホにすると、幅基準なので全画面とはいきませんが、こちらはこれでOKです。
気になるのは画面が小さくなるので、画面上に表示されるタイトルのフォントサイズが元のままのサイズで違和感あります。

ここが修正されると完璧ですね。
ありがとうございました。

修正期待しております。

[Vektor,Inc.キーマスター]

Gene さま

動画が全面で表示されるようになったようで安心しました。

> 気になるのは画面が小さくなるので、画面上に表示されるタイトルのフォントサイズが元のままのサイズで違和感あります。

ご意見ありがとうございます。アップデートに反映できるよう努力いたします。
今後とも BizVektor をよろしくお願いいたします。

[投稿者]

投稿