Как изменить или подогнать видео с помощью jQuery
Если у Вас на сайте часто используется видео и Вы не используете модулей и плагинов, данный метод пригодится обязательно. Суть такова, размер видео каким бы он ни был, подгоняется под внешний div и не выходит за его границы. Ширина ролика будет соответствовать ширине тега p, а высота будет создаваться автоматически, исходя из размеров ролика не искажая его пропорций.
Данный скрипт достаточно прописать перед закрытием тега </body>. Скрипт проверит размер видео и внешний div в котором оно находится, и подгонит по ширине и высоте не искажая размеров.
$("object, embed, .format-video iframe").each(function() { var orig = $(this); var ratio = orig.attr("height") / orig.attr("width"); var parWidth = orig.parents().find("p:last").width(); if(orig.attr("width")> parWidth) { orig .attr("width", parWidth) .attr("height", (parWidth * ratio)); } });
Пример:
Здесь я использовал стандартное видео с Youtube.com, шириной 940px и высотой 559px:
<p><object width="940" height="559"> <param name="movie" value="http://www.youtube.com/v/snaionoxjos?fs=1&hl=en_US&rel=0"></param> <param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/snaionoxjos?fs=1&hl=en_US&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="940" height="559"></embed> </object><p>
Как видите оно подходит по размерам и не деформируется. Обратите внимание на то, что ролик находится в теге <p>. Если Ваша CMS, т.е. редактор подставляет дивы, тогда нужно будет поправить эту строку в скрипте, где p поменять на div:
.find("p:last")
- Войдите на сайт для отправки комментариев