Bootstrap snippet: media video players

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: video

<div class="col-xs-12 col-sm-6"> <div class="box rte"> <h2 class="boxHeadline">Youtube video</h2> <h3 class="boxHeadlineSub">basic youtube iframe embed</h3> <iframe width="100%" height="281" src="" frameborder="0" allowfullscreen=""></iframe> </div> </div> <div class="col-xs-12 col-sm-6"> <div class="box rte"> <h2 class="boxHeadline">Vimeo payer</h2> <h3 class="boxHeadlineSub">Default vimeo embed</h3> <iframe src="" width="100%" height="281" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> </div> </div> <div class="col-xs-12 col-sm-6"> <div class="box rte"> <h2 class="boxHeadline">Default HTML5 player</h2> <h3 class="boxHeadlineSub">native browser player</h3> <video controls="" preload="auto" width="100%" height="281" poster=""> <source src="" type="video/mp4"><!-- Safari / iOS, IE9 --> <source src="" type="video/webm"><!-- Chrome10+, Ffx4+, Opera10.6+ --> <source src="" type="video/ogg"><!-- Firefox3.6+ / Opera 10.5+ --> <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video </p> </video> </div> </div>
body{margin-top:20px; background:#eee; } .box { background: #fff; padding: 30px; margin: 0 0 24px 0; } .rte .boxHeadline { font-size: 18px; font-size: 1.8rem; font-weight: 400; margin: 0 0 25px 0; } .rte .boxHeadline+.boxHeadlineSub { margin: -18px 0 30px 0; } .rte .boxHeadlineSub { font-size: 14px; font-size: 1.4rem; font-weight: 400; font-style: italic; color: #919599; margin: 0 0 25px 0; }

media video players

  May 10th, 12:52