CODEWITHSUNDEEP
javascriptjqueryyoutubeappendsrc
Adam Bourg
Adam Bourg

Reputation: 59

Using jQuery to Append a YouTube Video embed?

I need to add add the "&rel=0" to the end of a end SRC tag from a YouTube embed code. Right where "xCODE NEEDS TO GO HEREx" is placed is where I need to place the &rel=0. Is there a way to do this using the Append function of jQuery? 

<embed src="http://www.youtube.com/v/S6I6Fc5mJeE&hl=en_US&fs=1xCODE NEEDS TO GO HEREx" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="284" height="171"></embed>

I need this functionality because we have several videos on our site and it's a pain to have to find the right database table and modify it to correct this.

Please help!

Adam

Upvotes: 0

Views: 2426

Answers (3)

Matt Ball
Matt Ball

Reputation: 359966

Is there any reason you can't do this with regular ol' jQuery?

$('embed[src^=http://www.youtube.com/]').attr('src', function (i, v)
{
    return v + '&rel=0';
});

Seems to work for me. http://jsfiddle.net/mattball/tt3AG/

Upvotes: 1

Neil Outler
Neil Outler

Reputation: 274

I would have done something like this untested jQuery statement:

$("embed[src]").attr("src", this.attr("src") + "&rel=0");

Upvotes: 0

Andrea Turri
Andrea Turri

Reputation: 6500

Try this:

 var __mainDiv;
 var __preLoaderHTML;
 var __opts;

 function __jQueryYouTubeChannelReceiveData(data) {

     var cnt = 0;

     $.each(data.feed.entry, function(i, e) {
         if (cnt < __opts.numberToDisplay) {
             var parts = e.id.$t.split('/');
             var videoId = parts[parts.length-1];
             var out = '<div class="video"><a href="' + 
                  e.link[0].href + '"><img src="http://i.ytimg.com/vi/' + 
                  videoId + '/2.jpg"/></a><br /><a href="' + 
                  e.link[0].href + '">' + e.title.$t + '</a><p>';
             if (!__opts.hideAuthor) {
                 out = out + 'Author: ' + e.author[0].name.$t + '';
             }
             out = out + '</p></div>';
             __mainDiv.append(out);
             cnt = cnt + 1;
         }
     });

    // Open in new tab?
    if (__opts.linksInNewWindow) {
        $(__mainDiv).find("li > a").attr("target", "_blank");
    }

    // Remove the preloader and show the content
    $(__preLoaderHTML).remove();
    __mainDiv.show();
}

(function($) {
    $.fn.youTubeChannel = function(options) {
        var videoDiv = $(this);

        $.fn.youTubeChannel.defaults = {
            userName: null,
            channel: "favorites", //options are favorites or uploads
            loadingText: "Loading...",
            numberToDisplay: 3,
            linksInNewWindow: true,
            hideAuthor: false
        }

        __opts = $.extend({}, $.fn.youTubeChannel.defaults, options);

        return this.each(function() {
            if (__opts.userName != null) {
                videoDiv.append("<div id=\"channel_div\"></div>");
                __mainDiv = $("#channel_div");
                __mainDiv.hide();

                __preLoaderHTML = $("<p class=\"loader\">" + 
                    __opts.loadingText + "</p>");
                videoDiv.append(__preLoaderHTML);

                // TODO: Error handling!
                $.ajax({
                    url: "http://gdata.youtube.com/feeds/base/users/" + 
                        __opts.userName + "/" + __opts.channel + "?alt=json",
                    cache: true,
                    dataType: 'jsonp',                    
                    success: __jQueryYouTubeChannelReceiveData
                });
            }
        });
    };
})(jQuery);

To use the YouTube plugin you just need to add a script reference to the jQuery library and the jquery.youtube.channel.js file. Then add a container to hold the rendered HTML, a line of JavaScript to wire everything up, and some CSS to format the output:

<script type=”text/javascript” src=”jquery.youtube.channel.js”></script>

<div id="youtubevideos"></div>

<script type="text/javascript">
$(document).ready(function() {
$('#youtubevideos').youTubeChannel({
userName: 'diggerdanh',
channel: "favorites",
hideAuthor: false,
numberToDisplay: 6,
linksInNewWindow: true
//other options
//loadingText: "Loading...",
});
});
</script>

Upvotes: 1

Related Questions