asked on

embedding youtube iframe in responsive site - not working on ipad

hi
I am trying to embed a youtube iframe in a responsive site by using css. I have used twitter bootstrap css.

the code is working fine on a pc and mobile but on a tablet the video is not resizing properly - it is showing as a small video in the quarter of the space
this is the page
http://www.neujuice.com/redfernweb/test2.html

I have wrapped the video in div class
<div class="row-fluid">
<div class="span8"><div class="flex-video widescreen">
<iframe src="https://www.youtube-nocookie.com/embed/..." frameborder="0" allowfullscreen="" ></iframe>
</div></div>

and referred to this class in my general.css as

.flex-video {
position: relative;
padding-top: 25px;
padding-bottom: 67.5%;
height: 0;
margin-bottom: 16px;
overflow: hidden;
}
.flex-video.widescreen { padding-bottom: 57.25%; }
.flex-video.vimeo { padding-top: 0; }
.flex-video iframe,
.flex-video object,
.flex-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
.flex-video { padding-top: 0; }
}

any ideas on how I can get it to fill 100% of the space as opposed to 25% on an ipad?

ASKER CERTIFIED SOLUTION

stergium

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

COBOLdinosaur

Try setting the width to 100vw instead of 100%
that should cover the whole width of the viewport

for height use vh instead of percetage... 1vh is equal to 1% of the viewport height.

May or may not work depending on the browser being run in the device; but that is the way it will be getting done over time as manufacturers implement the spec for vw and vh.

Cd&