how to make the video header fit on mobile view

Hello,

I love my new TwentySeventeen theme, however there is a little issue about my youtube video header that doesn’t fit on mobile view (I did view it on Ipad, I don’t know what it look like on Iphone or other gadgets…)

Here’s the screenshot >>> https://www.dropbox.com/s/im9ilxir5huydv8/Photo%2022-03-2017%2C%2011%2046%2004%20AM.png?dl=0

I tried the ff. CSS:

@media only screen and (max-width: 1024px){
.has-header-image .custom-header-media img, .has-header-video .custom-header-media video, .has-header-video .custom-header-media iframe{
   position:absolute!important;
}
}

What did I miss? Please help!

Thanks.

Xyza

BLOG: https://www.xyzagerondio.com