Problem with video embeds not responsive for mobile/tablet

Hi - I'm having some issues with embedding my Vimeo videos on my site. They look fine on desktop but are not responsive in mobile and tablet so are way too huge in those breakpoints. I tried applying a <div> to the HTML, then adding this CSS:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}
.video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

But the HTML seems to be in disagreement somewhere... and I can't figure out where!
Any help would be greatly appreciated.