Видео YouTube в адаптивном iframe не отображается в Firefox

Я создаю адаптивный веб-сайт со встроенным видео на YouTube. Видео находится в адаптивном iframe и прекрасно работает во всех браузерах, кроме Firefox. Там он просто не отображается.

Я пробовал savemode, добавляя html5 в ссылку, комментируя все js и js-запросы. Если я добавлю ширину и высоту в пикселях, они отображаются и работают нормально, но тогда они не реагируют.

Я могу сделать это видимым, изменив высоту контейнера на процент или vw-значение. Независимо от того, какую фигуру я добавляю, она всегда будет отображать видео в два раза выше и обрезая большие части левой и правой сторон. Также он будет обрезать большую часть ширины, когда область просмотра сжимается. При изменении значения контейнера на любое значение, отличное от 0, то же самое происходит во всех других браузерах.

Пробовал Firebug, но он даже не видит iframe.

Вот код:

.embed-container { 
	position: relative; 
	padding-bottom: 56.25%; 
	height: 0; 
	overflow: hidden; 
	max-width: 100%; 
	margin-bottom: 4vw;
} 
	
.embed-container iframe, .embed-container object, .embed-container embed { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
}
<div class="embed-container">
  <iframe src='https://www.youtube.com/embed//EyhQN24InWg?html5=1' frameborder='0' allowfullscreen></iframe>
</div>

веб-адрес: https://www.marjanderksen.com


iframe responsive-design firefox video-embedding
person Josien Vos    schedule 02.04.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы пытались использовать FitVids.js?

<script src="js/jquery.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script>
  $(document).ready(function(){
      $(".embed-container").fitVids();
  });
</script>

Ссылка для скачивания плагина: https://github.com/davatron5000/FitVids.js

person Davide Mancuso    schedule 11.01.2018