Single Content-free Landing Page

Please advise on how to do this. I really just need one page. I don’t know why it makes me put two pages in for a static page. This should be pretty simple. I don’t need any content on the page. Maybe just a transparent space filler but the video is the actual background for the page and that’s really all I need. But any adjustments I’ve tried making don’t seem to work properly and if they do on my desktop they end up off on the smaller devices. Please help!

the problem with doing that is that there is no audio option through the Header Media. That is something that I need to have the option of

that looks great. Thank you.
What is the best way to put the logo in the top left of the screen and have it then be fluid and in the same place across all devices?

That worked great for the logo but it seems to have then thrown off the other elements that i had added already in additional CSS when it comes to fluid responsiveness.
The home page on a desktop is pretty spot-on to how I want it to look. The problem right now is that it is not fluid across smaller devices. The controls for the video are moving/disappearing. The menu dropdown is separating from the menu, etc.
Uniformity across the board is key for my site. Can you please advise on how to get it all fully fluid?

This is everything currently in my additional CSS:
.home #page {
height: 100%;
height: 100vh;
background: transparent;
}

.custom-logo {
max-width: 200px;
}

@media screen and (min-width: 30em) {
.custom-logo {
max-width: 300px;
}
}

@media screen and (min-width: 40em) {
.custom-logo {
max-width: 400px;
}
}

@media screen and (min-width: 48em) {
.custom-logo {
max-width: 500px;
}
}

@media screen and (min-width: 64em) {
.custom-logo {
max-width: 600px;
}

.home #page {
height: 100%;
height: 100vh;
}

#colophon {
position:fixed;
bottom:0;
left:0;
width:100%;

}

.mb_YTPBar .mb_YTPProgress {
height: 0px;
width: 0px;
background: transparent;
bottom: 0;
left: 0;
}

.mb_YTPBar .simpleSlider {
position: relative;
width: 0px;
height: 0px;
overflow: hidden;
margin-right: 0px;
border-radius: 0px;
display: none;
}

.mb_YTPBar .mb_YTPTime {
width: 0px;
display: none;
}

.mb_YTPBar .mb_YTPUrl.ytpicon {
font-size: 0px;
display: none;
color: transparent;
}

.mb_YTPBar .buttonBar {
left: 600px;
width: 100%;
}

.mb_YTPBar span {
display: inline;
}

.mb_YTPBar .ytpicon {
font-size: 70px;
}

.mb_YTPBar .buttonBar {
color: #3c024f;
}

.mb_YTPBar {
transition: opacity .5s;
display: block;
height: 25px;
background: none;
position: fixed;
bottom: 80px;
left: 420px;
text-align: left;
z-index: 1000;
color: #fff0;
opacity: 1;
}

.mb_YTPBar .buttonBar {
transition: all .5s;
background: none;
background-color: transparent;
position: absolute;
top: 0px;
height: 0px;
padding: 0px;
}

.site-header-main .wrapper {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: flex-start;
display: -webkit-flex;
display: -ms-flexbox;
/* display: contents; */
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: inherit;
position: relative;
}

embed, iframe, object, video {
max-width: 100%;
margin-top: -580px;
}

.is-open .menu-inside-wrapper {
visibility: visible;
opacity: .95;
}

.menu-inside-wrapper {
width: 238px;
top: 100%;
right: 0;
opacity: 0;
}

.menu-inside-wrapper {
width: 240px;
top: 17%;
}

.is-open .menu-inside-wrapper {
right: -11.5%;
}

.site-header-menu .menu-label {
display: contents;
}

.site-title a, .site-title a:hover, .site-title a:focus, .site-description, .main-navigation a, .menu-toggle, .dropdown-toggle, .site-header-cart .cart-contents, .site-header-menu .social-navigation a {
color: #b14fd4;
}

.wrapper {
margin: 15px auto;
max-width: 1500px;
}

html {
margin-top: 0px !important;
}

Thank you that worked for the logo section but the other sections are still off when viewing on the various devices. Can you please advise how to correct that? As I said, on the desktop, it all looks as it should

also, last thing (i think) is best way to reposition where the logo appears? It is currently showing in left middle portion of the top of the screen. I would like to move it over to the top left corner. Thank you in advance for your help

That’s fine I can figure most of it out. Can you please go ahead as agreed in one of my threads refund the purchase of the Adonis Pro theme to the card it was issued from or I can give a different card if need be as that theme did not suit my needs and then purchased the audioman pro in its place. Thank you

hi guys. So I have most of my issues on the site worked out except for a couple of critical questions.
I am trying to use the Header Media section to basically overlay my logo on the site, but want it in the top left area of the screen. It’s a PNG file with transparency on. When I am putting it in the header media section it seems to be doubling up. Like there are two logo’s slightly offset. That’s problem #1. Problem #2 is that how can i resize the logo so that it is not completely covering the screen? I do not want it blocking the entire background video. Right now, when i tried fiddling with it, it seems to be adjusting the box size that the logo is wrapped in, thus making the overall presence of it smaller but doing so by cutting off the actual logo.
Really, all i want is to be able to place the logo wherever i need it and have the size be adjustable. It’s close to working but the size option is what I can’t seem to get working. Can you please help? Thank you