web

matterportをWebサイトに埋め込む方法

  • このエントリーをはてなブックマークに追加
pc_matteport

こんばんは。ヒロです。

今回はmatterportで撮影したものを、あなたのウェブサイトにキレイに埋め込む方法をお伝えします。

レスポンシブ対応のサイト

ウェブサイトの環境によるかと思いますが、一般的な <iframe>と<HTML>と<CSS>でサイズを調整する方法を書きます。

納品時に弊社から提出をするスプレッドシートからURLをご用意してください。

matterport 埋め込み1 matterport 埋め込み2

matterportですが、一般的な<iframe>の仕様と同じで、レスポンシブのサイトにそのまま入れようとしても縦と横幅が変わらないといった事が必ず起きます。

(縦幅をPC幅で設定してしまうとSPで見たときに縦が長くて比率がずれてしまうといったこと。)

よって、今回はCSSでiframeを調整し埋め込みを行う方法をお伝えします。

1.HTMLの書き方

matterport から 取得したコードを記述した部分をdiv=”move”で囲みます。

例: HTMLへの記載

<div class="move">

<iframe width="◯◯◯" height="◯◯◯" src="https://my.matterport.com/show/?m=◯◯◯" frameborder="0" allowfullscreen></iframe>

</div>

◯◯◯は弊社からの数字に置き換えてください(貴社独自のIDです)

例:弊社お客様の場合

<div class="move">
<iframe width="547" height="308" src="https://my.matterport.com/show/?m=jhzLmvHP5Fm" frameborder="0" allowfullscreen></iframe>
</div>

2-1,CSSをHTML内に直接書く方法

外部CSSを読み込んでいない場合や、CSSをいじくることができない場合は、直接HTML内にCSSを書くことも可能です。

<style type="text/css">
.move{
position:relative;
width:100%;
padding-top:56.25%;
}
.move iframe{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
}
</style>

2-2,CSSをstyle.css等に書く方法

.move{
position:relative;
width:100%;
padding-top:56.25%;
}
.move iframe{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
}

表示の例(PCとSP)

 

Youtubeやvimeoでは埋め込み時に埋め込みサイズを決める形になりますが、これは自分のサイト内で表示したいサイズをpxで指定してしまって大丈夫です。まずはPC上での見た目を指定して、その後CSSでレスポンシブ対応するという形になります。

WordPressのプラグインで埋め込む場合

こちらは後日、別途記事でまとめていきます。

でき次第コチラのページにリンクを張りますね。

 

もし、わからない点があればお気軽にコメントにお書きください(*^^*)

  • このエントリーをはてなブックマークに追加

コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください