ZorNet.Ru — сайт для вебмастера » HTML и CSS » Создать width и height видео плеера на CSS

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

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

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

Установка:

CSS:

Код

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

PS - по этой теме на форуме поднимался вопрос, рекомендую и там прочесть.

18 Октября 2016 Просмотров: 2818 Комментариев: (14)

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

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

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 14
Порядок вывода комментариев: FeStemBer 19 Октября 2016 00:51¹ 0 Но не новая информация, просто эти стили не только на кино сайт ставят, хотя он многих выручил. Его можно и на сайт с любой тематикой установить, чтоб раз поставил плеер, а он красиво по всем сторонам стал. TiMzLeR 19 Октября 2016 00:52² 0 Отличный видео плеер, и как я понял этот видео плеер с сайта Cstavr... Kosten 19 Октября 2016 01:03⁴ 0 Все правильно с этого сайта, но главное на этом кино сайте эти стили стоят, так как менял дизайн. Если бы не поставил, то пришлось каждый фильм по размерам подгонять, а он в каркасе не один и трейлер еще. TiMzLeR 19 Октября 2016 02:37⁶ 0 Да была бы целая заморочка но главное что все работает и это отлично... tsakonter 19 Октября 2016 01:01³ 0 Но если только будет работать с кодами iframe, может стоит прописать и на object, но не просто они там прописаны. Kosten 19 Октября 2016 01:03⁵ 0 Нет не будет работать на object, просто уже проверено. BlackHARD 19 Октября 2016 15:18⁷ 0 Зачем так заморачиватся то? можно в самом html коде плеера указать нужные размеры. Kosten 19 Октября 2016 15:25⁸ 0 Когда их несколько тысяч и ты сменил шаблон, посмотрел бы как меняете, если можно одни м стилем св сделать. BlackHARD 19 Октября 2016 16:31⁹ 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 19 Октября 2016 16:48¹⁰ 0 BlackHARD, не знаю как, но на cstavr после установки другого шаблона, эти стили поставит и выставил ширину и длину, не говоря, что плееры в каркасе еще находясмя, и все, теперь беру код прописываю и ставлю трейлер и второй код плеера, не чего не выставляю, и все стили делают. BlackHARD 20 Октября 2016 14:33¹² 0 Кому как больше нравится) Kosten 19 Октября 2016 16:49¹¹ 0 Даже можно простой плеер взять и по размерам выставить нули и поставить вид материалов и комментариев к нему, все равно он встанет по тем размерам, что указано в стилях. Kolinkor 20 Октября 2016 19:14¹³ 0 Сейчас кино сайты вообще не выгодно держать, по новостям уже сказали, что не будут просто жалоб скоро, предупредили один раз, все второго не будет, с поиска уходит полностью сайт, и одна главная страница остается, и не восстановить. Kolinkor 21 Октября 2016 02:50¹⁴ 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 поставить в дивы..