Медиаплеер выходит за грань мобильной версии сайта

[tihjawi 1]

Здравствуйте. У меня вот какая проблема: на DLE 10.3 имеет стандартный оранжевый шаблон для смартфонов, но при вставке кода видеоплеера, сам плеер выезжает за границу сайта. Это касается всех плееров, обычного, flash и ютуб. Включена настройка HTML5 в админке и проставлены принудительно размеры 600х320, чтобы на полной версии плеер отображался красиво. При этом и текст и картинки за границу не вылезают. В коде ничего не менял.

Может быть кто-нибудь сталкивался с этим, и мог бы мне помочь?

Спасибо.

Изменено 29 декабря 2014 пользователем tihjawi

[Sh1ning 23]

Дайте ссылку на сайт.

[tihjawi 1]

конкретно - вот этот пост http://mediapithecus.com/2-starichki-ac-dc-razrodilis-albomom-rock-or-bust.html при просмотре на мобильнике.

видео находится в спойлере, но я пробовал по всякому, и без спойлера и другие плееры - все равно плеер рвет шаблон, вылезая за его границы.

при этом я собственными глазами видел точно такой же шаблон (к примеру, http://bidla.net , уж простите за пошлый пример), где медиаплеер аккуратно располагается по центру новости, не вылезая за рамки.

[odys 384]

tihjawi, код твоего плеера

<video width="600" height="300" preload="metadata" poster="" controls="controls">

<source type="video/mp4" src="http://mediapithecus.com/uploads/files/clips/acdc_-_rock_or_bust.mp4"></source>

</video>

width="600" - это значит ширина плеера 600px

в настройках скрипта поменяй на 100% и пересохрани новость

[tihjawi 1]

спасибо за ответ. да, это помогло, но теперь другая проблема - как быть в таком случае с высотой? если оставить ее 300, то на мобильной версии плеер ужасно растягивается, а если уменьшить значение, то ужасно растягивается уже на полной версии. пробовал аналогично ставить 100% - получается очень длинный плеер)

хотелось бы чтобы все было равномерно.

Изменено 29 декабря 2014 пользователем tihjawi

[odys 384]

спасибо за ответ. да, это помогло, но теперь другая проблема - как быть в таком случае с высотой? если оставить ее 300, то на мобильной версии плеер ужасно растягивается, а если уменьшить значение, то ужасно растягивается уже на полной версии. пробовал аналогично ставить 100% - получается очень длинный плеер)

хотелось бы чтобы все было равномерно.

ни как, вернее без правки .php

Суть такова, нужно в parse.class.php у кода, который вставляет видео убрать настройку ширины и высоты и прописать какой-нибудь класс и уже через .css настраивать ширину и высоту для полной версии сайта и для мобильной соответственно.

[celsoft 6 072]

ни как, вернее без правки .php

Не правда. Смотрите тему http://forum.dle-news.ru/index.php?showtopic=67303&view=findpost&p=335477 всегда и для всего в CSS можно переназначить любой размер и любое свойство.

[tihjawi 1]

всегда и для всего в CSS можно переназначить любой размер и любое свойство.

скажите, пожалуйста, а в моем случае куда именно смотреть?

я просто в кодинге довольно плохо разбираюсь.

[odys 384]

Не правда.

точно, !important

tihjawi, попробуй в .css мобильной версии добавить video {width:100% !important;height:200px !important;}

[tihjawi 1]

к сожалению, предложенное вами не сработало ((

пробовал и в style.css, и в engine.css - все без изменений (

Изменено 29 декабря 2014 пользователем tihjawi

[odys 384]

к сожалению, предложенное вами не сработало ((

пробовал и в style.css, и в engine.css - все без изменений (

что-то ты не то прописываешь, я сейчас проверил, всё работает!

[tihjawi 1]

мои действия:

я открываю в админке шаблон для смартфонов. выбираю style.css (пробовал также engine.css, который, мне, кстати, именно файл нужен?) в папке стилей, прописываю вверху код:

video {width:100% !important;height:200px !important;} 

сохраняю, прибиваю кэш, обновляю страницу. или имеет значение место в файле, куда нужно код прописывать? у меня получается что-то типа вот этого, в случае со style.css:

body { word-wrap: break-word; }

body, select, textarea, button, input { font: 14px/1.45 Helvetica, Arial, sans-serif; color: #2a2a2a; outline: none; }


video {width:100% !important;height:200px !important;}


a { outline: none; color: #ee4923; text-decoration: none; }

a:hover { text-decoration: underline; }

a img { border: 0 none; }

a > img { vertical-align: bottom; }


[/code]

[odys 384]

мои действия:

так всё же работает! Я сейчас зашёл всё отлично, плеер масштабируется

[tihjawi 1]

если вы смотрите сейчас на сайте, то там реализовано так, как было предложено вами в самом начале. то есть 100% ширина и 260px высота, чтобы и на мобиле нормально выглядело и относительно не криво на полной версии.

теперь я ставлю начальное значение плеера: ширина 600px, высота 300px, добавляю в style.css ваш код, чишу кэш и пересохраняю новость, и получается вот такая петрушка:

[odys 384]

tihjawi, попробуй всё же как я предложил самый первый раз, игнорировать настройки, а высоту и ширину задать через .css

в engine/classes/parse.class.php есть такая строчка (примерно 1077)

return "<!--dle_video_begin:{$decode_url}--><video width=\"{$width}\" height=\"{$height}\" preload=\"metadata\" poster=\"{$preview}\" controls=\"controls\">

						<source type=\"video/mp4\" src=\"{$url}\"></source>

						</video><!--dle_video_end-->";

замени на эту

return "<!--dle_video_begin:{$decode_url}--><video preload=\"metadata\" poster=\"{$preview}\" controls=\"controls\">

						<source type=\"video/mp4\" src=\"{$url}\"></source>

						</video><!--dle_video_end-->";

только не забудь пересохранить новость

Изменено 30 декабря 2014 пользователем odys