iT邦幫忙

0

iframe instagram 高度如何自動? via summernote

  • 分享至 

  • xImage

事由
我有用一個編輯器叫做 summernote (我試過一些編輯器,作法似乎都是這樣)
當我直接填入IG的連結時:https://www.instagram.com/p/Bn43FsqjIC1/?taken-by=instagram
他會產生這樣的程式碼:

<iframe frameborder="0" src="https://instagram.com/p/Bn43FsqjIC1/embed/" width="100%" height="672" scrolling="no" allowtransparency="true" class="note-video-clip">
// ...
</iframe>

直接帶入貼文的 ID 然後透過 IG 的 API 顯示。

只是我發現當被嵌入的內容的圖片或影片高度不一致時,此時 iframe 所設定的 height 因為已經固定,就無法完整呈現該IG貼文。

無論把它改成 auto or 100% 等等,他都無法完整呈現貼文,都會被切邊,又或者是當圖片很小時,下面就會有一大片空白,無法得知嵌入內容的高度!

目前編輯器的做法是:不使用IG提供的嵌入語法,僅透過絕對網址來抓ID並產生 iframe 並透過IG的 Embedding API來顯示貼文內容。

問題
我要如何解決這個問題?能用 iframe 也能順利嵌入、自適應高度、貼文不會被切掉,完美契合。

補充
我有去 IG 開發者查詢:https://www.instagram.com/developer/embedding/#media_redirect
我發現他寫的好像是只有叫你選擇 「嵌入」,會得到一串他的專屬語法,貼上去時的顯示才是沒有問題的。但透過 iframe 他好像就沒有教學或說明了。

資源
範例網址:https://www.instagram.com/p/Bn43FsqjIC1/?taken-by=instagram
IG開發者:https://www.instagram.com/developer/embedding/#media_redirect

larrykkk iT邦新手 5 級 ‧ 2018-09-20 11:37:36 檢舉
也許你可以試試看css的overflow屬性
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答