Make embedded iframe scale to fit enclosing div

Question

I need to make the iframe embed code for a vine fit in the size of the enclosing div. Is there a way to do this? The embed code is supplied from a database and already has sizing information as follows:

<iframe src="https://vine.co/v/iMJzrThFhDL/embed/simple" width="600" height="600" frameborder="0"></iframe><script src="https://platform.vine.co/static/scripts/embed.js"></script>

The embed code gets inserted at run time using Angular 2 code to be the innerHTML of a div as follows:

<div [innerHTML]="data.embed" style="width:300px;max-width:300px;"></div>

The embedded vine gets cropped but not scaled. Is there a way to force it to be scaled to fit?

Try CSS 100% and removing the attributes for width and height — PitaJ, Apr 08 '16 at 19:33
See: http://stackoverflow.com/questions/18765762/how-to-make-width-and-height-of-iframe-same-as-its-parent-div — Juan Lago, Apr 08 '16 at 19:36
Is there a way to do it without editing the iframe embed code? — Bill Noble, Apr 08 '16 at 19:44

Loku · Accepted Answer · 2016-04-08T20:23:46.897

1

The embed link you provided determines the width, but that can be overridden by CSS, so you can take it or leave it.

You can either set your iframe to the specific dimensions, <iframe width="300" height="300" src="//vine.co/v/iMJzrThFhDL/embed/simple"></iframe> or use CSS to give it width AND height of 100%, and make certain that the container dimensions are directly proportional. Since Vines are square, you want both to be identical.

jsFiddle in action

edited Apr 08 '16 at 20:23

answered Apr 08 '16 at 20:16

Loku

38
6

1

Thanks Loku. Is there a way to make the Vine image the full width of the view screen and not have the wide black margin either side? – Bill Noble Apr 09 '16 at 15:14
Oof. I’m stumped, there. You could use media breakpoints, to set up specific dimensions for mobile, tablet, desktop, and 4k, but I don’t know offhand how to make it scale 100% and keep the cropping uniform. Otherwise, this might require a Javascript solution, if you absolutely need it to scale uniformly across seamless screen dimensions. – Loku Apr 11 '16 at 19:05
UPDATE: I came across this script on http://embedresponsively.com/ that does what you are wanting, I think. [See it in the jsFiddle.](https://jsfiddle.net/hk1hj4yz/3/) – Loku Apr 11 '16 at 20:39
I have tried that. It works fine on a website but not on an ionic iOS app. – Bill Noble Apr 11 '16 at 20:48

score 0 · Answer 2 · answered Apr 08 '16 at 19:34

0

I've had luck with this simple CSS:

Example: https://jsfiddle.net/021ja2sf/

.iframe-video { 
   position: relative;
   padding-bottom: 56.25%;
   padding-top: 0px; overflow: hidden;
   margin-top:40px;
}

.iframe-video iframe { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

answered Apr 08 '16 at 19:34

Rob

1,840
2
12
19

Is there a way to do it without editing the iframe embed code? – Bill Noble Apr 08 '16 at 19:45
1

Editing the iframe embedded code? Not sure what you mean. – Rob Apr 08 '16 at 19:48
2

You don’t need to change anything about the iframe code – width and height specified via CSS take precedence over the HTML attributes. – CBroe Apr 08 '16 at 20:27
Your code works great thanks. Is there a way to get rid of the black either side of the image so the image is full width? – Bill Noble Apr 09 '16 at 15:11

Make embedded iframe scale to fit enclosing div

2 Answers2