Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

<video src="http://testing.grappler.tk/files/2013/01/trailer_1080p.webm" width="320" height="240" controls="controls" preload="none"></video>
<video width="320" height="240" controls preload="metadata">
<source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.webm" type="video/webm">
<source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.mp4" type="video/mp4">
<source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.ogv" type="video/ogg">
</video>
video {
width: 100%;
max-width: 100%;
height: auto;
}
<?php
function support_custom_mimes( $mimes ){
$mimes['webm'] = 'video/webm';
return $mimes;
}
add_filter( 'upload_mimes', 'support_custom_mimes' );
<!-- "Video For Everybody" http://camendesign.com/code/video_for_everybody -->
<video controls="controls" poster="http://testing.grappler.tk/files/2013/01/trailer_1080p.jpg" width="960" height="540">
<source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.mp4" type="video/mp4" />
<source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.webm" type="video/webm" />
<source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.ogv" type="video/ogg" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.15.swf" width="960" height="540">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.15.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="config={'playlist':['http%3A%2F%2Ftesting.grappler.tk%2Ffiles%2F2013%2F01%2Ftrailer_1080p.jpg',{'url':'http%3A%2F%2Ftesting.grappler.tk%2Ffiles%2F2013%2F01%2Ftrailer_1080p.mp4','autoPlay':
<iframe src="http://fast.wistia.net/embed/iframe/3bfl0abrog?controlsVisibleOnLoad=true&version=v1&videoHeight=360&videoWidth=640&volumeControl=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" width="640" height="360"></iframe>
// activate mediaelementplayer
jQuery('video,audio').mediaelementplayer(/* Options */);
<video width="320" height="240" controls preload="metadata">
<source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.mp4" type="video/mp4">
<source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.webm" type="video/webm">
<source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.ogv" type="video/ogg">
<object width="320" height="240" type="application/x-shockwave-flash" data="http://grappler.tk/wp-content/themes/responsive-testing/mediaelement/flashmediaelement.swf">
<param name="movie" value="http://grappler.tk/wp-content/themes/responsive-testing/mediaelement/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=http://testing.grappler.tk/files/2013/01/trailer_1080p.mp4" />
</object>
</video>
<!DOCTYPE HTML>
<html>
<head>
<title>
JW Player Reponsive Video
</title>
<script type="text/javascript" src="//cdn.jsdelivr.net/jwplayer/5.10/jwplayer.js">
</script>
<style type="text/css">
html, body {
<iframe width="940px" height="540px" src="http://grappler.tk/wp-content/themes/responsive-testing/jwplayer-iframe.html" frameborder="0" allowfullscreen=""></iframe>