Question

Подскажите как на странице материала (модуль Видео) выводить видео с ютуб без черных полосок (по горизонтали или вертикали)? Сейчас ширину плеера  задаю width="100%" а высоту height="420px". В идеале хотелось чтобы и высота масштабировалась, и составляла 100% (в зависимости от ширины) но так не работает, пробовал height="100%" и height="auto" не работает. На вордпрессе оно автоматом масштабируеться а на юкозе как сделать такое?

Answer 1

https://jsfiddle.net/m37w641e/

Comments

Спасибо. Работает) Но, работает на страницах где плеер выводитсятся <iframe>...</iframe>, а в модуле "видео", там по другому, там свои CSS стили, своя форма добавления видео, вот код как выводится:

<div align="center" class="vep-video-block">
$EOBJECT$
<a href="javascript:void(0)" onclick="player.showVideo()" class="vep-playvideo">
<img src="$SCREEN_URL$" alt="" width="580" />
<span class="vep-playbutton"></span>
<?if($DURATION$)?><span class="vep-length">$DURATION$</span><?endif?>
</a>
<div id="videocontent" class="vep-videocontent" style="display:none;"></div>

и стили

.vep-video-block {}
a.vep-playvideo {
 display: inline-block;
 outline: none;
 border: none;
 position: relative;
 text-decoration: none;
 outline: none;
}
a.vep-playvideo span {
 cursor: pointer;
}
.vep-video-block img {
 border: 0;
 border-radius: 1px;
 vertical-align: middle;
}

Здесь работает : http://fffishing.com/drugie-snasti/udilische-krokodil-i-fidernaya-lovlya

А здесь уже нет : http://fffishing.com/video

 

---

По второй ссылке каталог. Не работает ни в одном из тех видео? Если да, то новый код:

.responsive-player,.vep-video-block {
  position:relative;
  padding-bottom: 56.25%;
}
.responsive-player iframe,.vep-video-block iframe {
  position:absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

---

Guest_143344550441,

супер, добавил эти стили в CSS для модуля видео и заработало. Большое спасибо!

---

Guest_143344550441,

Последний штрих остался) С плеером все ок, но вот заметил под скрином видео (когда видео не проигрывается) появляеться пустое пространство (скрин слева). Когда же щелкнуть кнопку плей, плеер запускает видео и пространство исчезает. (скрин справа). Я так понимаю за это отвечает

padding-bottom: 56.25%; 

но если убрать, то плеера не видно. Сайт тот же, пример на скрине. Помогите разобраться.

---

Замените старый код этим:

.vep-video-block img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain
}
.responsive-player,.vep-video-block {
  position:relative;
  padding-bottom: 56.25%;
}
.responsive-player iframe,
.vep-video-block iframe,
.vep-playvideo {
  position:absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}
.vep-playvideo {
  background:#000
}

---

Guest_143344550441,

Да, это оно!) Вопрос закрыт.

Answer 2

Обычно помогает в стили прописать:

iframe, object, embed{max-width: 100%;}
@media screen and (max-width: 1000px){
object {height:370px}
}
@media screen and (max-width: 800px){
object{height:350px}
}
@media screen and (max-width: 600px){
object {height:330px}
}
@media screen and (max-width: 400px){
object {height:300px}
}

мне помогло.

Comments

Спс за вариант), но не то что ищу. Размеры у Вас то фиксированные. Хотелось бы сделать полную адаптацию плеера 100% по высоте и ширине.

Для наглядности, скрин плеера, если б он автоматически не обрезался по вертикали "420px", а растянулся на 100%, черных полосок по боках не было бы.