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="https://www.youtube.com/embed/ESXgJ9-H-2U" 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="https://player.vimeo.com/video/62092214" 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="http://camendesign.com/code/video_for_everybody/poster.jpg"> <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"><!-- Safari / iOS, IE9 --> <source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm"><!-- Chrome10+, Ffx4+, Opera10.6+ --> <source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" 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; }
Dey-Dey

media video players

Dey-Dey
  May 10th, 12:52
1.6K Views