Wrap a DIV with a style around an embedded YouTube video

I've embedded three YouTube videos onto a page, but I've wrapped them with a DIV and a CLASS called "videoplayer", but the DIV and the CLASS seem to be ignored because they don't display in the page.

You can see it here: http://72.4.166.89/en/tutorial.asp

Here's the CSS being used:

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

}

I've looked with most of my tools and I don't see the DIV or the CLASS having been used at all, but they are there. Has anyone else run into this开发者_运维技巧, or is this not allowed?

Instead of creating the div to surround the player and adding a class to the div, why not just use the built in class of the player youtube-player to apply your styling:

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

Working example on jsfiddle: http://jsfiddle.net/Damien_at_SF/guSAC/1/

This by-passes the need to have a parent div and also the problem that you have above :)

hope that helps :)

The div with class "videoplayer" is on your page but will not do anything extraordinary if you do not apply any css style information. If you want to see the div, add a background color or border etc. eg.

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

...or something to that effect.

You're div is there, you just can't see it in the browser without some help. What tools did you use? Try firebug, it took me literally 3 seconds to find it with the search feature.

or is this not allowed?

Its most definitely allowed. Having an object tag inside a div is perfectly fine.

I have found out you are missing closing tab for (at least) one of your divs

  <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>
  <!-- you see, there is no closing </div> tag, so put it here -->
  <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>

And also, you should define some CSS for this class :)