• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

Making an Iframe html code respond to window size ..

New Here ,
Jan 29, 2018 Jan 29, 2018

Copy link to clipboard

Copied

I have a multi breakpoints on the site (960, 1200, 1400) and I have certain sites display in an Iframe on a button click on the site using:

<iframe id="videowindow" name="videowindow" width="1280" height="465" src="https://www.cointelegraph.com" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

this displays fine on breakpoint 1400 with the scrollbar for the site inside the site, but on smaller breakpoints it doesn't shrink, this is probably because I have size : in the HTML, how do I make it so that on different breakpoints the site displayed in the Iframe will match the size of the box I set around it / put it in or fit the main site?

Can anyone help with how?

Thanks

Views

360

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Guide , Jan 30, 2018 Jan 30, 2018

I did not understand why in your code video attributes are used .

The correct code for your case:

<iframe width="100%" height="465" src="https://www.cointelegraph.com" frameborder="0"></iframe>

With this code, you can stretch the width of the iframe inside the Muse as you need.

Votes

Translate

Translate
LEGEND ,
Jan 30, 2018 Jan 30, 2018

Copy link to clipboard

Copied

You answered your own question: Leave out the fixed sizes. That's assuming of course the code of the video provider is in itself responsive. If it isn't, you would need to dial in individual values for each breakpoint or find otehr ways to scale the video e.g. by nesting it in other constructs.

Mylenium

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Jan 30, 2018 Jan 30, 2018

Copy link to clipboard

Copied

LATEST

I did not understand why in your code video attributes are used .

The correct code for your case:

<iframe width="100%" height="465" src="https://www.cointelegraph.com" frameborder="0"></iframe>

With this code, you can stretch the width of the iframe inside the Muse as you need.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines