web-dev-qa-db-ja.com

YouTubeプレーヤーをページの幅に合わせてスケーリングしながら、アスペクト比を維持するにはどうすればよいですか？

Webページに配置したいYouTubeビデオがあります。

ユーザーのブラウザの割合に合わせてビデオをスケーリングしますが、アスペクト比も維持します。

私はこれを試しました：

<iframe width="87%" height="315" src="http://www.youtube-nocookie.com/embed/dU6OLsnmz7o" frameborder="0" allowfullscreen></iframe>

しかし、それはプレーヤーをより広くするだけで、高くはしません。

JavaScript（または非標準のCSS）に頼らなければなりませんか？

youtubehtml5css
34
Frank

レスポンシブCSSを開発するときに、サイトで同様の問題が発生しました。デスクトップCSSからもっと小さなものに切り替えるときに、埋め込みYoutubeオブジェクトのサイズをアスペクトで変更したかった（メディアクエリを使用してモバイルデバイスのコンテンツを再レンダリングする）。

私が決めた解決策は、CSSとマークアップベースでした。基本的に、CSSには3つのビデオクラスがあります。

.video640 {width: 640px; height: 385px}
.video560 {width: 560px; height: 340px}
.video480 {width: 480px; height: 385px}

…そして、これらの1つを元のサイズに応じて、含めるYouTubeコンテンツに割り当てます（さらに多くのクラスが必要な場合があるため、最も一般的なサイズを選択しました）。

より小さいデバイスのメディアクエリCSSでは、これらの同じクラスは次のように単純に再記述されます。

.video640 {width: 230px; height: 197px}
.video560 {width: 230px; height: 170px}
.video480 {width: 240px; height: 193px}

これには、HTMLにビデオを含める（つまりクラスを追加する）際にマークアップを「事前に」行う必要がありますが、Javascriptのルートをたどりたくない場合、これは非常にうまく機能します。必要な数のさまざまなサイズのビデオクラスを指定します。 Youtubeマークアップの外観は次のとおりです。

<object class="video640" type="application/x-shockwave-flash" value="YOUTUBE URL">
  <param name="movie" value="YOUTUBE URL"></param>
</object>
15
Ben

私が最高のCSSソリューションであると信じるもの。

.auto-resizable-iframe {
  max-width: 420px;
  margin: 0px auto;
}

.auto-resizable-iframe > div {
  position: relative;
  padding-bottom: 75%;
  height: 0px;
}

.auto-resizable-iframe iframe {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

<div class="auto-resizable-iframe">
  <div>
    <iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"></iframe>
  </div>
</div>

デモ http://jsfiddle.net/JBhp2/

64
Darwin

いくつかのjavascriptを使えば非常に簡単です。

jQuery(function() {
    function setAspectRatio() {
      jQuery('iframe').each(function() {
        jQuery(this).css('height', jQuery(this).width() * 9/16);
      });
    }

    setAspectRatio();   
    jQuery(window).resize(setAspectRatio);
});
12
Darwin

このjQueryプラグイン は最近になって、FitVidsと呼ばれ、必要なことを正確に行い、アスペクト比を維持しながらブラウザーのサイズに基づいてビデオのサイズを変更します。

http://fitvidsjs.com/

10
Ben Everard

Youtube動画の自動サイズ変更を行うコツは、iframeの幅を100％にして、「padding-bottom」がアスペクト比と等しいdivに入れることです。例えば。

ただし、問題は、YoutTubeビデオが埋め込まれた多くのページがあることです。ページ上のすべての動画をスキャンし、iframeコードを上記のように変更することで自動的にサイズ変更できるjqueryプラグインを次に示します。つまり、コードを変更する必要はありません。 JavaScriptを含めると、すべてのYouTubeビデオが自動サイズ変更されます。 https://skipser.googlecode.com/files/youtube-autoresizer.js

2
arunskrish

ラッピングdivのサイズに基づいてビデオのサイズをスケーリングする2つのクラスを使用できます。この例を考えてみましょう：

<div class="content-wrapper">
    <div class="iframe-wrapper res-16by9">   
        <iframe src="https://www.youtube.com/embed/pHsYFURtzzY" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

今、CSSを見てください。

.content-wrapper{
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
}

.iframe-wrapper{
  width: 100%;
  position: relative;
}

.res-4by3{
  padding-bottom: 75%;
}

.res-16by9{
  padding-bottom: 56.25%;
}

.iframe-wrapper iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

幅が100％に設定され、位置が相対に設定されているdivでiframeをラップする必要があることに注意してください。また、iframeラッパーにボトムパディングを追加する必要があります。このパディングは、ビデオの高さを定義します。イメージ比を表す2つのクラスを作成することをお勧めします。

特定の解像度を表すラッパーの右下のパディングを計算するのは非常に簡単です。たとえば、res 4 x 3および16 x 9の場合、bottom-paddingは次と等しくなります。

[4/3解像度]

100/4 * 3 = 75％;

[16/9解像度]

100/16 * 9 = 56.25％

次に、iframeを絶対として配置し、ラップするdivの左上隅にプッシュします。また、iframeの幅と高さを100％に設定してください。今、あなたはもう一つのことをしなければなりません。できました。

適切な解像度に合ったクラスを追加してください。画像の幅と高さをそれぞれスケーリングし、適切な比率を維持します。

上記の例はどのiframeでも機能します。つまり、Googleマップiframeにも使用できます。

1
DevWL

古い質問ですが、この場合は@media CSS 3タグが役立つと思います。

同様の問題に対する私の解決策を以下に示します。

CSS：

@media only screen and (min-width: 769px) {
    .yVid {
        width: 640px;
        height: 360px;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 768px) {
    .yVid {
        width: 560px;
        height: 315px;
        margin: 0 auto;
    }
}

HTML：

<div class="yVid">
    <iframe width="100%" height="100%" frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"></iframe>
</div>

これは基本的に、ビデオ自体のサイズを変更する768pxにブレークポイントを追加します。さらに992と1280にブレークポイントを追加して、さらに大きなビデオサイズを実現することもできます。 （Bootstrap標準サイズに基づく数値）。

1
todd.pund

これは私のために働いたものです。これは YouTube埋め込みコードジェネレーター のコードをわずかに変更したものです。

CSS：

.video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.27198%;
    }
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

HTML：

<div class="video-container">
    <iframe width="560px" height="315px" src="https://www.youtube.com/embed/XXXXxxxx?&theme=dark&autohide=2&iv_load_policy=3"><iframe>
</div>
0
Lenwood

ダーウィンとトッドに加えて、次のソリューションは

  1. 下マージンを避ける
  2. 大画面の幅を最大化する
  3. モバイルビューの高さを最小限に抑える
  4. @media none互換ブラウザの固定サイズを維持する

HTML：

<div class="video_player">
  <div class="auto-resizable-iframe">
    <div>
      <iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM">        </iframe>
    </div>
  </div>
</div>

CSS：

.videoplayer{

    text-align: center;
    vertical-align: middle;

    background-color:#000000;

    margin: 0;
    padding: 0;

    width: 100%;
    height:420px;

    overflow:hidden;

    top: 0;
    bottom: 0;

}

.auto-resizable-iframe {
    width:100%;
    max-width:100%;
    margin: 0px auto;
}

.auto-resizable-iframe > div {
    position: relative;
    padding-bottom:420px;
    height: 0px;
}

.auto-resizable-iframe iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}


//full screen
@media (min-width:0px) {

    .videoplayer{
        height:100%;
    }

    .auto-resizable-iframe > div {
        padding-bottom:100%;
    }           

}

//mobile/pad view
@media (min-width:600px) {

    .videoplayer{
        height:420px;
    }

    .auto-resizable-iframe > div {
        padding-bottom:420px;
    }       

}
0
RafaSashi

style="max-width: %87; max-height: %87;"を使用できます

0
Umur Kontacı

CSS vwメトリックでiframeの高さと幅を設定するだけです。パラメーターとしてデバイス幅を使用します。

.videoWrapper iframe {
    height: 36.6vw;
    width: 65vw; 
}
0
Karl Zillner

Jsを使用して生成されたiframeの構造を変更するための回答のリストには、いくつかの提案があります。 iframeを他の要素にラップすると、YouTube APIがiframeとの「接続」を失う可能性があるため（特に、私のような特定のIDを使用する代わりに要素をノードとして渡す場合）、リスクがあると思います。むしろ実際に回避するために、実際にyoutubeプレーヤーをトリガーする前にjavascriptを使用してコンテンツを変更します。

私のコードからの抜粋：

/**
 * Given the player container, we will generate a new structure like this
 *
 * <div class="this-is-the-container">
 *      <div class="video-player">
 *          <div class="auto-resizable-iframe">
 *              <div>
 *                  <iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM">        </iframe>
 *              </div>
 *          </div>
 *      </div>
 * </div>
 *
 * @return {Node} the real player node deep inside
 */
YouTube.renderResizable = function (playerContainer) {
    // clean up the content of player container
    playerContainer.textContent = '';

    var playerDiv = document.createElement('div');
    playerDiv.setAttribute('class', 'video-player');

    playerContainer.appendChild(playerDiv);

    // add the auto-resizable-frame-div
    var resizeableDiv = document.createElement('div');
    resizeableDiv.setAttribute('class', 'auto-resizable-iframe');

    playerDiv.appendChild(resizeableDiv);

    // create the empty div
    var div = document.createElement('div');
    resizeableDiv.appendChild(div);

    // create the real player
    var player = document.createElement('div');
    div.appendChild(player);

    return player;
};
0
mr1031011