Я пытаюсь наложить изображение на встраивание YouTube на создаваемый мной веб-сайт. Изображение специально представляет собой кнопку воспроизведения, которая становится оранжевой при наведении курсора. Это выглядит следующим образом: http://i.imgur.com/at9eqzv.png http://i.imgur.com/63Ruljw.png
К сожалению, я не понял, как это сделать. Я прочитал ту же проблему здесь, и в других местах: наложение непрозрачного div над youtube iframe
Однако это не сработало для меня вообще. Я даже тестировал это как в Firefox, так и в Chrome, и до сих пор не повезло. Пользовательская кнопка воспроизведения мгновенно мигает на экране, но затем быстро исчезает.
Это мой CSS:
.youtubeplayer
{
background-image: url('img/playbutton2.png') center no-repeat;
z-index:100;
}
И это мой HTML:
<iframe class="youtubeplayer" width="700" height="455" src="http://www.youtube.com/embed/ScfXNmDkvHo?wmode=opaque" frameborder="0" allowfullscreen></iframe>
Любая помощь приветствуется. :)
Нижеследующее должно дать вам достойную отправную точку, чтобы уточнить для ваших целей:
HTML
<div>
<iframe class="youtubeplayer" width="700" height="455" src="http://www.youtube.com/embed/ScfXNmDkvHo?wmode=opaque" frameborder="0" allowfullscreen></iframe>
</div>
CSS
div {
position:relative;
cursor:pointer;
width:700px;
}
div:before {
content:'';
position:absolute;
top:39%;
left:44%;
height:60px;
width:85px;
border-radius:10px;
border:1px solid #000;
text-align:center;
line-height:30px;
background:#3AA8FF;
transition:all 200ms ease-in;
}
div:after {
content:'';
position:absolute;
top:44.5%;
left:49%;
display:inline-block;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-left: 12px solid #fff;
border-bottom: 6px solid transparent;
}
div:hover:before {
background:orange;
}