<div class="player"> <div class="mediaplayer"> <video poster="http://corrupt-system.de/assets/media/caminandes/caminandes.jpg" controls="" preload="none"> <source src="http://corrupt-system.de/assets/media/caminandes/caminandes.m4v" type="video/mp4" /> <source src="http://corrupt-system.de/assets/media/caminandes/caminandes.webm" type="video/webm" /> </video> <h2 class="title">Caminandes: Gran Dillama</h2> <ul class="share-buttons"> <li> <div class="fb-share-button" data-href="http://afarkas.github.io/webshim/demos/index.html" data-type="button"></div> </li> <li> <div class="g-plusone" data-annotation="none" data-href="http://afarkas.github.io/webshim/demos/index.html"></div> </li> <li> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://afarkas.github.io/webshim/demos/index.html" data-count="none">Tweet</a> </li> </ul> </div> </div> <p>This example adds a social box and a title overlays to a mediaelement</p> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&appId=127610198929&version=v2.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> <script> window.___gcfg = {lang: 'de'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script>
.mediaplayer .title { position: absolute; top: 10px; left: 10px; padding: 3px 3px 1px; background: rgba(0, 0, 0, 0.6); color: #fff; transition: all 400ms; opacity: 0; visibility: hidden; } .mediaplayer ul.share-buttons { position: absolute; top: 5px; right: 5px; margin: 0; padding: 3px 3px 1px; background: rgba(0, 0, 0, 0.6); color: #fff; transition: all 400ms; opacity: 0; visibility: hidden; list-style: none; z-index: 9; } .mediaplayer ul.share-buttons li { margin: 2px 0; padding: 2px; } .mediaplayer[data-state="idle"] .title, .mediaplayer[data-useractivity="true"] .share-buttons, .mediaplayer[data-state="idle"] .share-buttons:hover { visibility: visible; opacity: 1; } .player { margin: auto; padding: 10px; width: 95%; max-width: 900px; min-width: 320px; font-family: sans-serif; } .mediaplayer { position: relative; height: 0; width: 100%; padding-bottom: 56.25%; /* 16/9 */ } .mediaplayer video, .mediaplayer .polyfill-video { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
webshim.setOptions('mediaelement', { replaceUI: 'auto' }); webshim.polyfill('mediaelement');