CODEWITHSUNDEEP
javascripthtmlangularjs
Bill Noble
Bill Noble

Reputation: 6734

Make embedded iframe scale to fit enclosing div

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?

Upvotes: 1

Views: 4567

Answers (2)

Loku
Loku

Reputation: 38

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

Upvotes: 1

Rob
Rob

Reputation: 1860

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%;
}

Upvotes: 0

Related Questions