Creating an iPad-style video frame with CSS and without images
Your code is perfectly valid, according to the HTML and CSS validators at W3C:


  HTML Validator
  CSS Validator


However, there are a couple things you could improve.

HTML:

I assume you already know to always specify the doctype and character encoding in your HTML files.  The character encoding is not required by the validator, but it is good to always include it:

&lt;!DOCTYPE HTML&gt;
&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Page Title&lt;/title&gt;
&lt;/head&gt;


Your CSS is difficult to read because of your indentation and your use of braces.  All of your indentation should match, not have some blocks at the nested indentation level, and some at their proper level.  Also, most CSS files use braces like this:

.vid {
    max-width:800px;
    width:80%;
    margin:0 auto;
}


Not like this:

.vid{
    max-width:800px;
    width:80%;
    margin:0 auto}


Edit

After clarification in the comments, this is a valid CSS style, but I still prefer the above style.

End Edit

The CSS validator does not require that you have a semi-colon ; after the very last item, but you should to keep things all the same style.

Overall, your code is good and the UI is beautiful.  These are just a few things you could improve on and a few tips that just because they are so important, they deserve to be here.