asked on

Responsive iFrame Height / Width (CSS)

Hello -

I'm reaching out for help hoping someone can help me - I have a video player that I'm embedding in a responsive template (see below), and I'm using CSS to determine the height / width of the player.

The width isn't an issue, but for some reason the height isn't working in iOS (working elsewhere) - I'm left with a large black box where the min-height attribute is kicking in:

http://www.newsbeam.tv/FV_DEMO/index.html

My goal is just to have the video fit neatly and be responsive with the rest of the document - any/all advice is appreciated!! Here's the CSS that's driving the video:

element.style {
width: auto;
height: 480px;
max-width: 854px;
max-height: 480px;
}

ASKER CERTIFIED SOLUTION

Peter Hart

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

RSPANGLER_AVTIA

ASKER

Thanks - appreciate the feedback!! I'm going to try suggestions 1 and 2 right now - will get right back to you. If they don't resolve it, I'll post the information for #3.

Thanks so much!!

RSPANGLER_AVTIA

ASKER

The solution was to go with a combination of the two - I think it's sort or browser sensitive. I had to keep going back and checking, but your advice got me there - thank you so much!! My advice to anyone else dealing with this is to basically carry out what is written above and see how that works for you - it should pretty much get you where you need to go. it's browser and content sensitive, so you'll want to test a lot.
Thx!

RSPANGLER_AVTIA

ASKER

Awesome answers - thank you for the feedback!!