Skip to content

Instantly share code, notes, and snippets.

@HoundstoothSTL

HoundstoothSTL/Embed.js

Last active October 12, 2020 03:29
Show Gist options
  • Save HoundstoothSTL/5631366 to your computer and use it in GitHub Desktop.
Save HoundstoothSTL/5631366 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. HoundstoothSTL revised this gist May 22, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    <!-- usage in HTML -->

    <div id="testVideo2" data-video="58834399" data-js="embedTrigger">
    <img src="http://placehold.it/640x350"> <!-- Uses placeholder image -->
    <img src="http://placehold.it/640x400"> <!-- Uses placeholder image -->
    </div>
  2. HoundstoothSTL revised this gist May 22, 2013. 1 changed file with 5 additions and 0 deletions.
    5 changes: 5 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    <!-- usage in HTML -->

    <div id="testVideo2" data-video="58834399" data-js="embedTrigger">
    <img src="http://placehold.it/640x350"> <!-- Uses placeholder image -->
    </div>
  3. HoundstoothSTL created this gist May 22, 2013.
    45 changes: 45 additions & 0 deletions Embed.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,45 @@
    var Embed = {

    config : {
    elementId : 'embed',
    trigger: document.querySelectorAll('[data-js="embedTrigger"]'),
    videoId : 7100569,
    autoplay : true,
    vidWidth: 640,
    vidHeight: 400
    },

    trigger : function() {
    // Move trigger here if wanted
    },

    put : function(video) {
    var el = document.getElementById(this.config.elementId);

    el.innerHTML = unescape(video.html);
    },

    init : function(options) {
    if( typeof options === "object" ) {
    this.config = options;
    }

    var js = document.createElement('script'),
    callback = 'Embed.put',
    endpoint = 'http://www.vimeo.com/api/oembed.json',
    videoUrl = encodeURIComponent("http://www.vimeo.com/" + this.config.videoId),
    w = this.config.vidWidth,
    h = this.config.vidHeight,
    autoplay = this.config.autoplay,
    url = endpoint
    + '?url=' + videoUrl
    + '&width=' + w
    + '&autoplay=' + autoplay
    + '&callback=' + callback;

    js.setAttribute('type', 'text/javascript');
    js.setAttribute('src', url);
    js.setAttribute('async', true);
    document.getElementsByTagName('head').item(0).appendChild(js);
    }
    };
    17 changes: 17 additions & 0 deletions app.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    /* --- Just your general app file --*/
    (function(){
    var triggers = document.querySelectorAll('[data-js="embedTrigger"]');

    [].forEach.call( triggers, function(element) {
    element.addEventListener('click', function() {
    Embed.init({
    elementId: this.id,
    videoId : this.getAttribute('data-video'),
    autoplay : true,
    vidWidth: 640,
    vidHeight: 400
    });
    }, false);
    });

    }());