• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 620
  • Last Modified:

embedding youtube iframe in responsive site - not working on ipad

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

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><!-- .span4 --></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?
1 Solution
Hello emmapap.
Although i dont have an ipad around can you try using the "min-width:" attribute ?

another way i am thinking of is to use the outerbox innerbox hack
    position:absolute;   /* to place it somewhere on the screen */
    top:130px;           /* free space at top */
    bottom:0px;}         /* makes it lock to the bottom */
    min-height:100%; !important /* browser fill */
    height:auto;}        /*content fill */


<div id="outerbox">
     <div id="innerbox"></div>

Open in new window

hope that helps. Please feedback
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.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now