YouTube video in response iframe not showing in Firefox

Question

I am creating a responsive website that has a youtube video embedded. The video is in a flexible iframe and works great in all browsers except Firefox. There he simply does not appear.

I tried savemode by adding html5 to the link, commenting out all js and js requests. If I add width and height to px, it will show and work fine, but then it does not respond.

I can show it by changing the height of the container by a percentage or vw value. No matter what number I add, it will always display the double height of the video and clip large parts of the left and right sides. In addition, it will reduce the width when the viewport shrinks. When changing the value of the container to everything except 0, this happens in all other browsers.

Tried Firebug, but it doesn't even see iframe.

Here is the code:

.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>

Run code

Website URL: https://www.marjanderksen.com

Answer 1

Have you tried using FitVids.js?

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

Link to the download plugin: https://github.com/davatron5000/FitVids.js