I am playing a video YouTube on html background as you see in this page http://khayalshop.net/video.a5w
Everything works fine expect the sound is not working when the video plays on background What am missing ? Is it possible to run the sound while the video plays or not ?
Here is the code written on page
<!DOCTYPE html>
<html>
<head>
<meta name="generator" content="Alpha Anywhere HTML Editor Version 12
Build 2089-4283">
<!-- must use in order to make XP Themes render -->
<meta HTTP-EQUIV="MSThemeCompatible" content="Yes" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style>
<!--
#player {width: 100%; height: 100%; position: fixed; z-index: -99;}
#myid {background: rgba(0,0,0,.1); width: 100%; height: 100%; position:
fixed; z-index: 1;}
iframe .html5-video-player .html5-watermark {display: none !important;}
-->
</style>
<script>
<!--
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
playerVars: {
'autoplay': 1,
'controls': 0,
'autohide': 1,
'wmode': 'opaque',
'showinfo': 0,
'loop': 1,
'mute': 1,
'modestbranding': 1,
//'start': 15,
//'end': 110,
'playlist': 'zbB_ghXp5L0'
},
videoId: 'zbB_ghXp5L0',
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
event.target.mute();
$('#text').fadeIn(400);
//why this? Well, if you want to overlay text on top of your video,
you
//will have to fade it in once your video has loaded in order for
this
//to work in Safari, or your will get an origin error.
}
//this pauses the video when it's out of view, just wrap your video in
.m-//video
$(window).scroll(function() {
var hT = $('.m-video').height(),
wS = $(this).scrollTop();
if (wS > hT) {
player.pauseVideo();
}
else {
player.playVideo();
}
});
-->
</script>
<title></title>
</head>
<body>
<script src="https://www.youtube.com/player_api"></script>
<div id="myid"></div>
<div id="player"></div>
</body>
</html>
Try:
'mute': 1
OR:
Search how increase volume after the video is player programatically (i.e. player.playVideo();).