Moving .site-title and .site-description to the top corner of header video

Replies: 0

I’m trying to figure out how to move the .site-title and .site-description to the top of left corner of overlaying the header video instead of the bottom left corner but unable to figure it out.

Here is the current CSS code I have configured now for http://davidtnoland.com:

/*--------------------------------------------------------------
Video Header controls
--------------------------------------------------------------*/

.has-header-image .custom-header-media img,
.has-header-video .custom-header-media video,
.has-header-video .custom-header-media iframe {
        position: fixed;
        height: 100%;
        left: 100%;
        max-width: 1000%;
        max-height: 100%;
        min-height: 1000%;
        min-width: 100%;
        min-width: 100vw; /* vw prevents 1px gap on left that 100% has */
        width: auto;
        top: 50%;
        padding-bottom: 1px; /* Prevent header from extending beyond the footer */
        -ms-transform: translateX(0%) translateY(0%);
        -moz-transform: translateX(0%) translateY(0%);
        -webkit-transform: translateX(0%) translateY(0%);
        transform: translateX(0%) translateY(0%);
}

.site-branding {
        padding: 1em 0;
        position: relative;
        -webkit-transition: margin-bottom 0.2s;
        transition: margin-bottom 0.2s;
        z-index: 3;
}

.site-branding a {
        text-decoration: none;
        -webkit-transition: opacity 0.2s;
        transition: opacity 0.2s;
}

.site-branding a:hover,
.site-branding a:focus {
        opacity: 0.7;
}

.site-title {
        clear: none;
        font-size: 48px;
        font-size: 3rem;
        font-weight: 800;
        line-height: 1.25;
        letter-spacing: 0.08em;
        margin: 0;
        padding: 0;
        text-transform: uppercase;
}

.site-title,
.site-title a {
        color: #222;
        opacity: 1; /* Prevent opacity from changing during selective refreshes in the customize preview */
}

.site-description {
        color: #666;
        font-size: 26px;
        font-size: 1.625rem;
        margin-bottom: 0;
}