Как изменить или подогнать видео с помощью 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&amp;hl=en_US&amp;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&amp;hl=en_US&amp;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")
 

© Компания winx-fan.ru 2009 - 2020


.