Padding issue below page video (DAWN Theme)

Technical Q&A
1

I had added a video to a new page (other than homepage) and see i have a major padding gap between my video and my rich text.

When applying this to the base file, although it solves my problem, it changes the padding for my main page video causing everything to overlap. any suggestions?

.videoBackground {
    height: 11% !important;
}

the page i am trying to fix w/o disrupting my homepage layout

https://travelzenclub.com/pages/universal-studios-parks-and-resorts

this is the code i am showing in the page.json file but when i try to add your code it wont accept it, i tried following the format “video-background” : “height: 20%”, but this does not change anything even when refreshing

"16550293702ac11e5f": {
      "type": "video-background",
      "blocks": {
        "16550293708a218394-0": {
          "type": "video",
          "settings": {
            "video_link": "https:\/\/cdn.shopify.com\/s\/files\/1\/0587\/2556\/4554\/files\/Universal_resized.mp4?v=1655011567",
            "video_image": "shopify:\/\/shop_images\/Universal_Resized.jpg",
            "overlay_opacity": 0,
            "title": "",
            "text": "",
            "color_text": "#ffffff",
            "button_label": "",
            "button_link": "",
            "color_btn_bg": "#ffffff",
            "color_btn_text": "#ffffff"
2

So i went to vimeo and uploaded a video for test - i used there embedded code as a template and was able to add my video by adding a custom liquid section the page i wanted and replaced the vimeo source link w/ the shopify file link for the video i wanted

<iframe src="ENTER THE LINK FOR YOUR VIDEO HERE" frameborder="0" allow="autoplay; fullscreen" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>