サポート » テーマ » Twenty Seventeen ヘッダー動画を全面表示にしたい

  • 解決済 Rin Hyuga

    (@rin-hyuga)


    お世話になります。
    Twenty Seventeenでヘッダー挿画をYouTubeで設定したところ、両サイドに黒い帯が出てしまい、全面表示になりません。
    http://web-aqua.jp/image/2017-01-09%2017.11.30.png

    どのようにすれば、この黒い帯をなくし、動画を全面表示にすることができるでしょうか。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • CG

    (@du-bist-der-lenz)

    Twenty Seventeen のヘッダー動画には、『お使いのテーマは動画の大きさとして2000 × 1200ピクセルを推奨しています。』
    HDで動画を用意すると良いです。

    Du bist der Lenzさん、早速のお返事ありがとうございます。

    iMovieで作った動画を「共有」→「ファイル」で、解像度1080pで保存した動画をアップしましたが、全面表示にはなりませんでした。

    1080pではだめなのでしょうか。せっかくお答えくださいましたのに、ごめんなさい。

    CG

    (@du-bist-der-lenz)

    使用する高解像度ビデオカメラでのビデオ録画が 1080i フォーマットかどうかは、そのビデオカメラに付属しているマニュアルで確認してください。ビデオカメラによっては、1080i フォーマットでのビデオ録画が可能と表示されている場合でも、たとえば 1440 × 1080 ピクセルなど、実際には 1920 × 1080 ピクセルでは録画しないものがあります。このような仕様の場合、ムービーを最大サイズで読み込むメリットはほとんどありません。

    iMovieが書き出す HD 1080p は 1920 x 1080 ピクセル相当ですから、2000 × 1200ピクセルの推奨にはデスクトップPCでブラウザを最大にすると、足りないのはやむを得ないでしょうね。「Final Cut Pro」などで作ってみてはいかがですか。

    こんにちは

    >iMovieが書き出す HD 1080p は 1920 x 1080 ピクセル相当ですから、2000 × 1200ピクセルの推奨にはデスクトップPCでブラウザを最大にすると、足りないのはやむを得ないでしょうね。

    解像度が2000×1200に満たないと左右が切れてしまうというのは本当でしょうか?

    私は動画フォーマットについて詳しくはないですが、解像度が854 x 480(480p)の以下の動画でも左右いっぱいで表示することができます。

    もちろん、ブラウザのサイズを広げると引き延ばされてぼやけますが、HD動画である必要はありません。
    しかし、ブラウザの縦横比を横長にすると、左右に黒いマージンが表示されます。
    逆に縦長にすると、上下の黒いマージンが表示されます。

    要するに、動画の縦横比と動画表示域の縦横比が近いと黒い箇所は表示されないのではないでしょうか。

    また、youtubeをヘッダビデオに表示している場合、左右の黒い帯部分はiframe中のbodyの中にあります。
    つまり、この黒い帯はYoutube動画プレイヤーの仕様です。
    (https://s.ytimg.com/yts/cssbin/www-embed-player-webp-vfl720keZ.cssに定義されています)

    (iMovieから出力した時点で横に黒い帯が出ていたら分かりませんが・・・)

    2000×1200推奨ということですので、5:3の比率に近い動画を作成されてはどうでしょうか。
    16:9なんかでも近いですし、いいかもしれません。

    mp4動画を指定した場合には、ちょっと事情が異なるかもしれません。
    しかし、縦横比が表示域と大きく異なると、やはり左右や上下に隙間は出るんじゃないか・・・と思います。

    munyaguさん、詳しいお返事ありがとうございました。

    まず、一つ原因がわかりました。私の凡ミスでした。

    動画を作成した元の画像が、2000×1333だったので、両サイドに黒い帯がでてしまっていたようです。

    これを2000×1200に修正し、あらためてmp4の動画を作成したところ、さきほどよりかは細くなりましたが、やはりまだ、ほんの少し黒い帯が残っています。

    ですので、こんどは16:9でやってみます。アドバイスありがとうございます。

    16:9、つまり 2000×1125でうまくできました!

    上下左右とも、黒い帯が出ないようになりました。ありがとうございました!

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • このトピックに返信するにはログインが必要です。