TOPページに画面いっぱいじゃない動画を入れたいです。

Question

トップページに動画を入れたいのですが、どうしても思った通りに表示されません。

右側１５％の余白があり、左側８５％にマスクがかかっていて、そのマスクに合わせて動画を表示させたいです。
全画面なら通常に表示されて、cssで調整してもマスクと動画の比率が違うためか画面サイズによってずれてしまします。

現在コードはこのようになっています。

//ムービー全画面スクリプト（PC用）
//(1)動画の画角比率を設定します。4:3の場合はここを「4/3」に変更
var movieRatio = 16/9;  
//(2)画像のリサイズ関数「movieAdjust()」を作成
function movieAdjust(){
        var adjustWidth = $(window).width();
        var adjustHeight = $(window).height();
        if (adjustHeight > adjustWidth / movieRatio) {
                adjustWidth = adjustHeight * movieRatio;
        }
        $('iframe').css({width:(adjustWidth),height:(adjustWidth/movieRatio)});
}
//(3)画面リサイズ時と画面ロード時に関数movieAdjust()を実行
  $(window).on('load resize', function(){
    movieAdjust();
  });

<div class="mv">
　<div class="layer1"></div>
　<div class="pc_only" id="video">
　　<iframe src="https://player.vimeo.com/video/305028287autoplay=1&loop=1&muted=1">　　　　
</iframe>
</div>
</div>

#video iframe{
  width: 85%;

  transform: translate(-15%,0%);
  -ms-transform: translate(-15%,0%);
}

すみませんわかりにくい説明かもしれないのですが、助けていただけたら嬉しいです（ ; ; ）
また、参考になるサイトなどでもいいので教えていただけたらありがたいです（ ; ; ）

説明足りない箇所などありましたらご連絡ください。

Answer 1

【回答文を完全に見直して新規で書き起こして居ます】

諸悪の根源はこいつですね。

function movieAdjust(){
  var adjustWidth = $(window).width();
  var adjustHeight = $(window).height();
  if (adjustHeight > adjustWidth / movieRatio) {
    adjustWidth = adjustHeight * movieRatio;
  }
  $('iframe').css({width:(adjustWidth),height:(adjustWidth/movieRatio)});
}

ざっくり解説すると、$(window).width()という風にブラウザの縦横幅を取得して、
iframe要素のstyle属性の部分にwidth: 横幅みたいな形で直書きしています。
このstyle属性に直接書くと外部ファイルのCSSで記述するより優先度が高い扱いになるので、
外部CSSファイルのwidth: 85%みたいな指定がなかったことになります。

でもまぁ言いたい事は分かります。
横幅85%にしつつ画面の縦横比もちゃんと考えた動画用iframeを作りたいって話ですよね？

// 君が多分マスクという存在だと思う
#video {
  width: 85%;
}
#video iframe {
  // 中央寄せを意識
  margin: 0 auto;
}

function movieAdjust(){
  var $video = $('#video');
  var adjustWidth = $video.width(); // 基準を#videoの横幅にする
  var adjustHeight = $(window).height();
  if (adjustHeight > adjustWidth / movieRatio) {
    adjustWidth = adjustHeight * movieRatio;
  }
  // HTML内全てのiframeから探したら思わぬ箇所で事故るのでvideoの中に限定
  $video.find('iframe').css({width:(adjustWidth),height:(adjustWidth/movieRatio)});
}

これでまぁまぁ意図通りになるんじゃないですかね？

Comments

[UKYO9311]

返信ありがとうございます！^ ^
すみません色々やってるうちに変になってしまいました！
先ほどtransform: translate(-15%,0%);を消して、
width: 80%;
margin: 0 auto;
を入れたのですが、全画面に広がってしまいました。。。

これはscriptのせいなんでしょうか？？
調べながらやったのでよくわからないのですが。。。

[miyabi-sun]

あー、JavaScriptのコードでiframeのstyle属性にwidthとheightを無理やり設定してますね。
外部ファイルとstyle属性直書きなら、style属性直書きが必ず勝利するので私の解答欄のやり方では上手くいきません。
ちょっとまってくださいね。

[UKYO9311]

やはりそうでしたか。。。お忙しい中本当にありがとうございます泣

[UKYO9311]

ご丁寧な回答本当にありがとうございます！泣
それが試してみたのですが、なかなかうまくいかず、上の画像みたいになってしまいます。

追記ですが、マスクは上に被せてある半透明の黒のやつです（ ; ; ）本当はそれに合わせて動画を表示させたいのですが。。。回答を参考にして自分でも色々試してみたのですが、ここからどうしても進みません。。。