I have been wrestling with an iframe video issue for weeks now. Basically I want the video in an iframe to be responsive I tried dozens of ways to make that possible before I found one that works. However now I’m finding on bigger screens, it breaks and the video is way small on Internet Explorer and Firefox, Chrome works perfect. If you go the the website http://hirshprecisionproductsinc.com/ and if you have a big monitor or two monitors to stretch it the video goes from responsive to not.
Please help me I don’t know how else to fix this.
Here is my HTML on the page:
div class="video-header-container video-header-container-16x9"
<iframe src="https://player.vimeo.com/video/243004295?autoplay=1&loop=1&title=0&byline=0&portrait=0" width="300" height="150" allowfullscreen="allowfullscreen"></iframe>
/div
And here is my custom CSS:
.video-header-container-16x9 {
padding-bottom: 33%;
}
.video-header-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
.video-header-container {
margin: -2% 0% 2% 0%;
}