External Video Embed Generator

by Roberto Apasajja

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css">
<script src="/* http://yui.yahooapis.com/2.6.0/build/fonts/fonts-min.css "></script>
<link rel="stylesheet" href="http://yui.yahooapis.com/2.6.0/build/base/base-min.css">
<h2>Embed Video Code Retriever</h2>
<p id="error"></p>
<h3>Samples:</h3>
<ul class="samples">
    <li><a href="http://www.youtube.com/watch?v=1-wEBmLht5g">Wake Up</a> on Youtube</li>
    <li><a href="http://www.dailymotion.com/video/xbtuky_1999-2009-remi-gaillard_fun">RĂ©mi Gaillard</a> sur DailyMotion</li>
    <li><a href="http://vimeo.com/9856705">Nokta</a> sur Vimeo</li>
</ul>
<form action="." method="post" class="fetchEmbedCode">
    <fieldset>
        <legend>Video</legend>
        <p>
            <label for="videoUrl">Video page url</label>
            <input id="videoUrl" type="text" value="http://" />
            <label for="videoWidth">Width</label>
            <input id="videoWidth" type="text" value="400" size="3" />
            <label for="videoHeight">Height</label>
            <input id="videoHeight" type="text" value="300" size="3" />
        </p>
        <p>
            <input type="submit" value="Generate embed code" />
        </p>
    </fieldset>
    <fieldset>
        <legend>Preview</legend>
        <div id="embedPreview">
            <p>Preview video</p>
        </div>
    </fieldset>
    <fieldset>
        <legend>Result</legend>
        <p>
            <label for="embedCode">Embed code</label>
            <textarea id="embedCode"></textarea>
        </p>
    </fieldset>
</form>

CSS

/*General styles*/
body{font-family:"trebuchet ms",sans-serif;font-size:90%;padding:0 10px;}
form{background-color:#FAFAFA;padding:10px;}
fieldset{border:1px solid #ccc;padding:0 20px;margin-bottom:10px;clear: left;}
legend{color:#a0522d;font-weight:bold
padding:0 5px;}
label{margin-top:20px;display:block;}
label.inline{display:inline}
input{border:1px solid #ccc;padding:2px;}
input[type=text]{width:100%;}
input[type=radio]{margin-right:50px;background-color:transparent;border:none;}
    textarea{border:1px solid #ccc;width:100%;min-height:150px;font-family: monospace;}
/*Specific styles*/
#error{color:red;display:none;}

JavaScript

/**
 * External Video Services Embedded Code Generator.
 *
 * Currently supports Dailymotion, Vimeo and YouTube services, more to come
 *
 * @author Nicolas Perriault <nperriault at gmail dot com>
 */
var EmbedVideoGenerator = function(url) {
    this.url = url;
    
    this.defaults = {
      width: 400,
      height: 300,
      previewWidth: 320,
      previewHeight: 200
    };
    
    this.services = {
      dailymotion: {
        pattern: /^((http:\/\/)?(www\.)?dailymotion\.com\/video\/)([a-z0-9]+)(_(.*)?)$/,
        replace: 'http://www.dailymotion.com/swf/$4'
      },
      vimeo: {
        pattern: /^((http:\/\/)?(www\.)?vimeo\.com\/)(\d+)(.*)?$/,
        replace: 'http://vimeo.com/moogaloop.swf?clip_id=$4&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1'
      },
      youtube: {
        pattern: /^((http:\/\/)?(www\.)?youtube\.com\/watch\?v=)([a-zA-Z0-9-]+)(.*)?$/,
        replace: 'http://www.youtube.com/v/$4&amp;fs=1'
      }
    };
    
    this.debug = function(o) {
      try {
        console.log(o);
      } catch (e) {
      }
    };
    
    this.parse = function() {
        for (var serviceName in this.services) {
            var service = this.services[serviceName];
            var movieUrl = this.url.replace(service.pattern, service.replace);
            if (this.url != movieUrl) {
                return movieUrl;
            }
        }
        throw 'Could not parse url ' + this.url;
    };
    
    this.getEmbedCode = function(width, height) {
        var movieUrl = this.parse();
        
        width  = width  ? width  : this.defaults.width;
        height = height ? height : this.defaults.height;
        
        return '<object width="' + width + '" height="' + height + '">'
        + "\n" + '  <param name="allowfullscreen" value="true" />'
        + "\n" + '  <param name="allowscriptaccess" value="always" />'
        + "\n" + '  <param name="movie" value="' + movieUrl + '" />'
   ...