I’m attempting to create a home page with an background video using HTML 5 that has a text overlay using CSS. I’m using a custom CSS editor and the Pure theme. When I just have the video without the CSS everything is fine – when I add the CSS a giant white box appears between the text and the video, completely obscuring everything but the edges of the video.

I’m currently self hosting the site using MAMP, so I’m not sure how to share a link…sorry! If someone knows how I might be able to share please let me know. Otherwise, I’ve included a screenshot.

Issue: http://imgur.com/oQ6TcEn
The code: http://pastebin.com/MR0mki7j
Theme: http://www.webdesignerdepot.com/2014/09/free-download-pure-wordpress-theme/

I’m very new to HTML and CSS, so plain language is very much appreciated.