Skip to content

Instantly share code, notes, and snippets.

@hamoid
Last active December 16, 2015 22:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hamoid/5508669 to your computer and use it in GitHub Desktop.
Save hamoid/5508669 to your computer and use it in GitHub Desktop.
A YouTube video below, a layer covering the whole page above
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Layer covering video</title>
<style type="text/css">
html, body {
padding: 0px;
margin:0px;
}
#overlay {
font-size:16px;
position:absolute;
width:100%;
height:100%;
}
#emptybox {
width:560px;
height:315px;
float:left;
margin-right:20px;
margin-bottom:20px;
}
</style>
</head>
<body>
<div id="overlay">
<!-- uncomment the next line if you want to avoid text covering the video -->
<!-- <div id="emptybox"></div> -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at urna justo, non laoreet sem. Suspendisse posuere mi et ligula hendrerit at dapibus dui interdum. Nulla dapibus imperdiet justo, a pretium lorem congue id. Pellentesque eu vulputate nibh. Praesent non tellus justo. Proin eu odio quis dolor ultrices egestas id ut est. Duis tristique, felis in dignissim hendrerit, nisl dui ultricies risus, a sodales magna sapien vel justo. Vivamus tincidunt malesuada condimentum. Mauris sed lorem sapien. Aenean pulvinar congue dolor, nec tincidunt libero rhoncus et. Quisque accumsan, nisi id sodales semper, libero nunc condimentum lorem, nec imperdiet tellus est eu mi.</p>
<p>Nullam eget ligula magna, et feugiat urna. Donec tincidunt dictum libero, mollis lacinia lacus luctus eu. Duis ornare, mi sit amet pulvinar mattis, urna elit tristique risus, et fringilla libero mi in turpis. Sed nibh erat, ornare quis varius vel, aliquet eget orci. Aenean nisi nisi, gravida dignissim cursus ac, tincidunt non urna. Quisque in leo ante, ac ornare nisi. Mauris ipsum metus, placerat vel iaculis ac, commodo feugiat purus. Proin sed est vel mi hendrerit pellentesque in et purus.</p>
<p>Fusce rutrum congue iaculis. Nulla et luctus dolor. Fusce turpis lectus, aliquam at ultricies ac, ullamcorper et diam. Donec a arcu a mauris malesuada ultrices at et est. Nunc molestie neque nec arcu blandit egestas. Fusce egestas arcu at augue porttitor nec aliquet enim hendrerit. Vivamus leo sapien, lacinia in mollis vel, blandit ac felis. Proin eget tristique neque.</p>
<p>Praesent id dui quis mi ornare porta id id mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in libero nec mi lobortis consequat. Nulla facilisi. Proin vehicula libero sit amet lectus ullamcorper in interdum sem tempor. Vivamus sem tellus, interdum sed varius fermentum, blandit a odio. Aenean luctus, nisi sit amet mattis pharetra, purus metus cursus nulla, a pulvinar lorem quam sit amet sapien. Duis odio nibh, commodo ut laoreet nec, vulputate vitae tortor. Donec sagittis tellus eget sem sodales ut volutpat sapien tincidunt. Cras fringilla, enim sed tincidunt pretium, lectus odio porta sem, mattis pretium leo nulla sit amet enim. Mauris sit amet volutpat sapien. Maecenas ut felis accumsan felis blandit ullamcorper. Maecenas ac magna erat. Cras vitae eros at leo gravida semper et vitae nisi. Morbi at leo tellus, ac interdum felis.</p>
<p>Mauris pellentesque porttitor ultrices. Nullam pretium fringilla felis a cursus. Nulla dui enim, faucibus non vehicula id, rhoncus ut risus. Morbi id augue massa. Sed quis ante id tortor vulputate dignissim sit amet nec justo. Morbi commodo, nulla eu posuere pulvinar, tortor erat molestie risus, eget viverra mauris ante eu risus. Etiam nec ipsum a lectus facilisis elementum. Integer a diam id tortor euismod viverra ac at massa. Sed imperdiet gravida tellus eget ullamcorper. Maecenas at ornare purus.</p>
</div>
<iframe width="560" height="315" src="http://www.youtube.com/embed/AmTHjBQc37Y" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment