<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!--fix found by Ashley Peacock: http://www.avacari.com--> <div class="container" id="round"> <center> <div class="row"> <div class="roundedVideo"> <div class="tl"></div> <div class="tr"></div> <div class="bl"></div> <div class="br"></div> <div class="asset video"> <iframe width="500" height="250" src="http://www.youtube.com/embed/kfVsfOSbJY0?wmode=opaque" frameborder="0""></iframe> </div> </div> </center> </div>

video-container{ text-align:center; } .round{ position:center; } .roundedVideo { position: relative; height:250px; width:500px; margin:20px; } .tl { background-image: url(http://www.avacari.com/images/cc/tl.png); width:20px; height:20px; position: absolute; top:0; left:0; } .tr { background-image: url(http://www.avacari.com/images/cc/tr.png); width: 20px; height: 20px; position: absolute; top: 0; right: 0; } .bl { background-image: url(http://www.avacari.com/images/cc/bl.png); width:20px; height:20px; position: absolute; bottom: 0; left: 0; } .br { background-image: url(http://www.avacari.com/images/cc/br.png); width: 20px; height: 20px; position: absolute; bottom: 0; right: 0; }