Flyka,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.smiles {
display: none;
}
input{
background: #33CC00;
}
input:disabled{
background: #FF0000;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '200',
width: '370',
videoId: 'xwmDe0OhhPs',
events: {
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
$('.smiles')[event.data == YT.PlayerState.PLAYING ? 'show' : 'hide']()
$('.buttons_smiles').prop('disabled', event.data != YT.PlayerState.PLAYING);
}
</script>
</head>
<body>
<div id="player"></div>
<input name="" type="button" value="BUTTON" disabled="disabled" class="buttons_smiles">
<div class="smiles">
<img src="http://liubavyshka.ru/_ph/4/1/950678331.jpg" alt="">
<img src="http://liubavyshka.ru/_ph/4/1/47188246.jpg" alt="">
</div>
</body>
</html>