Skip to content

Instantly share code, notes, and snippets.

View rymai's full-sized avatar
🙌
Working from home

Rémy Coutable rymai

🙌
Working from home
120 followers · 88 following
View GitHub Profile
@rymai
rymai / gist:1043231
Created June 23, 2011 18:39
SublimeVideo: Custom play button JavaScript code (Prototype)
sublimevideo.ready(function() {
$$("img.custom_play_button").each(function(img) {
img.on("click", function(event) {
event.stop();
// Hide the posterframe and prepare and play the video
sublimevideo.prepareAndPlay(img.readAttribute("id").replace(/^posterframe_/, ""));
img.hide();
}.bind(this));
}.bind(this));
});
@rymai
rymai / gist:1043003
Created June 23, 2011 17:07
SublimeVideo: Simple video tag
<video class="sublime" poster="posterframe.jpg" width="640" height="360" preload="none">
<source src="video.mp4" />
<source src="video.webm" />
<source src="video.ogv" />
</video>
@rymai
rymai / gist:1042916
Created June 23, 2011 16:27
SublimeVideo: Custom play button HTML markup
<img id="posterframe_video1" class="custom_play_button" src="posterframe.jpg" width="640" height="360" />
<video id="video1" style="display:none;" poster="posterframe.jpg" width="640" height="360" preload="none">
<source src="video.mp4" />
<source src="video.ogv" />
</video>
@rymai
rymai / gist:1042487
Created June 23, 2011 12:58
SublimeVideo: Interactive thumbnails CSS rules
#interactive .video_wrap {
width:640px;
height:360px;
display:none;
}
#interactive .video_wrap.active {
display:block;
}
#interactive li.active {
background:#000;
@rymai
rymai / gist:1042486
Created June 23, 2011 12:57
SublimeVideo: Interactive thumbnails HTML markup
<div id="interactive">
<div class="video_wrap">
<video id="video1" class="sublime" poster="posterframe1.jpg"
width="640" height="360" preload="none">
<source src="video1.mp4" />
<source src="video1.webm" />
<source src="video1.ogv" />
</video>
</div>
<div class="video_wrap">
@rymai
rymai / gist:1026646
Created June 15, 2011 07:32
SublimeVideo: HTTP/HTTPS Switcher
<script type="text/javascript">document.write(unescape("%3Cscript src='" + (("https:" == document.location.protocol) ? "https://4076.voxcdn.com" : "http://cdn.sublimevideo.net") + "/js/YOUR_TOKEN.js' type='text/javascript'%3E%3C/script%3E"));</script>
@rymai
rymai / gist:1014523
Created June 8, 2011 14:29
SublimeVideo: Google Analytics integration
<!-- Inside the <head> tag -->
<script type="text/javascript" src="http://cdn.sublimevideo.net/js/YOUR_TOKEN.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['sv._setAccount', 'UA-XXXXX-X']);
_gaq.push(['sv._trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
@rymai
rymai / awesomer.rb
Created June 2, 2011 00:29 — forked from pcreux/awesomer.rb
Convert markdown inline links to link definitions
# For https://github.com/guard/guard/blob/master/CHANGELOG.md
input, output, people = File.read('CHANGELOG.md'), "", {}
input.each_line do |line|
if found = line.match(/\[@(\w+)\]\(([\w:\/.]+)\)/)
user, url = found[1], found[2]
people[user] = url unless people.include?(user)
end
end
@rymai
rymai / gist:951305
Created May 2, 2011 08:30
SublimeVideo: Lightbox from a text link
<!-- Inside the <head> tag -->
<script type="text/javascript" src="http://cdn.sublimevideo.net/js/YOUR_TOKEN.js"></script>
<!-- Inside the <body> tag -->
<a class="sublime" href="video.mp4">
Click here to view the video
</a>
<video class="sublime zoom" poster="posterframe.jpg" width="800" height="336" preload="none" style="display:none">
<source src="video.mp4" />
<source src="video.ogv" />
@rymai
rymai / gist:948072
Created April 29, 2011 09:00
SublimeVideo: Magnifying glass on zoomable thumbnail
<!-- Inside the <head> tag -->
<script type="text/javascript" src="http://cdn.sublimevideo.net/js/YOUR_TOKEN.js"></script>
<style type="text/css" media="screen">
#zoomable a {
display:block;
width:180px;
height:76px;
background:#000;
position:relative;
-webkit-box-shadow:rgba(0,0,0,0.4) 0 4px 10px;