Skip to content

Instantly share code, notes, and snippets.

View gerbenvandijk's full-sized avatar

Gerben van Dijk gerbenvandijk

  • Tech Lead Frontend @ Foodticket
  • Amsterdam, The Netherlands
View GitHub Profile
gerbenvandijk / hrt.js
Last active August 29, 2015 14:14
- When title is not visible anymore, then show the title in the top bar. - Show a reading time indicator.
// Function to convert to human readable time
function millisecondsToStr(milliseconds) {
function numberEnding (number) {
return (number > 1) ? 's left' : ' left';
var temp = Math.floor(milliseconds / 1000);
gerbenvandijk / z-index-mixin.less
Last active December 13, 2019 07:03
Z-index mixin for LESS
@z-index-order: 'contact', 'lightbox', 'nav';
.zindex(@elementName) {
.loop(@elementName, @counter) when (@counter > 0) {
.loop(@elementName, @counter - 1);
.pickIndex(@elementName, @counter);
gerbenvandijk / html5video-subtitles.html
Created June 27, 2014 14:37
HTML5 video subtitles
<track kind="subtitles" label="English subtitles" src="subtitles_en.vtt" srclang="en" default></track>
<track kind="subtitles" label="Nederlandse ondertitels" src="subtitles_nl.vtt" srclang="nl"></track>
gerbenvandijk / mediafragment.html
Created June 27, 2014 14:18
HTML5 video media fragment
<source src=",20" type="video/webm" />
<!-- Set's the media fragment to play the video from 10 to 20 seconds. -->
gerbenvandijk / html5video-basic-sources.html
Created June 27, 2014 13:37
Basic HTML5 video implementation including sources
<video width="1920" height="1080" poster="" autoplay loop preload muted>
<source src="" type="video/mp4" />
<source src="" type="video/webm" />
<source src="" type="video/ogg" />
gerbenvandijk / html5video-basic.html
Created June 27, 2014 13:03
Basic HTML5 video implementation
<video width="1920" height="1080" src="" poster="" autoplay loop preload muted></video>
The above element behaves like this:
- Sets the width and height of the video element to 1920x1080 (can be overridden by CSS or even JS).
- Sets the source of the video to the URL of the video file.
- Sets a poster image to show before the video plays.
- Makes the video play automatically as soon as possible.
gerbenvandijk / .htaccess
Created June 27, 2014 11:09
Mime Types for HTML5 video
AddType video/mp4 f4v f4p m4v mp4
AddType video/ogg ogv
AddType video/webm webm
gerbenvandijk / dynamicvideo.js
Last active July 18, 2019 06:01
Dynamically loading a HTML5 video element with JavaScript
function loadVid(){
var videourl = 'urltoyourvideo here'; // set the url to your video file here
var videocontainer = '#videocontainer'; // set the ID of the container that you want to insert the video in
var parameter = new Date().getMilliseconds(); // generate variable based on current date/time
var video = '<video width="1102" height="720" id="intro-video" autoplay loop src="' + videourl + '?t=' + parameter + '"></video>'; // setup the video element
$(videocontainer).append(video); // insert the video element into its container
gerbenvandijk / playHTMLvideo.js
Last active August 29, 2015 14:02
Initiate play event on click
// jQuery version - we use the .on() function to make sure we can also run the function on dynamically inserted elements.
$(document).on("click", "a.playbtn", function (e) {
var video = $(document).find('#intro-video')[0]; // Find the video element to play; // play the video, simple innit?
gerbenvandijk / retinaimg.html
Created December 9, 2013 09:49
Simple retina <img>
<img src="myimage.jpg" data-2x="myimage-2x.jpg">