Responsive video with text overlay

In this tutorial I will show you how to overlay text/content onto a mp4 video and have it fully responsive on mobile devices.

See The Example

Here is the styling:

.video-back-container {
        position: fixed; 
        top: 70px;	/** Moves the content container down the video */
        left: 20%;  /** move the box left or right lower the number moves left higher number moves right */
    }
    
    @media (max-width: 1000px) { /** Do not change this */
    .video-back-container {
        position: fixed;
        left: 20px;
        padding: 0;
        margin: 0; 
        }
    }
    
    .container-wrapper {
        width: 90%;    /** Controls the size of the video */
        height: auto;  /** as the width get larger or smaller so does the height */
        margin: 0 auto; 
        text-align: center;
    }
    
    @media (max-width: 1100px) {
    .container-wrapper {    
        width: 100%;
        text-align: left;
        }
    }   
    
    .content { /** Edit the styling for the content box. */
        background: #424242; 
        box-shadow: 12px 0 15px -4px rgba(0, 0, 0, 0.2), -12px 0 8px -4px rgba(0, 0, 0, 0.2);
        border-radius: 15px; 
        color: #ffffff; 
        padding: 10px;
        height: 300px;
        overflow: auto;
        width: 60%; /** Do not change this */
        opacity: .8;
    }
    
    @media (max-width: 1000px) {
        .content {
        height: 150px; /** Sets the height so that the content box doesn't flow outside of the video on mobile devices */
        overflow: auto;
        width: 100%;
        }
    }
    
    @media (max-width: 1000px) {
        .right-padding {
            padding-right: 40px; /** Keeps the content box inside of the video screen */
            }
    }

</style>

Here's the code that makes it happen:

<h1>Lorem Ipsum Dolar</h1>
<p style="color:#ffffff; text-align:justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

</div>

</div>
</video>

</p>

</div>

Download Source (video not included)