반응 형 비디오

Question

반응 형 비디오를 만들기 위해 노력하고 있습니다. 비디오는 이미지 (TV 화면)의 상부에 위치되었고, 아무리 큰 브라우저 같은 장소에서 유지하지하는 것이 중요합니다. 그것은 그래서

어떻게 비디오를 만드는 방법에 대한 갈 것이라고

A)는 현재 위치에 고정) 나 반응. 비디오는 높이와 폭이

그래서

추측하고있다 그것은하기가 더 어렵습니다.

모든 조언을 주시면 감사하겠습니다. 비디오는 반응 만들기

감사

리스

<div class="videocontainer"> 
    <h1 class="videosheading"><strong>VIDEOS</strong></h1> 
     <div class="row"> 
      <div class="col-xs-12 video-cell"> 
       <img class="img-responsive" src="img/TVWALLTWO.jpg"/> 
       <video width="550" height="422" controls muted> 
        <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
        <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
        <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4> 
        <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp> 
       </video> 
      </div> 
      </div> 
     </div> 

.video-cell { 
    position: relative; 
} 
.video-cell img { 
    width: 100%; 
} 
.video-cell video { 
    position: absolute; 
    top:6%; 
    bottom:10%; 
    left: 0; 
    right: 7%; 
    background-color: black; 
    border: #2F2925 10px solid; 
    border-radius: 10px; 
    margin: auto; 
    max-width: 100%; 
} 

Answer 1

꽤 많은 사진이 반응하고 동일합니다. 대신에 % s의 픽셀에 사용

1) width와 max-width 속성 : 주로, 당신은이 개 솔루션을 가지고있다. 비디오는 자신의 제한 범위 내에서 (물론 창 제한 내에서) 확장됩니다. 이것은 매우 일반적인 해결책입니다 - 그럼에도 불구하고, 나는 그것을 사용하지 않을 것을 제안합니다. 이 비디오는 다른 종횡비에 화면에 잘 보이지 않을 수 있습니다. http://www.w3schools.com/css/css_rwd_videos.asphttp://www.w3schools.com/css/css_rwd_videos.asp

2) 문제의 더 나은 해결 방법은 원본의 미디어 속성을 사용하여 다른 동영상을 다양한 화면 크기 (미디어 쿼리)에 맞게 조정하는 것입니다.

<video> 
<source src="video-widescreens" media="screen and (min-width:800px)"> 
<source src="video-widescreens" media="screen and (min-width:800px)"> 
<source src="video-smallscreens.mp4" media="screen and (max-width:799px)"> 
<source src="video-smallscreens" media="screen and (max-width:799px)"> 
</video>