Hi there weldenr1,
here you go…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
html,body {
height:100%;
margin:0;
}
body {
background-image: url(http://www.milanoperformance.com/uploads/1/0/2/1/10212014/9278866_orig.jpg);
background-size: 100% 100%;
}
ul {
margin: 0;
list-style: none;
}
ul li {
position: absolute;
z-index: 2;
}
ul li:first-of-type {
top: 3em;
left: 3em;
width: 5em;
}
ul li:last-of-type {
top: 50%;
left: 50%;
width: 10em;
transform: translate(-50%,-50%);
}
ul li a {
display: block;
width: 100%;
padding-top: 100%;
border-radius: 50%;
background-color: rgba(0,0,0,0.6);
background-image: radial-gradient(rgba(206,206,206,0.2) 0,
rgba(153,153,153,0.4) 25%,
rgba(102,102,102,0.6),
rgba(51,51,51,0.8) 75%,
rgba(0,0,0,1) 100%);
}
ul a span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #fff;
}
video {
position: absolute;
top: 0%;
left: 100%;
width: 40%;
transform: translate(-100%,0);
}
@media screen and (max-width: 40em) {
video {
width: 60%;
}
@media screen and (max-width: 30em) {
video {
width: 80%;
}
}
@media screen and (max-width: 22.5em) {
video {
width: 100%;
}
}
</style>
</head>
<body>
<ul>
<li><a href="#"><span>link</span></a></li>
<li><a href="#"><span>link</span></a></li>
</ul>
<video src="testmovie.mp4" autoplay controls></video>
</body>
</html>
coothead