YouTube вставил видео z-index

Question

YouTube вставил видео z-index

0

Я включил видео YouTube на моем сайте здесь http://jdwebmanagement.com/draft/united_football/ с помощью этого кода:

<iframe width="664" height="390" src="https://www.youtube.com/v/JfYn1og9p-U?autoplay=1&version=3&loop=1&playlist=JfYn1og9p-U&rel=0" frameborder="0" allowfullscreen></iframe>

Проблема в том, что "Играть сейчас!" отображается под видео. Также на IE, когда вы нажимаете первую миниатюру карусели ниже, модальные дисплеи под видео.

James Deadman 17 апр. 2014, в 13:00

Источник

0

The problem is that the "Play Now!" button displays under the video. - Где вы хотите, чтобы это появилось?
reggaemahn 17 апр. 2014, в 10:30
0

Нужно, чтобы оно появилось поверх видео, как в Chrome и FF. Также модальное всплывающее окно для отображения поверх всего.
James Deadman 17 апр. 2014, в 10:32
0

"Играть сейчас!" отображается под видео в Chrome и FF тоже.
Klevis Miho 17 апр. 2014, в 10:35
0

stackoverflow.com/questions/9074365/… Возможно, это может решить вашу проблему.
Vladislav Stanic 17 апр. 2014, в 10:45
0

@JamesDeadman Кажется, работает нормально в IE10. Какую версию ты используешь? Кроме того, опубликуйте свой код для видео и кнопку, чтобы мы могли лучше помочь.
reggaemahn 17 апр. 2014, в 11:03

Показать ещё 3 комментария

Теги:

html

css

z-index

4 ответа

Ещё вопросы

The problem is that the "Play Now!" button displays under the video. - Где вы хотите, чтобы это появилось?
Нужно, чтобы оно появилось поверх видео, как в Chrome и FF. Также модальное всплывающее окно для отображения поверх всего.
"Играть сейчас!" отображается под видео в Chrome и FF тоже.
stackoverflow.com/questions/9074365/… Возможно, это может решить вашу проблему.
@JamesDeadman Кажется, работает нормально в IE10. Какую версию ты используешь? Кроме того, опубликуйте свой код для видео и кнопку, чтобы мы могли лучше помочь.

MichaelG · Answer 1 · 2014-04-17T10-06-00.000Z

Ваша "Играть сейчас!" кнопка делает именно то, что вы ему сказали. В вашем css вы сказали ".video-wrapper.play-now", чтобы выровнять по -40px со дна ближайшего относительно расположенного родителя, который является ".flex-video". Установите ".video-wrapper.play-now" на дно, которое имеет смысл, как 200px.

.video-wrapper .play-now {
      display: block;
      width: 254px;
      height: 115px;
      background: url(../images/play-now.png) no-repeat;
      position: absolute;
      bottom: -40px;
      left: 32%;
      z-index: 10;
}

Это нужно изменить на что-то вроде:

.video-wrapper .play-now {
      display: block;
      width: 254px;
      height: 115px;
      background: url(../images/play-now.png) no-repeat;
      position: absolute;
      bottom: 200px;
      left: 32%;
      z-index: 10;
}

Jeevan · Answer 2 · 2014-04-17T09-25-00.000Z

Вам нужно будет предоставить код для модальности, чтобы мы могли помочь вам лучше. По другой части вопроса, я полагаю, это то, что вы ищете. Измените его в соответствии с вашими потребностями:

HTML

<div id="container">
    <iframe width="664" height="390" src="https://www.youtube.com/v/JfYn1og9p-U?autoplay=1&version=3&loop=1&playlist=JfYn1og9p-U&rel=0" frameborder="0" allowfullscreen></iframe>
    <button id="play">Play Now</button>
</div>

CSS

#container{
    position: relative;
}

#play {
    width: 100px;
    height: 100px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -100px;
}

FIDDLE

Jamie · Answer 3 · 2014-04-17T09-04-00.000Z

Я предлагаю вам добавить еще один элемент, используя что-то вроде этого:

<iframe></iframe><!--Under this-->
<div>button</div>

И в css:

margin-top:-/*something*/px

и это может сработать.

alokkumarsharma · Answer 4 · 2014-04-17T08-27-00.000Z

вы можете добавить этот код в свой стиль.css

.video-wrapper .play-now 
{
margin-top: -150px;
}

пиксель зависит от того, где вы хотите поставить изображение. Надеюсь, это сработает для вас.