Youtube APIで動画を埋め込んだ際の動画サイズについて

Question

ご覧いただきありがとうございます。
Youtube APIを利用して、メインビジュアルにYoutubeの動画を貼り付けたいと思っています。

https://movabletype.net/blog/2017/04/youtube-iframe-player-api.html

こちらのサイトを拝見して作成をしていたのですが、
埋め込んだ後の動画が拡大してしまいます。

上記の参考URLの実装デモ
https://demosite1.movabletype.io/onemovie/

こちらに埋め込まれたものも、iframeのid=youtubeのブロックがブラウザ幅より1.8倍ほどのサイズになっており、
右側がカットされた状態で埋め込まれています。

左右はブラウザ幅に合わせた状態で動画を埋め込みたいと思っており、
調べてみたのですがなぜこのような現象になっているかがわからず、
お力を貸していただけますと嬉しいです。
よろしくお願いいたします。

ご指摘ありがとうございます！
以下がコードになります（参考サイトからコピーしました）

#youtube-movie {
    position: fixed;
    top: 0;
    bottom: 0;
    min-width: 150%;
    height: auto;
    z-index: -1;
}
#youtube-movie-content {
    padding-top: 56.25%;
    position: relative;
    width: 100%;
}
#youtube-movie-content iframe {
    height: 100% !important;
    left: 0;
    position: absolute;
    top: 0;
    width: 100% !important;
}

if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){
          // 2. This code loads the IFrame Player API code asynchronously.
        var tag = document.createElement('script');

        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      // YouTubeの埋め込み
          function onYouTubeIframeAPIReady() {
              ytPlayer = new YT.Player(
                  'youtube', // 埋め込む場所をIDで設定
                  {
                      videoId: 'vk2XlND2kQ0', // YouTubeのIDを指定
                      width: 640,
                      height: 400,
                      playerVars: {
                          controls: 0,
                          autoplay: 1,
                          showinfo: 0,
                      },
                      events: {
                      'onReady': onPlayerReady,
                      'onStateChange': onPlayerStateChange
                      }
                  }
              );
          }
        function onPlayerReady(event) {
          event.target.playVideo();
          event.target.mute();
        }
        function onPlayerStateChange(e) {
            var ytStatus = e.target.getPlayerState();
            if (ytStatus == YT.PlayerState.ENDED) {
                ytPlayer.playVideo();
                ytPlayer.mute();
            }
        }
  }

Comments

[Lhankor_Mhy]

コードをご提示ください。

Answer 1

実際のコードがデモサイトのコードと全く同じであるならば、これのせいではないですか？

#youtube-movie {
	position: fixed;
	top: 0;
	bottom: 0;
	min-width: 150%; /* ← これ */
	height: auto;
	z-index: -1;
}

Comments

[tokotokotoko]

ありがとうございます！！
いただいたご指摘で最大サイズ解決ができました。
初歩的なミスで大変失礼いたしました。。