Наложение изображения на YouTube для вставки

0

Я пытаюсь наложить изображение на встраивание 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>

Любая помощь приветствуется. :)

  • 0
    Если вы используете фильмы Vimeo, вы можете установить цвета ...
Теги:
youtube
overlay

1 ответ

4
Лучший ответ

Нижеследующее должно дать вам достойную отправную точку, чтобы уточнить для ваших целей:

Демо-скрипт

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;
}
  • 1
    Так же, как включенный бит, OP не нужно использовать изображение, чтобы получить то, что они хотят: jsfiddle.net/gC82G
  • 0
    Странно, я попробовал это в JSfiddle, и это не сработало ... должно быть, что-то пропустил.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню