この中では、埋め込んだマーターポート3Dモデルの配置とサイズ変更をする方法を学習しましょう。
方法
3Dショーケースがウェブページ上の最初に表示される画面内に置かれるようにします。
一般的に、ページが読み込まれた直後に、インタラクティブな要素や、
3Dショーケースをできるだけ大きくすると、没入感が増すように思えるかもしれません。
1．デフォルトの高さがページの下部を超えないように注意します。
〇こうすることで、ユーザーはナビゲーション方法や、ワークショップ内の
ツールを実際に発見することができます（編集モードに切り替えた場合）。
2．ユーザーが埋め込まれた3Dショーケースを通過して、さらに下にスクロールできるように
しましょう。
〇3Dショーケースが、スクロール動作に干渉してしまう場合があるのでこれは重要な
ポイントです。次の点を意識して、ユーザーが埋め込まれた要素を通過できるように
しましょう。
3．埋め込むものの大きさを制限することで、それが一般的なブラウザーウィンドウよりも小さくなるようにします。
4．4．3Dショーケースの部分では、スクロール動作を無効にします。
〇このために&wh=0というパラメーターを追加します。
5．Lightboxを使用することで、3Dショーケースをウェブページ上に重ねます。
ｍy.matterport.comから埋め込みコードをコピーする場合には、
1．幅と高さの値を調整します。
〇最高のユーザー体験の実現するために、同じ比率を保つことをお勧めします。
〇（600／853）×480＝340画素
2．CSSを使用してサイズに多様性を持たせます。
ウェブサイトがレスポンシブな物であれば、3Dショーケースもレスポンシブな物にできます。次の指示にしたがってやってみましょう。
1．埋め込むものが＜div＞を完全に埋めるようにします。
2．＜div＞のアスペクト比を16:9に保ちます。
<html>
<head>
デスクトップブラウザーだけでなく、携帯機器（スマートフォン、タブレット）でも皆さんのウェブページが適切に見えて機能するかどうかを確認しましょう。
1．全てのプラットフォームにわたって、同じ埋め込みコードを使用します。
2．CSSと＠mediaクエリを使用して、埋め込んだ物の大きさを変更します。
〇これはウィンドウの大きさにしたがって異なります。
3．埋め込みコードの中に、「allowfullscreen」と「allow=’xr-spatial-tracking」を追加します。
〇これにより、ユーザーは画面を拡張してVRモードに入ることができます。下の例示的な
コードを参照して下さい。
<iframe id="showcase-player" width="853" height="480" src="http://my.matterport.com/show/?m=xxxxxxxxxx%22 frameborder="0" allowfullscreen></iframe>
自動再生（&play=1）を有効にする場合、フルスクリーンアイコンは次の理由から表示されない場合があります：
１．ショーケースのフルスクリーン機能は、ウェブシステムのフルスクリーンAPIに依存します。
２．フルスクリーンボタンは、デスクトップ機器やiPad、また特定のアンドロイド機器
３．iPhoneの場合は、iOSの制限のために、現時点ではフルスクリーン機能がサポートされていません。
４．クライアント側のjavascriptを用いてiFrameの大きさをコントロールできます。