Solved

embedding youtube iframe in responsive site - not working on ipad

Posted on 2013-05-14
2
536 Views
Last Modified: 2013-07-11
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><!-- .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?
0
Comment
Question by:emmapap
2 Comments
 
LVL 13

Accepted Solution

by:
stergium earned 500 total points
ID: 39164816
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
body,html{
height:100%;}
#outerbox{
    width:100%;
    position:absolute;   /* to place it somewhere on the screen */
    top:130px;           /* free space at top */
    bottom:0px;}         /* makes it lock to the bottom */
#innerbox{
    width:100%;
    position:absolute;              
    min-height:100%; !important /* browser fill */
    height:auto;}        /*content fill */

HTML--------------

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

Open in new window

hope that helps. Please feedback
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39165227
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&
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question