Solved

embedding youtube iframe in responsive site - not working on ipad

Posted on 2013-05-14
2
532 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Javascript Hashmap output 8 46
Set email body to html using vbscript 6 28
html input type 3 22
How can I convert HTML files to .pdf files? 9 30
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

867 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now