StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to mute and autoplay youtube channel player with java script?
text
Body
copied!<p>Hi this is my first time asking a question online. I want to embed a youtube channel player into my wordpress website. I am using the code from <a href="http://code.google.com/p/jq-youtube-player/" rel="nofollow">http://code.google.com/p/jq-youtube-player/</a> . So i want this player to autoplay on load and the audio to be mute. I am only able to set autoplay to on but can't figure out how to mute the audio. I am trying stuff on <a href="http://jsfiddle.net/NmvA9/490/" rel="nofollow">http://jsfiddle.net/NmvA9/490/</a> but i am a total beginner in java script so need help.</p> <p>the code is like this</p> <pre><code>(function() { function createPlayer(jqe, video, options) { var ifr = $('iframe', jqe); if (ifr.length === 0) { ifr = $('<iframe scrolling="no">'); ifr.addClass('player'); } var src = 'http://www.youtube.com/embed/' + video.id + '?enablejsapi=1'; if (options.playopts) { src += '?'; for (var k in options.playopts) { src+= k + '=' + options.playopts[k] + '&'; } src += '_a=b'; } ifr.attr('src', src); jqe.append(ifr); } function createCarousel(jqe, videos, options) { var car = $('div.carousel', jqe); if (car.length === 0) { car = $('<div>'); car.addClass('carousel'); jqe.append(car); } $.each(videos, function(i,video) { options.thumbnail(car, video, options); }); } function createThumbnail(jqe, video, options) { var imgurl = video.thumbnails[0].url; var img = $('img[src="' + imgurl + '"]'); if (img.length !== 0) return; img = $('<img>'); img.addClass('thumbnail'); jqe.append(img); img.attr('src', imgurl); img.attr('title', video.title); img.click(function() { options.player(options.maindiv, video, $.extend(true,{},options,{playopts:{autoplay:1}})); }); } var defoptions = { autoplay: false, user: null, carousel: createCarousel, player: createPlayer, thumbnail: createThumbnail, loaded: function() {}, playopts: { autoplay: 0, egm: 1, autohide: 1, fs: 1, showinfo: 0 } }; player.mute():Void $.fn.extend({ youTubeChannel: function(options) { var md = $(this); md.addClass('youtube'); md.addClass('youtube-channel'); var allopts = $.extend(true, {}, defoptions, options); allopts.maindiv = md; $.getJSON('http://gdata.youtube.com/feeds/users/' + allopts.user + '/uploads?alt=json-in-script&format=5&callback=?', null, function(data) { var feed = data.feed; var videos = []; $.each(feed.entry, function(i, entry) { var video = { title: entry.title.$t, id: entry.id.$t.match('[^/]*$'), thumbnails: entry.media$group.media$thumbnail }; videos.push(video); }); allopts.allvideos = videos; allopts.carousel(md, videos, allopts); allopts.player(md, videos[0], allopts); allopts.loaded(videos, allopts); }); } }); })(); $(function() { $('#player').youTubeChannel({user:'youtube'}); }); </code></pre> <p>here if set autoplay to '1' in this code </p> <pre><code>var defoptions = { autoplay: false, user: null, carousel: createCarousel, player: createPlayer, thumbnail: createThumbnail, loaded: function() {}, playopts: { autoplay: 0, egm: 1, autohide: 1, fs: 1, showinfo: 0 } }; </code></pre> <p>its autoplays the video but adding a 'muted' value doesn't seem to work. I think i need to mute it some other way but can't figure out how...so please help thanks</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload