답변:
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: 깨진 상자 모델 (쿼크 모드의 IE5 또는 IE6)과 관련된 문제를 방지하기 위해 높이 대신 padding-top을 사용하여 크롬 공간을 만듭니다.
Bootstrap을 사용하는 경우 반응 형 임베드를 사용할 수도 있습니다. 이렇게하면 동영상이 반응하도록 완전히 자동화됩니다.
http://getbootstrap.com/components/#responsive-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를위한 세련된 자바 스크립트 전용 솔루션입니다.
// -- 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의 너비가 필요하다고 생각합니다.
두 개의 래퍼가있는 내 솔루션은 나에게 매력처럼 작동합니다.
.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>
내부 래퍼의 padding-bottom도 50 %로 설정했습니다. @ magi182의 56 %에서는 상단과 하단에 검은 색 막대가 나타났기 때문입니다.
이전 답변에 대한 크레딧 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;
}