2015-04-26 1 views
0

У меня есть видео, предназначенное для отображения во всех размерах экрана (кроме xs) более 4 столбцов. Код ниже не реагирует, отображая видео ОЧЕНЬ большое. Вырывая мои волосы, нужна помощь!Почему мое встроенное и отзывчивое видео не реагирует?

<div class="hidden-xs col-sm-4 embed-responsive-16by9"> 
    <video class="embed-responsive-item" title="Former Balmain Massage therapist Blaise Bowling shows the ins and outs of pregnancy massage" poster="../../images/blaises_pregnancy_poster.jpg" controls src="../../video/pregnancy360.mp4" type="video/mp4"> 
</video> 
</div> 

Оригинальное видео едва 360 пикселей в ширину, и это оказывается слишком большой ... Страница находится в https://balmainmassage.com.au/2015/modalities/pregnancy.html

Благодарности

Клаудио

ответ

0

В вашем html, я предполагаю, что у вас есть это в вашем <head>:

<head> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
</head> 

Вы должны поместить свое видео в <div> что-то вроде этого:

<div class="responsive_video">        
<video src="yourfolder/yourvideo.mp4" controls="controls" type="video/mp4" </video>  
</div> 

Затем, вы должны иметь это под вашим @media only screen and (max-width : 960px) в нижней части css:

@media only screen and (max-width : 960px) { 

    .responsive_video video{ 
     width:100%; 
       } 
}