Instagramの埋め込みについて

Question

いつもお世話になっております。

Instagramの埋め込みを自社サイトのページにしようとしましたが、
高さが見切れてしまいます。
https://aoyama-garden.com/lp/staff/staffgarden_202301.html#staff_intro_box

他のサイトではしっかりコメント欄まで見えているのに、
何か調整をしないといけないのでしょうか？

埋め込みコードに「htigh:100%;」も入れてみたり、
高さを自動調節するスクリプトを入れてみましたが、
効果がありませんでした。

お手数ですが、ご教示お願い致します。

Answer

ECマスターズの土屋です。

事務局側でiframe内のコンテンツの高さを取得し、
自動調整するプログラムをくみました。

よろしければ現在のiframeタグを下記のソースに置き換え、
一度動作の確認の程お願いします。

また、scriptタグは直前に記載して頂ますようお願いします。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

    

    
        const insta = document.getElementsByClassName('instagram-media')[0];
        insta.contentWindow.addEventListener('DOMContentLoaded', function () {
            var height = insta.contentDocument.body.clientHeight;

            insta.style.height = height + 'px';
        });

Answer

タグの生成ありがとうございます。

ただ、iframeタグを入れているわけでなく、blockquoteタグになっています。
作っていただいたタグのみにしてみましたが、
自動調節されませんでした。

▼タグ長いですが、記載いたしますね。
        この投稿をInstagramで見る            青山ガーデン(@aoyama_garden)がシェアした投稿

Answer

ECマスターズの土屋です。

お世話になっております。
ECマスターズの土屋です。

HTMLをご共有いただき誠にありがとうございます。

確認させていただきました所,
「height: 100%;」の値を削除することで
表示されることがわかりました。

お手数をおかけしますが、今一度下記のソースコードで
動作の確認をしていただけますと幸いです。

こちらで正常な動作を確認できた場合、
昨日送らせて頂いたJavaScriptのソースは削除していただきますよう
お願いします。

どうぞよろしくお願いします。

=======================================================
    
         
                
                    
                    
                    
                        
                        
                        
                        
                    
                
                
                
                        
                            
                                
                                    
                                    
                                
                            
                        
                    
                
                    
                        この投稿をInstagramで見る
                
                
                
                    
                        
                        
                        
                        
                        
                        
                    
                    
                        
                        
                        
                        
                    
                    
                        
                        
                        
                        
                        
                        
                    
                
                
                    
                    
                    
                    
                
            
            
                青山ガーデン(@aoyama_garden)がシェアした投稿

Answer

ありがとうございます。

実際に検証してみましたが、やはり高さは調節してくれません。
cssで見てみると、
https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css
これにある「ifram　height:auto;」が原因なようです。

できれば上記のcssはそのままにしたいのですが、
どうにかできないでしょうか。

Answer

ECマスターズの土屋です。

お世話になっております。

>実際に検証してみましたが、やはり高さは調節してくれません。

こちらお手間をおかけし申し訳ございません。

お調べ致しました所、クロスドメイン(instagramの埋め込み等)の高さを自動調整するには
読み込み元の高さを調整する必要があり、今回の場合instagramの埋め込みですので
自動調節が出来ないことがわかりました。

代わりになってしまいますが、
にheight: 100vh;指定して頂く事で表示の縦幅の指定が可能です。
しかし、この方法ですとユーザーのデバイスによって表示の仕方が異なってきますので
CSSのでデバイス幅によってheightを変更する方法もございます。

合わせてご確認いただけますと幸いです。

【レスポンシブ対応するためのCSSの書き方】
https://www.site-convert.com/archives/1528

Answer

お世話になっております。

デベロッパーでみると、動的に埋め込まれたiframeにheightの単位が入っていますね。
これをcssのheightに入れる、といった動作は難しいでしょうか？###HR######IMG09cf48cf9f4b321a01e041387f16afb31.pngIMG0###

Answer

ECマスターズの土屋です。

お世話になっております。

>デベロッパーでみると、動的に埋め込まれたiframeにheightの単位が入っていますね。
>これをcssのheightに入れる、といった動作は難しいでしょうか？

こちらに関しまして、現在blockquoteタグで引用されておりますので
iframeタグを利用し、直接縦幅を指定する方法はいかがでしょうか。

〇〇の箇所は任意の高さの指定をお願いいたします。

どうぞよろしくお願いします。

(例)

Answer

手動で高さを設定するとデバイス毎に高さを合わせるのが難しいため、
残念ですが、しかたなく
https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css
このCSSを削除することにしました。
ありがとうございました。