Solved

embedding youtube iframe in responsive site - not working on ipad

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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to create a textarea which saves text in HTML 8 44
CSS: How do I override in-line styling 11 24
parse url to form? 7 25
Are these icons a web font? 3 21
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
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.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

791 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