background color

Good morning and thank you for such a helpful and robust support discussion!
I’ve put a YT video as the background of my homepage (and only the homepage) using mb.YTplayer. I had to set the entire site to be black text on a white background and then use the Custom CSS section to invert this for the home page so that the header and footer text are white on a black background (which background in header and colophon and menu is set to transparent for the video to show through). This way the homepage is a bit more dramatic and the white text can be seen on the black background of the video.
However, something is odd about the background. I cannot get it to stay black. It flashes black but then something overrides it to white until the video loads. You cannot see the white text because the whole screen is white for a second or two until the video loads. It’s odd and I can’t figure out why. I’ve been messing with it enough that I’m sure I’ve done something to cancel out something else I’ve done. Or I’ve just missed a simple thing.
If I take out the first few lines (#main etc. with the background color set), then the still image which is supposed to show up only on the main page (page-id-26) shows up on all pages.
In addition, the Current Menu Item (‘Home’) fades out at a different speed than the rest of the menu items, which is annoying.
Here’s what I’ve got so far:
header#masthead {
background: rgba(255, 255, 255, 0) !important;
}
#main {
background: rgba(255, 255, 255, 0) !important;
}
#colophon {
background: rgba(255, 255, 255, 0) !important;
}
/* Vantage menu opacity */
.main-navigation {
background: rgba(255, 255, 255, 0) !important;
}
.main-navigation ul li.current-menu-item > a, .main-navigation ul li.current_page_item > a {
background-color: rgba(255, 255, 255, 0.1) !important;
}
/* Vantage Site Title Color */
header#masthead .hgroup h1 {
color: #000000 !important;
}
/* Vantage Support Text */
header#masthead .hgroup .support-text {
color: #000000;
font-size: 150% !important;
}
/* Main Container */
#main {
min-height: 400px;
}
.page-id-26 header#masthead h1,
.page-id-26 header#masthead .support-text,
.page-id-26 header#masthead a,
.page-id-26 #site-info {
color: rgb(255, 255, 255) !important;
}
.page-id-26 header#masthead {
background: rgba(255, 255, 255, 0) !important;
}
.page-id-26 #colophon {
background: rgba(255, 255, 255, 0) !important;
}
@media only screen and (max-width:782px) {
.page-id-26 #page-wrapper {
background: url(“http://herrickandassociates.com/wp-content/uploads/2015/05/Flower-still-B.jpg”) !important;
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
}

URL: http://herrickandassociates.com