"video audio squared"
Bootstrap 3.3.0 Snippet by mackylu

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <!doctype html> <!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]--> <html class="no-js" lang="en" data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>adPush | Winning with an Edge</title> <meta name="description" content="At adPush we are rethinking everything "/> <meta name="author" content="ray@rccloud.me"/> <meta name="copyright" content="adpush (c) 2011"/> <link rel="stylesheet" href="http://foundation.zurb.com/assets/css/templates/foundation.css"/> <style>body{font-family:'Raleway',sans-serif;font-size:18px;}hr{text-align:center;margin:0 auto;opacity:0.5;}ul{text-transform:uppercase;}ul.inline-list.right{text-transform:none;}ul.inline-list.right a{color:#000;}ul.inline-list.right a:hover{color:rgba(0,0,0,0.5);}h1{font-family:'American Typewriter','Courier New',Courier,Monaco,mono;font-size:42px;color:#fff;line-height:42px;margin-top:16px;margin-bottom:0px;text-align:center;}h2{font-family:'American Typewriter','Courier New',Courier,Monaco,mono;color:#fff;font-size:36px;line-height:36px;}h3{font-family:'American Typewriter','Courier New',Courier,Monaco,mono;font-size:24px;color:#fff;line-height:10px;text-align:center;font-weight:500;padding-bottom:10px;}h4{font-family:'American Typewriter','Courier New',Courier,Monaco,mono;color:#000;font-size:28px;padding-top:5px;}.columns.large-centered{padding-left:5px;padding-right:5px;}@media only screen and (max-width: 40em) {.columns.large-centered{font-size:13px;}}@media only screen and (min-width: 40.063em) {.columns.large-centered{font-size:14px;}}.about-box{color:#fff;}.black-box{background-color:rgba(0,0,0,0.55);/*padding:35px padding:15px 50px 15px 50px;*/padding:35px;font-weight:900;}.black-box p{font-weight:900;}.secondary.small.button{background-color:transparent;color:#fff;border:2px #FF69B4 solid;border-radius:5px;padding:15px 50px 15px 50px;margin:0;}.secondary.small.button:hover{background-color:#FF69B4;}.row .main-wrapper{color:#fff;}.about-content{background-color:#fff;box-shadow:2px 2px 10px rgba(0,0,0,0.1);}.button-group li .button{border:0!important;}.button{-webkit-appearance:none;background-color:transparent;border-width:0;text-align:center;box-shadow:0 0 0;}.button:hover{color:rgba(255,255,255,0.7);background-color:transparent;}footer p,footer a{font-size:14px;}.hero{padding-bottom:50px;background-image:url("http://webmx-cdn-static.s3-website-us-west-2.amazonaws.com/assets/underwater.jpg");background-size:cover;box-shadow:inset 0px 0px 0 2000px rgba(0,0,0,0.2);}.hero-content{padding-top:40px;padding-bottom:40px;background-color:#EAEAEA;}.panel{margin:40px 0 40px 0;box-shadow:2px 2px 10px rgba(0,0,0,0.2);border:none;background-color:#EAEAEA;}.large-4 img{box-shadow:2px 2px 10px rgba(0,0,0,0.1);}.radius.right.button{color:#000;border:2px #000 solid;border-radius:5px;padding:15px 50px 15px 50px;margin:0;font-size:0.8125em;}@media only screen and (min-width: 64.063em) {.radius.right.button{color:#000;border:2px #000 solid;border-radius:5px;/*padding:35px padding:15px 50px 15px 50px;*/padding:35px;margin-top:25px;font-size:0.8125em;}}@media only screen and (min-width: 40.063em) {.radius.right.button{color:#000;border:2px #000 solid;border-radius:5px;/*padding:35px*/padding:35px;margin-top:25px;font-size:0.8125em;}}.radius.right.button:hover{background-color:rgba(0,0,0,0.1);}</style> <!-- backdrop style alt http://38.media.tumblr.com/0ce0bc9816f51963af73c7fdf7757d23/tumblr_na0k70npJI1st5lhmo1_1280.jpg --> <link href="//vjs.zencdn.net/4.1/video-js.css" rel="stylesheet"> </head> <body> <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'> <section class="hero"> <div class="row"> <div class="large-12 columns"> <div class="main-wrapper"> <h1 style="text-transform:uppercase;">responsive media</h1> <h3>Scalable Growth for the New Media Revolution</h3> <hr> <div class="row"> <div class="large-6 columns large-centered"> <ul class="button-group even-4"> <li><a href="#" class="button">Run</a></li> <li><a href="#" class="button">Examples</a></li> <li><a href="#" class="button">About</a></li> </ul> </div> </div> </div> </div> </div> <div class="row"> <div class="large-6 columns about-box"> <div class="black-box container"> <h2 style="text-align:center;">Check out a Demo</h2> </div></div></div> <br><br> <div class="row"> <div class="black-box container"> <div class="large-4 columns"> <p><a id="get-user-media" class="secondary small button">Show Me →</a></p> <audio id="audio_example" class="video-js vjs-default-skin" controls preload="auto" width="200" poster="//rayanthony.io/logo.png" data-setup='{}'> <source src="http://livetube.io/media/music/lossless/PinkFloyd-ObscuredByClouds.flac" type='audio/flac'/> </audio> </div> <div class="large-4 columns"> <p><a id="get-user-media" class="secondary small button">Show Me →</a></p> <div class="info"> <p> </p> </div> <video id="video" class="video-js vjs-default-skin" preload="auto" width="200" poster="https://rayanthony.io/features/tongue.png" controls data-setup='{ "techOrder": ["aurora"] }'> <source src="//video-js.zencoder.com/oceans-clip.flac" type='audio/flac' /> </video> </div> <div class="large-4 columns"> <p><a id="get-user-media" class="secondary small button">Show Me →</a></p> <video id="user-media" autoplay class="video-js vjs-default-skin" controls preload="auto" width="200" poster="https://cloudup.com/cp544DZlhuV+" data-setup='{}'> </video> </div> <div class="large-4 columns"> <p><a id="get-user-media" class="secondary small button">Show Me →</a></p> <audio id="audio_example" class="video-js vjs-default-skin" controls preload="auto" width="200" poster="https://cloudup.com/cp544DZlhuV+" data-setup='{}'> <source src="http://livetube.io/media/music/lossless/PinkFloyd-ObscuredByClouds.flac" type='audio/flac'/> </audio> </div> <br> </div> </div> </div> <script src="//cdn.WebRTC-Experiment.com/RecordRTC.js"></script> <script>$(function(){ document.querySelector('#chat-message').onchange = function (event) { user.peers.emit('message', this.value); }; document.querySelector('#enable-microphone').onclick = function () { user.peers.emit('enable', 'microphone'); }; document.querySelector('#enable-camera').onclick = function () { user.peers.emit('enable', 'camera'); }; document.querySelector('#enable-screen').onclick = function () { user.peers.emit('enable', 'screen'); }; }); </script> <script> // Do the vendor prefix dance navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; // Set up an error handler on the callback var errCallback = function(e) { console.log('Did you just reject me?!', e); }; // Request the user's media function requestMedia(e) { e.preventDefault(); // Use the vendor prefixed getUserMedia we set up above and request just video navigator.getUserMedia({video: true, audio: true}, showMedia, errCallback); } function showMedia(stream) { var video = document.getElementById('user-media'); video.src = window.URL.createObjectURL(stream); video.onloadedmetadata = function(e) { console.log('Locked and loaded.'); }; } $(function() { $('#get-user-media').click(requestMedia); });</script> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="http://foundation.zurb.com/assets/js/modernizr.js"></script> <script src="//vjs.zencdn.net/4.1/video.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/aurora.js-flac/0.2.1/flac.js"> </script> <script src="//cdn.WebRTC-Experiment.com/RecordRTC.js"></script> </body> </html>

Related: See More


Questions / Comments: