Do you want us to help you to create a jingle for you

Check out this new nursery rhyme of kid friendly entertainment.

You’re invited to start mining Bitcoin today. Register Here



iPad apps for 6-8 years old kids : This is my latest iPad project called Oh Mommy - Musical Storybook.


Thursday, June 20, 2013

How to make your video respond to your screen width manually

Today I've just solved my problem which is making my video respond to the screen width. Below is the solution. You can apply this technique in any CMS utilizing custom advanced  HTML.

CSS:
.video-wrap {
position:relative;
padding-bottom: 55%;
padding-top: 30px;
height: 0;
overflow:hidden;
}

.video-wrap iframe{
position:absolute;
top:0;
width:100%;
height:100%;
}

//You can limit the width of the video using width and max-width.

.video-outer-wrap {
width: 700px;  //assign a fixed width value
max-width:100%; //assign a  max-width:100%.
}

BODY:


div class="video-outer-wrap"
      div class="video-wrap"
                          iframe here      
      div --close bracket
div  --close bracket



This technique work on all modern browsers. This method is called Intrinsic Ratios for Videos, created by Thierry Koblentz.

No comments:

Singing Book for Kids

Singing Book for Kids
ipad apps for kids

My Artwork for SALE!