YouTube embedded player in reddit.com comments

embed-youtube-player-in-reddit-comments.md

This script dynamically embeds YouTube players into reddit comments wherever a comment references a YouTube video URL. It is a prototype of functionality I would like to see added to RES.

In Chrome:

• Download the Personalized Web extension
• Create a new rule:
  • Rule name: YouTube embedded in reddit comments
  • Match URLs: ^http://.+reddit.+\/
  • In 'Add HTML', paste the contents of script.js in this gist
  • Click Save button.
• Re/load a Reddit page which has YouTube links in the comments. You should see a button next to these links which reveals an embedded YouTube player when clicked.

script.js

<script>
(function() {
if (!window.jQuery) return;

// get all youtube.com/watch?v= <a> elements
var youtubeLinks = $('.comment a').filter(function(i, e) {
    return e.href.match(/https?:\/\/.+?youtube.+?\/watch.*[\&\?]v=/);
});

youtubeLinks.each(function(i, e) {
    var $e = $(e);
    var $expando = $('<a>', {
        class: 'toggleImage expando-button collapsed video commentImg',
        style: 'display: inline-block; vertical-align: top !important; margin-right: 6px; cursor: pointer; padding: 0px; max-width: 23px; max-height: 23px; width: 23px; height: 23px; float: none; margin-left: 4px'
    }).html('&nbsp;').click(onClickYoutubeExpando);
    $e.after($expando);
});

function onClickYoutubeExpando(evt, ui) {
    var $this = $(this);

    if ($this.hasClass('expanded')) {
        $this.nextAll('div.expandoYoutubeVideo:first').remove();
        $this.removeClass('expanded').addClass('collapsed');
        return false;
    }

    var $link = $this.prevAll('a:first');

    if ($link.length == 0) {
        console.log('Could not find matching <a> link for video expando button');
        return false;
    }

    var href = $link.attr('href');
    var parts = href.match(/watch.*?[?&]v=(.+?)(\#t=(.+s))?$/);

    if (!parts || parts.length < 2 || !parts[1]) {
        console.log('Could not parse youtube url from <a> href associated with video expando button');
        return false;
    }

    var videoId = parts[1];
    var timecode = parts[3];
    var start = 0;

    if (timecode) {
        var timeparts = timecode.match(/^((\d+)m)?((\d+)s)?$/);
        if (timeparts) {
            start = (60 * parseInt(timeparts[2] || 0) + parseInt(timeparts[4] || 0)) || 0;
        }
    }

    var embedUrl = 'https://www.youtube.com/embed/' + videoId + '?fs=1&feature=oembed&autoplay=1&start=' + start;

    var $iframe = $('<iframe>', {
        src: embedUrl,
        class: 'media-embed',
        width: 610,
        height: 348,
        border: 0,
        frameborder: 0,
        scrolling: 'no',
        allowfullscreen: true
    });

    var $div = $('<div>', { class: 'expandoYoutubeVideo' });

    $div.append($iframe);
    $this.after($div);

    $this.removeClass('collapsed').addClass('expanded');

    return false;
}

})();
</script>