» »

Создать width и height видео плеера на CSS


Создать width и height видео плеера на CSS

Как знаем, что любой видео плеер идет по умолчанию под своей высоте и длине. И здесь нам не нужно будет менять, все автоматически установится. Вы просто в стилях выставляете свои размеры, и потом берем видео плеер и просто ставим, и все отлично по сторонам ровно он стоит. Здесь нужно понимать, что только коды на плеер, которые идут iframe и они только будут автоматически находить ширину с высотой. Это больше для администраторов кино сайта, так как иногда делают каркас и в нем несколько плееров находится, и здесь чтоб время не терять и каждый не настраивать, а просто ставим и на этом все.

Но до этого вы с начало пропишите стили, с теми данными, которые вам нужны, и по ним выставятся все будет. Не что сайт грузить не будет, так как не какой скрипт устанавливать не нужно, все будет работать на стилях. Так как мне приходилось сталкиваться с этим, и на кино сайте поменял дизайн и где плеер стоял, вид стал намного больше и смотрелось не красиво. В интернете этот стиль нашел, что поставил и по нему выставил как нужно и на всем сайте теперь идет по тому размеру, что поставил.

Установка:

CSS:

Код
.videoPlayer embed,  
.videoPlayer object,  
.videoPlayer iframe {width: 531px;height: auto;min-height: 373px;}  
}


PS - по этой теме на форуме поднимался вопрос, рекомендую и там прочесть.
18.10.2016 Просмотров: 397 Комментарий: (14)

Поделиться в социальных сетях

Материал разместил

Комментарий: 14
FeStemBer
FeStemBer 19.10.2016 00:511
0
Но не новая информация, просто эти стили не только на кино сайт ставят, хотя он многих выручил. Его можно и на сайт с любой тематикой установить, чтоб раз поставил плеер, а он красиво по всем сторонам стал.
TiMzLeR
TiMzLeR 19.10.2016 00:522
0
Отличный видео плеер, и как я понял этот видео плеер с сайта Cstavr...
Kosten
Kosten 19.10.2016 01:034
0
Все правильно с этого сайта, но главное на этом кино сайте эти стили стоят, так как менял дизайн. Если бы не поставил, то пришлось каждый фильм по размерам подгонять, а он в каркасе не один и трейлер еще.
TiMzLeR
TiMzLeR 19.10.2016 02:376
0
Да была бы целая заморочка но главное что все работает и это отлично...
tsakonter
tsakonter 19.10.2016 01:013
0
Но если только будет работать с кодами iframe, может стоит прописать и на object, но не просто они там прописаны.
Kosten
Kosten 19.10.2016 01:035
0
Нет не будет работать на object, просто уже проверено.
BlackHARD
BlackHARD 19.10.2016 15:187
0
Зачем так заморачиватся то? можно в самом html коде плеера указать нужные размеры.
Kosten
Kosten 19.10.2016 15:258
0
Когда их несколько тысяч и ты сменил шаблон, посмотрел бы как меняете, если можно одни м стилем св сделать.
BlackHARD
BlackHARD 19.10.2016 16:319
0
Очень просто:
Код
<div id="moonwalkPlayer"></div> <!-- Сюда будет выведен плеер !-->
<script type="text/javascript" async src="http://moonwalk.co/player_api?w=640&h=480&fixvk=1"></script>

Плюс на ucoz нельзя создать к одному фильму несколько тисяч плееров :)
Kosten
Kosten 19.10.2016 16:4810
0
BlackHARD, не знаю как, но на cstavr после установки другого шаблона, эти стили поставит и выставил ширину и длину, не говоря, что плееры в каркасе еще находясмя, и все, теперь беру код прописываю и ставлю трейлер и второй код плеера, не чего не выставляю, и все стили делают.
BlackHARD
BlackHARD 20.10.2016 14:3312
0
Кому как больше нравится)
Kosten
Kosten 19.10.2016 16:4911
0
Даже можно простой плеер взять и по размерам выставить нули и поставить вид материалов и комментариев к нему, все равно он встанет по тем размерам, что указано в стилях.
Brung
Brung 20.10.2016 19:1413
0
Сейчас кино сайты вообще не выгодно держать, по новостям уже сказали, что не будут просто жалоб скоро, предупредили один раз, все второго не будет, с поиска уходит полностью сайт, и одна главная страница остается, и не восстановить.
Brung
Brung 21.10.2016 02:5014
0
Здесь нашел такую информацию, по этой теме. Так что нужно еще добавлять, вот как все описано.

1. Заходим в ПУ -> Управление дизайном -> Таблицу стилей CSS и вставляем следующее:

Код
.videoPlayer embed,  
.videoPlayer object,  
.videoPlayer iframe {width: 945px !important; height:765px !important;}


2. Заходим в нужный раздел, где бы хотели видеть установленный вами размер окна, и замените $MESSAGE$ или $BODY$ на

Код
<div class="videoPlayer">$MESSAGE$</div>


или

Код
<div class="videoPlayer">$BODY$</div>


Так что если не получится, придется MESSAGE поставить в дивы..
avatar