Resize Banner Video on Mobile

Hi, I am trying to get the banner video to resize when viewed on mobile so it's not zoomed in. As the video carries text it becomes unreadable on mobile. I have different banner videos on a few pages so would this need different ID's? The only one i can find with ID finder is a 'collection' tag which doesnt seem to work

Really appreciate any help!

https://www.moosecoffee.co/our-journey

Thanks

8 hours ago, hzvb said:

Hi, I am trying to get the banner video to resize when viewed on mobile so it's not zoomed in. As the video carries text it becomes unreadable on mobile. I have different banner videos on a few pages so would this need different ID's? The only one i can find with ID finder is a 'collection' tag which doesnt seem to work

Really appreciate any help!

https://www.moosecoffee.co/our-journey

Thanks

Do you mean this part?

I check that it only shows the paragraphs below and has a space. I wonder if you have any changes on this page

Hi, thanks for your response. Yes it should be loading the video on desktop as per the screenshot below. However when viewed on mobile it's zoomed in so a lot of the text is cut off. 

Thank you!

You can use this to Website Tools > Custom CSS

@media screen and (max-width:640px) {
body#collection-63eb5d5bb680847e301b829e iframe {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
body#collection-63eb5d5bb680847e301b829e .page-banner-wrapper {
    height: 220px !important;
}
}