0

I have an iframe which includes a video stream from a site and src attribute includes it's size:

<iframe src="http://xxxxxxx.com/accounts/xxxxxx/events/xxxxxx/player?width=320&height=180 frameborder="0" scrolling="no"> </iframe>

I would like to scale it up as the viewport gets bigger (say 320px width for mobile and 960px for desktop), but when I give it a size via CSS the content doesn't scale up to the whole iframe, since the size within the link is wrong.

Any ideas guys

elemelas
  • 143
  • 1
  • 2
  • 9
  • There are multiple ways to do it. Refer to this. http://stackoverflow.com/questions/838137/jquery-change-height-based-on-browser-size-resize http://stackoverflow.com/questions/16937070/iframe-size-with-css-on-ios Check the fiddle as well. – pratikpawar Jan 25 '16 at 20:46
  • Thanks but how can I change the size within the link (not only the iframe itself which is just a container for content)? – elemelas Jan 25 '16 at 20:55
  • try this http://stackoverflow.com/questions/11382473/resize-external-website-content-to-fit-iframe-width – pratikpawar Jan 25 '16 at 20:59

1 Answers1

-1

A CSS media query would be your easy solution. You will have to take the time to apply it to all devices. You could just apply it to all iFrames, but I would recommend defining a class:

.myFrame {
    width: 960px
}
@media screen and (max-width: 480px) {
    .myFrame {
        width: 320px
    }
}

<iframe class="myFrame" src="www.iframecontent.com/content"></iframe>

A more advanced solution would be to use a javascript tool like pym.js

http://blog.apps.npr.org/pym.js/

Dani
  • 1,220
  • 7
  • 22