Вставка видео для сайта с адаптивной версткой

При вставке видео с Youtube или Vimeo часто возникает проблема с отображением на сайте с разной шириной контента. Все происходит потому что сервисы вручную задают размер видео в коде для вставки на сайт.

Проще всего справиться с этой проблемой с помощью JavaScript.

  1. Определяем соотношение ширины и высоты (aspectRatio) для видео.
  2. Убираем хардкорные значения ширины и высоты.
  3. При изменении ширины окна задаем размеры видео.

Ниже представлен JavaScript код с использованием JQuery для вставки на сайт.

	// Find all YouTube videos
	var $allVideos = $("#content .description iframe"),
	
	    // The element that is fluid width
	    $fluidEl = $("#content .description");
	
	// Figure out and save aspect ratio for each video
	$allVideos.each(function() {
	
	  $(this)
	    .data('aspectRatio', this.height / this.width)
	
	    // and remove the hard coded width/height
	    .removeAttr('height')
	    .removeAttr('width');
	
	});
		
	// When the window is resized
	$(window).resize(function() {
	
	  var newWidth = $fluidEl.width();
	
	  // Resize all videos according to their own aspect ratio
	  $allVideos.each(function() {
	    var $el = $(this);
	    $el
	      .width(newWidth)
	      .height(newWidth * $el.data('aspectRatio'));
	
	  });
	
	// Kick off one resize to fix all videos on page load
	}).resize();