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

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
odf
Registered User
Posts: 162
Joined: Sun Jan 22, 2017 8:55 pm

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

Post by 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
User avatar
Lumpy Burgertushie
Registered User
Posts: 68467
Joined: Mon May 02, 2005 3:11 am
Contact:

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

Post by 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
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.3 Styles by PlanetStyles.net

If nobody is in the forest, does a tree really fall?
odf
Registered User
Posts: 162
Joined: Sun Jan 22, 2017 8:55 pm

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

Post by odf »

Lumpy Burgertushie wrote:
Wed Oct 28, 2020 8:04 am
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
User avatar
Lumpy Burgertushie
Registered User
Posts: 68467
Joined: Mon May 02, 2005 3:11 am
Contact:

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

Post by 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
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.3 Styles by PlanetStyles.net

If nobody is in the forest, does a tree really fall?
User avatar
thecoalman
Community Team Member
Community Team Member
Posts: 4259
Joined: Wed Dec 22, 2004 3:52 am
Location: Pennsylvania, U.S.A.
Contact:

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

Post by thecoalman »

odf wrote:
Tue Oct 27, 2020 7:51 pm
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.
“Results! Why, man, I have gotten a lot of results! I have found several thousand things that won’t work.”

Attributed - Thomas Edison
odf
Registered User
Posts: 162
Joined: Sun Jan 22, 2017 8:55 pm

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

Post by odf »

thecoalman wrote:
Thu Oct 29, 2020 7:39 am
odf wrote:
Tue Oct 27, 2020 7:51 pm
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.
Post Reply

Return to “[3.2.x] Styles Support & Discussion”