Solved

embedding youtube iframe in responsive site - not working on ipad

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

746 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

10 Experts available now in Live!

Get 1:1 Help Now