How to Make an Iframe Responsive Under phpBB 3.2.x?

[odf]

Hello Members,

There is a discussion here viewtopic.php?p=15061791 on how to make embeddable content with iframe responsive. As explained in the post I would like to know under which CSS/Sass file should the code more or less similar to this one

Code: Select all

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; 
}

/* Then fit the iframe in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

go in phpBB 3.2.x?

Appreciating your responses,

odf

[Lumpy Burgertushie]

I would think that you would actually have to edit the css for the content appearing inside the iframe.
you could make the iframe itself responsive in your own css but that would not control the content that is showing in the iframe.


robert

[odf]

I would think that you would actually have to edit the css for the content appearing inside the iframe.
you could make the iframe itself responsive in your own css but that would not control the content that is showing in the iframe.


robert

Thank you for the response, but I'm not certainly clear with your answer.

odf

[Lumpy Burgertushie]

seems I was wrong about not being able to control the iframe content's responsiveness.
'see here:
https://www.w3schools.com/howto/howto_c ... frames.asp

robert

[thecoalman]

There is a discussion here viewtopic.php?p=15061791 on how to make embeddable content with iframe responsive. As explained in the post I would like to know under which CSS/Sass file should the code more or less similar to this one go in phpBB 3.2.x?

As long as the classes .responsive-iframe and .container do not exist anywhere else in the stylesheet it doesn't really matter where you put it. To avoid conflicts you can prepend custom rules with unique identifier. e.g. if the class ".container" which is pretty common name for CSS already exists there won't be any conflict with unique name.

Code: Select all

.myindetifier-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; 
}

I do this with everything whether it's php variables, template variables or CSS rules. Not only does it avoid conflicts but it also makes them easily searchable.

[odf]

There is a discussion here viewtopic.php?p=15061791 on how to make embeddable content with iframe responsive. As explained in the post I would like to know under which CSS/Sass file should the code more or less similar to this one go in phpBB 3.2.x?

As long as the classes .responsive-iframe and .container do not exist anywhere else in the stylesheet it doesn't really matter where you put it. To avoid conflicts you can prepend custom rules with unique identifier. e.g. if the class ".container" which is pretty common name for CSS already exists there won't be any conflict with unique name.

Code: Select all

.myindetifier-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; 
}

I do this with everything whether it's php variables, template variables or CSS rules. Not only does it avoid conflicts but it also makes them easily searchable.

Thank you, works perfectly.