0

I am using the Tubular jQuery plugin that plays YouTube videos as background and I am trying to mute the video in the background and by default the script should do that when looking at the script code but for some weird reason it doesn't.

Here's the code:

/* jQuery tubular plugin
|* by Sean McCambridge
|* http://www.seanmccambridge.com/tubular
|* Copyright 2012
|* licensed under the MIT License
|* Enjoy.
|* 
|* Thanks,
|* Sean */

// default params
var videoWidth = 853; // needed a default value -- this is overwritten almost immediately
var videoRatio = 16/9; // either 4/3 or 16/9 -- tweak as needed
var defaultDiv = 'wrapper';

jQuery.fn.tubular = function(videoId,wrapperId) {
    wrapperId = (typeof(wrapperId) == undefined) ? 'wrapper' : wrapperId;
    t = setTimeout("resizePlayer()",1000); // this is hacky, but i couldn't figure out why the yt player was behind

    jQuery('html,body').css('height','100%');
    jQuery('body').prepend('<div id="yt-container" style="overflow: hidden; position: fixed; z-index: 1;"><div id="ytapiplayer">You need Flash player 8+ and JavaScript enabled to view this video.</div></div><div id="video-cover" style="position: fixed; width: 100%; height: 100%; z-index: 2;"></div>');
    jQuery('#' + wrapperId).css({position: 'relative', 'z-index': 99});

    // initiailize vars
    var ytplayer = 0;
    var pageWidth = 0;
    var pageHeight = 0;
    var videoHeight = videoWidth / videoRatio;
    var duration;

    // iframe embedded yt player
    var iframe = '<iframe id="myytplayer" width="' + videoWidth + '" height="' + videoHeight + '" src="http://www.youtube.com/embed/' + videoId + '?autoplay=1&controls=0&modestbranding=1&showinfo=0&version=3&wmode=transparent&loop=1&playlist=' + videoId + '" frameborder="0" allowfullscreen></iframe>';

    /*

    // swfobject embed yt player
    var params = { allowScriptAccess: "always", wmode: "transparent" };
    var atts = { id: "myytplayer" };
    swfobject.embedSWF("http://www.youtube.com/v/" + videoId + "?enablejsapi=1&playerapiid=ytplayer&loop=1", "ytapiplayer", videoWidth, videoHeight, "8", null, null, params, atts);

    */

    jQuery('#ytapiplayer').html(iframe);

    jQuery(window).resize(function() {
        resizePlayer();
    });

    return this;
}

// player calls this function on ready
function onYouTubePlayerReady(playerId) {
    ytplayer = document.getElementById("myytplayer");
    ytplayer.setPlaybackQuality('medium');
    ytplayer.mute();
}

function resizePlayer() {
    var newWidth = jQuery(window).width(); // original page width
    var newHeight = jQuery(window).height(); // original page height
    jQuery('#yt-container, #video-cover').width(newWidth).height(newHeight);
    if (newHeight > newWidth / videoRatio) { // if window ratio becomes taller than video
        newWidth = newHeight * videoRatio; // overflow video to sides instead of bottom
    }
    jQuery('#myytplayer').width(newWidth).height(newWidth/videoRatio);
}

As you can see it waits until the Youtube player is ready and then will proceed with:

// player calls this function on ready
function onYouTubePlayerReady(playerId) {
    ytplayer = document.getElementById("myytplayer");
    ytplayer.setPlaybackQuality('medium');
    ytplayer.mute();
}

However it doesn't execute any of those functions when the video player is loaded and instead it will just start playing with the audio unmuted. How would I resolve this? Thank you.

John Slegers
  • 45,213
  • 22
  • 199
  • 169
user1632726
  • 13
  • 3
  • Because the iframed player does not support the API methods unless `&enablejsapi=1` is appended to the query string. Do that, and your code should work. – Rob W Sep 23 '12 at 13:28
  • Unfortunately, it didn't do the trick. It still is playing with audio unmuted. Thanks for the suggestion though. – user1632726 Sep 23 '12 at 14:52
  • Additionally, on the front page of tubular homepage, author states that `controls are broken until update`. You should get in touch if you need an ETA, or help to fix ! :) (EDIT: for example, modifying the plugin to use the new-and-better-supported iframe API) – Pandaiolo Sep 23 '12 at 14:53
  • @user1632726 I suggest to use [my `callPlayer` helper function](http://stackoverflow.com/questions/7443578/youtube-iframe-api-how-do-i-control-a-iframe-player-thats-already-in-the-html/7513356#7513356). Eg `callPlayer('myytplayer', 'setPlaybackQuality', 'medium');callPlayer('myytplayer', 'mute');`. – Rob W Sep 23 '12 at 15:09
  • Thank you! The callPlayer function worked! Is there perhaps a code that toggles between mute & unmute? I read something about player.isMuted():Boolean but I have no idea how to implant that. – user1632726 Sep 23 '12 at 15:58

0 Answers0