回答:
CSSでYouTube動画をレスポンシブにすることができます。「videowrapper」のクラスでdivにiframeをラップし、次のスタイルを適用します。
.videowrapper {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videowrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.videowrapper divはレスポンシブ要素内にある必要があります。.videowrapperのパディングは、ビデオが折りたたまれないようにするために必要です。レイアウトによっては、数値を微調整する必要がある場合があります。
56.25%と25pxで読み取ることができるalistapart.com/article/creating-intrinsic-ratios-for-video padding-bottom: 56.25%：16作成する：9の比率は、我々は16（0.5625または56.25パーセント）によって9を分割しなければなりません。 padding-top: 25px：壊れたボックスモデル（QuirksモードのIE5またはIE6）の問題を回避するために、クロムではなく高さではなくパディングトップを使用してスペースを作成します。
Bootstrapを使用している場合は、レスポンシブ埋め込みを使用することもできます。これにより、ビデオがレスポンシブになるように完全に自動化されます。
http://getbootstrap.com/components/#sensitive-embed
以下にいくつかのサンプルコードがあります。
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
col-sm-8 col-sm-offset-2
私はレスポンシブYouTube動画のここで承認済みの回答にCSSを使用しました-2015年8月の初め頃にYouTubeがシステムを更新するまではうまくいきました。YouTubeの動画は同じサイズですが、何らかの理由で現在、承認済みの回答のCSSですすべてのビデオをレターボックスに入れます。上下に黒い帯。
私はサイズをいじくり回して、上部のパディングを取り除き、下部のパディングをに変更することにしました56.45%。見栄えが良さそうです。
.videowrapper {
position: relative;
padding-bottom: 56.45%;
height: 0;
}
jQueryを使用したYouTubeおよびVimeo向けの洗練されたJavaScriptのみのソリューション。
// -- After the document is ready
$(function() {
// Find all YouTube and Vimeo videos
var $allVideos = $("iframe[src*='www.youtube.com'], iframe[src*='player.vimeo.com']");
// Figure out and save aspect ratio for each video
$allVideos.each(function() {
$(this)
.data('aspectRatio', this.height / this.width)
// and remove the hard coded width/height
.removeAttr('height')
.removeAttr('width');
});
// When the window is resized
$(window).resize(function() {
// Resize all videos according to their own aspect ratio
$allVideos.each(function() {
var $el = $(this);
// Get parent width of this video
var newWidth = $el.parent().width();
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));
});
// Kick off one resize to fix all videos on page load
}).resize();
});
埋め込みのみで使いやすい：
<iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe>
または、Bootstrapのようなレスポンシブスタイルのフレームワークを使用します。
<div class="row">
<div class="col-sm-6">
Stroke Awareness
<div class="col-sm-6>
<iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe>
</div>
</div>
width="16" height="9"）*=の先頭の代わりにjQuery部分文字列セレクターを使用します^=出発点を@Dampasに感謝します。 https://stackoverflow.com/a/33354009/1011746
これは古いスレッドですが、https：//css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.phpで新しい回答を見つけました
以前のソリューションの問題は、ビデオコードの周りに特別なdivが必要になることです。これは、ほとんどの用途に適していません。だからここに特別なdivなしのJavaScriptソリューションがあります。
// Find all YouTube videos - RESIZE YOUTUBE VIDEOS!!!
var $allVideos = $("iframe[src^='https://www.youtube.com']"),
// The element that is fluid width
$fluidEl = $("body");
// Figure out and save aspect ratio for each video
$allVideos.each(function() {
$(this)
.data('aspectRatio', this.height / this.width)
// and remove the hard coded width/height
.removeAttr('height')
.removeAttr('width');
});
// When the window is resized
$(window).resize(function() {
var newWidth = $fluidEl.width();
// Resize all videos according to their own aspect ratio
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));
});
// Kick off one resize to fix all videos on page load
}).resize();
// END RESIZE VIDEOS
@ magi182のソリューションは確かですが、最大幅を設定する機能がありません。YouTubeのサムネイルがピクセル化されているように見えるので、640pxの最大幅が必要だと思います。
2つのラッパーを使用する私のソリューションは、私にとって魅力のように機能します。
.videoWrapperOuter {
max-width:640px;
margin-left:auto;
margin-right:auto;
}
.videoWrapperInner {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 50%;
padding-top: 25px;
height: 0;
}
.videoWrapperInner iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="videoWrapperOuter">
<div class="videoWrapperInner">
<iframe src="//www.youtube.com/embed/C6-TWRn0k4I"
frameborder="0" allowfullscreen></iframe>
</div>
</div>
また、@ magi182の56％では、上部と下部に黒いバーが表示されたため、内側のラッパーのパディングボトムを50％に設定しました。
以前の回答へのクレジット付きhttps://stackoverflow.com/a/36549068/7149454
Boostrapと互換性があり、コンテナーの幅（この例では300px）を調整して、問題ありません。
<div class="embed-responsive embed-responsive-16by9" style="height: 100 %; width: 300px; ">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/LbLB0K-mXMU?start=1841" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0"></iframe>
</div>
#hero { width:100%;height:100%;background:url('{$img_ps_dir}cms/how-it-works/hero.jpg') no-repeat top center; }
.videoWrapper { position:relative;padding-bottom:56.25%;padding-top:25px;max-width:100%; }
<div id="hero">
<div class="container">
<div class="row-fluid">
<script src="https://www.youtube.com/iframe_api"></script>
<center>
<div class="videoWrapper">
<div id="player"></div>
</div>
</center>
<script>
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
videoId:'xxxxxxxxxxx',playerVars: { controls:0,autoplay:0,disablekb:1,enablejsapi:1,iv_load_policy:3,modestbranding:1,showinfo:0,rel:0,theme:'light' }
} );
resizeHeroVideo();
}
</script>
</div>
</div>
</div>
var player = null;
$( document ).ready(function() {
resizeHeroVideo();
} );
$(window).resize(function() {
resizeHeroVideo();
});
function resizeHeroVideo() {
var content = $('#hero');
var contentH = viewportSize.getHeight();
contentH -= 158;
content.css('height',contentH);
if(player != null) {
var iframe = $('.videoWrapper iframe');
var iframeH = contentH - 150;
if (isMobile) {
iframeH = 163;
}
iframe.css('height',iframeH);
var iframeW = iframeH/9 * 16;
iframe.css('width',iframeW);
}
}
resizeHeroVideoは、Youtubeプレーヤーが完全にロードされた後でのみ（ページのロードが機能しない）、ブラウザーウィンドウのサイズが変更されるたびに呼び出されます。実行すると、iframeの高さと幅が計算され、正しいアスペクト比を維持しながら適切な値が割り当てられます。これは、ウィンドウが水平方向または垂直方向にサイズ変更されても機能します。
さて、大きなソリューションのように見えます。
width: 100%;iframeに直接追加しないでください。;）
したがって、コードは次のようになります <iframe style="width: 100%;" ...></iframe>
これを試してみてください。私の場合と同じように機能します。
楽しい！:)
私はこれを簡単なCSSで次のように作成します
HTMLコード
<iframe id="vid" src="https://www.youtube.com/embed/RuD7Se9jMag" frameborder="0" allowfullscreen></iframe>
CSSコード
<style type="text/css">
#vid {
max-width: 100%;
height: auto;
}