Facebook 页面插件 - 响应式

Question

I need to embed a Facebook Page Plugin on a website. According to the info on

https://developers.facebook.com/docs/plugins/page-plugin

it can be any width between 180px and 500px

On large screen I want 500px width, but on smaller it would need to something around 300px.

Now, there is an option which makes the iframe adjust to the width of the container, but that part of it doesn't work for me at all.

So, what I have is two iframes (one for 500px width, one for 300px), and using @media queries, I hide/show the correct one.

However, it still loads two iframes.

Is there an equivalent <picture> / <video> tag I could use, which would load only one, depending on screen-width?

Alternatively, what I am doing wrong with the iframe ?

Below is the code replicated in jsfiddle:

https://jsfiddle.net/nuy4r1gk/2/ <-- 2 iframes

As you can see, it works, but it's loading two iframes, which is far from good. If I use css styling ( @media ) on the iframe, it just cuts it off, rather that loading narrower.

https://jsfiddle.net/nuy4r1gk/4/ <-- 1 iframe with css

Answer 1

I found a working solution when using the iFrame embed method. It works with any container width between the supported 180-500px

https://stackoverflow.com/a/52459262/10401291