Black Bars in iframe Rumble vid at 600px

I’m displaying a Rumble video on my homepage with EmbedPress Lite. There was a “black bars” effect at pretty much every screen size. I tinkered around and came up with the following custom CSS which works at every width except at 600px and below:

.elsm-vid-loop iframe {
   max-height: 33vh !important;
}

@media only screen and (max-width: 800px) {
   .elsm-vid-loop iframe {
       max-height: 28vh !important;
   }
}

I then added the following to try to address the 600px breakpoint, but it doesn’t respond at all. I believe I’m either targeting the wrong selector or property:

@media only screen and (max-width: 600px) {
   .elsm-vid-loop iframe {
      max-height: 18vh !important;
   }
   .ose-embedpress-responsive > iframe {
      height: unset !important;
   }
}

Steps to Reproduce:

1. Go to http://elijahlisttv.org/ in Chrome
2. Right-click to enter Dev Tools Inspector mode
3. Hit “CTRL + SHIFT + M” on Windows to inspect as a mobile device
4. In the “Dimensions” dropdown select “Responsive”
5. Set the width to 600 px

|| EXPECTED BEHAVIOR:

1. The video in the EmbedPress widget should span the full width of its container
2. The height should auto scale proportional to the the width
3. There should be no “black bars” effect on either side, nor on left and right
4. There should be no distortion in the video thumbnail

|| ACTUAL BEHAVIOR:

1. There is a “black bars” effect on either both sides of the video, taking up about 50% of the width
2. The video thumbnail appears about 50% smaller than the width that is available

|| AFFECTED URL: http://elijahlisttv.org/

The page I need help with: [log in to see the link]