-
-
Save freelancedaddytv/82da4333fd48eaf800c91204166d562d to your computer and use it in GitHub Desktop.
Responsive Youtube with External Toggle Mute and UnMute Sound
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> | |
<style> | |
.videoWrapper { | |
position: relative; | |
padding-bottom: 56.25%; /* 16:9 */ | |
padding-top: 25px; | |
height: 0; | |
} | |
.videoWrapper iframe { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
} | |
button#mute-video { | |
color: #fff; | |
background-color: #b6412e; | |
font-size: 24px; | |
margin: 30px auto -50px auto; | |
display: block; | |
} | |
</style> | |
<div class="videoWrapper"> | |
<div id="player"></div> | |
</div> | |
<button id="mute-video">TOGGLE SOUND</button> | |
<script> | |
var tag = document.createElement('script'); | |
tag.src = "http://www.youtube.com/player_api"; | |
var firstScriptTag = document.getElementsByTagName('script')[0]; | |
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); | |
var player; | |
function onYouTubePlayerAPIReady() { | |
player = new YT.Player('player', { | |
height: '315', | |
width: '560', | |
playerVars: { 'autoplay': 1, 'controls': 1,'autohide':1,'wmode':'opaque' }, | |
videoId: 'PASTE_YOUR_YOUTUBE_VIDEO_ID_HERE', | |
height: '100%', | |
width: '100%', | |
events: { | |
'onReady': onPlayerReady} | |
}); | |
} | |
function onPlayerReady(event) { | |
event.target.mute(); | |
} | |
function toggleSound() { | |
if (player.isMuted()) { | |
player.unMute() | |
} else { | |
player.mute() | |
} | |
} | |
$('#mute-video').on('click', function(){ | |
toggleSound(); | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi bro
i also need the same behaviour. did u find any solution for this ?