<div style="height: 250px; width: 940px; position:relative; overflow:hidden; left:50%; margin-left:-470px">
<div id="bg" style="background-image: url(http://www.lifo.gr/files/images/Giant_940x250.png); height: 250px; width: 940px; cursor: pointer; z-index: 1; position:absolute">
</div>
<div id="video" style="background-color: #000; left: 527px; position: absolute; top: -56px; z-index: 0;"></div>
</div>

<script src="https://www.youtube.com/iframe_api"></script>
<script type="text/javascript">

var player;

function onYouTubeIframeAPIReady() {
player = new YT.Player('video', {
width: '433px',
height: '350px',
videoId: 'tpMSmVYKGuY',
playerVars: {'controls': 0, 'modestbranding': 0, 'showinfo': 0, 'start':0, 'loop':true, 'rel':0 },
events: {'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange,},
});

function onPlayerReady(event) {player.playVideo();

event.target.setVolume(0);
player.setPlaybackQuality("small");
var soundOn = document.getElementById("bg");
soundOn.addEventListener("mouseover", function() {
event.target.setVolume(80);
});
soundOn.addEventListener("mouseout", function() {
event.target.setVolume(0);
});

}

function onPlayerStateChange(event) {

if (event.data == YT.PlayerState.ENDED) {
player.playVideo();
player.setPlaybackQuality("small");
event.target.seekTo(0);}}

}
</script>