Master-X
Форум | Новости | Статьи
Главная » Форум » Дизайн » 
Тема: Адаптивные html5 видеоплееры
цитата
08/04/16 в 10:56
 zenon
Здравствуйте, накидайте видеоплееры, у которых есть адаптивность при сужении браузера.
цитата
08/04/16 в 11:29
 S_Flash
https://www.jwplayer.com/
цитата
08/04/16 в 16:22
 sx88
Адаптивность можно сделать путем css у практически любого Iframe и object, даже несмотря на то, что там просано <iframe width="640" height="360">

Стукни если что в аську, посмотрим. В 95% случаев это делается, бывают исключения когда эмбед выводят iframe в iframe, тогда там надо будет поковыряться в родительском Iframe, но все равно вполне можно.
цитата
08/04/16 в 16:29
 zenon


Спасибо, но интересуют уже готовые адаптивные плееры, с помощью css обычно уменьшают только ширину, а высота остается не пропорциональной.
цитата
08/04/16 в 19:09
 S_Flash
zenon писал:
Спасибо, но интересуют уже готовые адаптивные плееры, с помощью css обычно уменьшают только ширину, а высота остается не пропорциональной.


В прошлом веке - да.
JW ранее умел такое. Сейчас могли выпилилить за ненадобностью, но возможно и оставили.
цитата
08/04/16 в 23:32
 sx88
И высоту тоже можно регулировать, через каждые например 100пикселей, не особо это трудно как может показаться, вот например:

начинем с самого маленького экранчика типа 300px:

.player iframe { width: 100%; height: 250px; }

и далее пошло поехало:

@media all and (min-width: 400px) {
.player iframe { height: 300px; }
}

@media all and (min-width: 500px) {
.player iframe { height: 350px; }
}

@media all and (min-width: 600px) {
.player iframe { height: 400px; }
}

@media all and (min-width: 700px) {
.player iframe { height: 450px; }
}

Т.е. через каждые 100 пикселей ширины увеличиваем высоту на 50px.

и так до бесконечности. Да, немножко геморно, но делается это буквально минут за 5.

Ну конечно если возможность поставить плеер, который это делать умеет - то будет проще, но тем не менее...


Эта страница в полной версии