Facebook video embed not responsive

[jandrewstroud]

I’ve embedded a few Facebook videos and am having issues making them responsive for desktop and mobile. Here is the link to the page where the videos are: https://intotheharvest.org/video-resources/

I’ve tried adjusting the iframe code and also setting specific dimensions in Custom CSS but still can’t get it to display correctly. In mobile (landscape view), the top video overlaps the text that should be below it. The following screenshot shows the current problem:

Also, is there a way to set up the code so that the videos don’t automatically go full screen when played on a mobile device?

Thanks for any help you can offer!

[nabeel]

Hi there,

Thanks for writing around! I checked your page and there is a custom CSS in there that is conflicting with your video, to fix the issue, please find and remove the following code from your Cornerstone’s page CSS:

@media only screen and (min-width: 600px) {
.main-vid {
    width: 85vw;
    height: 64vh;
}
}

For your other query try removing allowfullscreen attribute from your iframe.

Hope this helps!