Indiana Porter Indiana Porter - 3 months ago 17
Javascript Question

youtube player api auto mute on start

So basically I have this button to mute a youtube video, a video embedded through the youtube player api btw. I want it to start muted though. I can't seem to get that happening, can anyone see the problem?

this is my java

var player,
time_update_interval = 0;

function onYouTubeIframeAPIReady() {
player = new YT.Player('video-placeholder', {
videoId: 'sAhYEfQ1168',
playerVars: {
'autoplay': 1,
'controls': 0,
'autohide': 1,
'wmode': 'opaque',
'showinfo': 0,
'loop': 1,
'mute': 1
},
events: {
onReady: initialize
}
});
}

function initialize(){

// Update the controls on load
updateTimerDisplay();

// Clear any old interval.
clearInterval(time_update_interval);

// Start interval to update elapsed time display and
// the elapsed part of the progress bar every second.
time_update_interval = setInterval(function () {
updateTimerDisplay();
}, 1000);


$('#volume-input').val(Math.round(player.getVolume()));
}





$('#mute-toggle').on('click', function() {
var mute_toggle = $(this);

if(player.isMuted()){
player.unMute();
mute_toggle.text('volume_up');
}
else{
player.mute();
mute_toggle.text('volume_off');
}
});


if you need the html just in case here it is

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Terrence Hunt</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="cover">



<div id="carousel-example-generic" class="carousel slide" data-interval="false" data-ride="carousel">




<ol class="carousel-indicators carousel-indicators-numbers">
<li data-target="#carousel-example-generic" data-slide-to="0">Portfolio</li>
<li data-target="#carousel-example-generic" data-slide-to="1" class="active">Reel</li>
<li data-target="#carousel-example-generic" data-slide-to="2">Contact</li>
</ol>



<div class="carousel-inner">



<div class="item">
<div class="fill" style="background-image:url('nyc-8.jpg');"></div>
<div class="carousel-caption container-fluid">
<h1>Portfolio</h1>
<p>This is my demo reel.</p>
</div>
</div>


<div class="item active">

<div class="item active">
<div class="fill" style="background-image:url('nyc-jpg');"></div>
<div class="carousel-caption">
<div class="blackbar1">
<h1>Terrence Hunt</h1>
<p>Editor / Producer</p>
<i id="mute-toggle" class="material-icons">volume_off</i>
</div>
<div class="element-2 embed-responsive embed-responsive-16by9">
<div id="video-placeholder"></div>

</div>
<div class="blackbar2"></div>

</div>

</div>

</div>


<div class="item">
<div class="fill" style="background-image:url('nyc-9.jpg');"></div>
<div class="carousel-caption">
<h1 style="margin:100px auto;">Contact</h1>





<form name="sentMessage" id="contactForm" novalidate>
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<input type="text" class="form-control form" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input type="email" class="form-control form" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<textarea class="form-control form" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
<div class="clearfix"></div>
<div class="col-lg-12 text-center">
<div id="success"></div>
<button type="submit" class="btn btn-xl form form-button">Send</button>
</div>
</div>
</form>





</div>
</div>
</div>




</div>



</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="jqBootstrapValidation.js"></script>
<script src="contact_me.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="js/script.js"></script>

</body>
</html>

Answer
function onYouTubeIframeAPIReady() {
    player = new YT.Player('video-placeholder', {
        videoId: 'sAhYEfQ1168',
        playerVars: {
            'autoplay': 1,
            'controls': 0,
            'autohide': 1,
            'wmode': 'opaque',
            'showinfo': 0,
            'loop': 1,
            'rel':0
        },
        events: {
           'onReady': onPlayerReady
        }
    });

}

function onPlayerReady(event) {
    event.target.playVideo();
    player.mute();
}