Оберните DIV стилем вокруг встроенного видео на YouTube

Question

Я встроил три видео YouTube на страницу, но я обернул их DIV и классом, называемым «видеоплеер», но DIV и класс, кажется, игнорируются, потому что они не отображаются на странице .

Вы можете увидеть это здесь: http://72.4.166.89/en/tutorial.asp

Вот используемый CSS:

.videoplayer {
border: 1px solid #1D740C;
height: 384px;
width: 480px;
padding: 0px;
margin-left: 25px;
margin-bottom: 25px;

}

Я просмотрел большинство своих инструментов и не вижу, чтобы DIV или CLASS использовались вообще, но они есть. Кто-нибудь еще сталкивался с этим, или это не разрешено?

Answer 1

Вместо того, чтобы создавать div для окружения игрока и добавлять класс в div, почему бы просто не использовать встроенный класс проигрывателя youtube-player для применения вашего стиля:

.youtube-player{
    border: 1px solid #1D740C;
    height: 390px;
    width: 480px;
    padding: 0px;
    margin-left: 25px;
    margin-bottom: 25px;
}

Рабочий пример для jsfiddle: http://jsfiddle.net/Damien_at_SF/guSAC/1/

Это обходит необходимость иметь родительский div, а также проблему, которая у вас есть выше:)

надеюсь, что поможет:)

Answer 2

Div с классом "videoplayer" находится на вашей странице, но ничего не сделает экстраординарно, если вы не примените какую-либо информацию о стиле CSS. Если вы хотите см. div, добавить цвет фона или рамку и т. Д., Например.

div.videoplayer {
background:black;
border:2px solid red;
padding:10px;
}

... или что-то в этом роде.

Answer 3

Я обнаружил, что вам не хватает закрывающей вкладки для (как минимум) одного из ваших делителей

  <div class="videoplayer">
    <iframe title="YouTube video player" class="youtube-player" type="text/html" width="480" height="390" src="http://www.youtube.com/embed/icAFUlsysqg?rel=0" frameborder="0"></iframe>
  <b><!-- you see, there is no closing &lt/div> tag, so put it here --></b>
  <div class="videoplayer">
    <iframe title="YouTube video player" class="youtube-player" type="text/html" width="480" height="390" src="http://www.youtube.com/embed/WC0E9jHw1B8?rel=0" frameborder="0"></iframe>
  </div>
  <div class="videoplayer">
    <iframe title="YouTube video player" class="youtube-player" type="text/html" width="480" height="390" src="http://www.youtube.com/embed/ayJbo1-ReBc?rel=0" frameborder="0"></iframe>
  </div>

А также, вы должны определить CSS для этого класса:)

Answer 4

У вас есть div, вы просто не можете увидеть его в браузере без посторонней помощи.Какие инструменты вы использовали?Попробуйте firebug, мне понадобилось буквально 3 секунды, чтобы найти его с помощью функции поиска.

или это не разрешено?

Это определенно разрешено.Наличие тега объекта внутри div прекрасно.