How to set caption for youtube videos box in css?


Tags: html,css

Problem :

I have created youtube videos after click an image.

Now i need to show caption at the bottom of image.

Here, what i tried: http://jsfiddle.net/4t22181q/

I can't able to set caption with exact css property.

Can anyone please help me?

My page look like this: http://s9.postimg.org/5hhx5rgvj/Untitled_1.png Thanks in advance.

Html:

 <div class="youtubeV">
    <div class="guideBox">
       <div class="videoThum"> <a href="javascript:;"  rel="http://www.youtube.com/embed/GNb8T5NBdQg?list=PL6B08BAA57B5C7810" class="youTubeVideo" ><img src="img/play-1.jpg"/></a></div>
    </div>
    <div class="caption">Saina nehwal first match</div>
 </div>

css:

.caption {
    caption-side: bottom;
    display:block;
}


Solution :

If I understood correctly what you are trying to achieve you just have to

in your .guideBox:

  • remove float:left - to have caption below image
  • add width:XXX% - (optional).

EDIT:

create a div to wrap these 3 items and display it as table like

 .table {
    display: table;
    table-layout: fixed;
    width: 100%;
}

create property display:table-cell to your class .youtubeV like this:

.youtubeV {
    display: table-cell;
}

add a margin-left:22px or whatever you want to your class .caption

remove width:240px from your class .guideBox .videoThum a

DEMO


    CSS Howto..

    How to use not css selector with * in stylesheet

    how to i target a another div with jquery or css

    How to make tabs with html and css

    How to start off on a tab built in javascript/html instead of it being blank and having to click on one

    How to apply focus css for all drop downs?

    How can I align an image with css

    How to check if the current page is a plugin admin panel in wordpress

    how to place elements inside divs horizontally

    How do you make it so the navbar is transparent then changes color using bootstrap 3. (Affix)

    How do I add an attribute to a specific CSS class?

    How to shorten this placeholder-transitioning CSS selector using sass/compass?

    How do I hide the borders around checkboxes in an ASP.Net CheckBoxList control with jQuery?

    Showing play button and time on each image

    css: how to make circles connected by lines responsive with bootstrap?

    How to convert 6 digit color code to 3 digit quickly in css file?

    How to put padding on SPAN only when not empty

    How to position tables in ie 9 using css?

    How to override CSS? [closed]

    how can I create overlay div to fit the rest of the screen

    How to Inject external css style sheet into GWT Panel widget?

    How to inspect CSS element using chrome?

    Css tool, to calculate how many (in bytes) inline css in html

    How to horizontally center text in bootstrap button?

    How to make selected file name visible?

    how to give style to the selected option in html

    How to prevent (bootstrap) fixed top navigation from zooming on mobile

    How to add background video stop button

    How to center variable length submit buttons?

    How to line up images horizontally and center with css when using a premade javascript magnifying glass?

    How to make a grid layout with unknown number of columns and each column has equal size? [closed]