Site icon image Site cover image

Fusion360の埋め込みをレスポンシブ対応にする

投稿日：2023/07/18
更新日：2023/07/23
CAD HTML･CSS
Featured image of the post
目次
まえがき 方法 旧バージョン 新バージョン 結果 デモ 後日談

まえがき

📄Arrow icon of a page linkastro-notion-blogでコードブロックからHTML要素を挿入する

この記事ではFusion360のデザインビューアを埋め込みたいコードとして挙げ、デモ用に配置していました。

このコードはコピペで使う用として公式に出力されたものをそのまま使っていたのですが、コンテンツ幅がデカいとGoogle Search Consoleに怒られたのでレスポンシブに対応させることにしました。

Image in a image block

方法

<iframe
  src="https://myhub.autodesk360.com/ue2af766a/shares/public/SH56a43QTfd62c1cd968793ce3017c05306f?mode=embed"
  width="800"
  height="600"
  allowfullscreen="true"
  webkitallowfullscreen="true"
  mozallowfullscreen="true"
  frameborder="0">
</iframe>
元はこれ

見やすいように改行入れました。

幅が800pxあります。これが原因ですね。

📄Arrow icon of a page linkastro-notion-blogのYouTube埋め込みの縦横比を16:9にする

この記事⬆のときのレスポンシブ用HTMLを参考にして書き換えます。 

<div style="position: relative; padding-bottom: 56.25%;">
  <iframe 
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
    src="https://www.youtube.com/embed/[YouTubeの動画ID]" 
    frameborder="0" 
    allow="autoplay; encrypted-media" 
    allowfullscreen>
  </iframe>
</div>
YouTubeをレスポンシブ対応で埋め込むHTML
ℹ️
2023/07/23追記
YouTube埋め込みのときのCSSプロパティをaspect-retioに変更したため、こちらも合わせて使用するプロパティを変更しました。

旧バージョン

縦横比は今回4:3にするので、padding-bottomは3÷4で75%にします。残りは上手いことキメラ化です。 

<div style="position: relative; padding-bottom: 75%;">
  <iframe
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    src="生成されたURL部分?mode=embed"
    allowfullscreen="true"
    webkitallowfullscreen="true"
    mozallowfullscreen="true"
    frameborder="0">
  </iframe>
</div>
完成したHTML

新バージョン

縦横比は今回4:3にするので、aspect-retioの設定は、aspect-ratio: 4 / 3;となります。横幅のみ100%と指定し、他はaspect-retioに従ってもらいます。 

<div style="width: 100%; aspect-ratio: 4 / 3;">
  <iframe
    style="width: 100%; height: 100%;"
    src="生成されたURL部分?mode=embed"
    allowfullscreen="true"
    webkitallowfullscreen="true"
    mozallowfullscreen="true"
    frameborder="0">
  </iframe>
</div>
完成したHTML

これで他の3Dモデルに対しても使い回すことができます。

結果

レスポンシブ対応になりました。

縦横比を保っているので机の見え方が変化しないのが面白いです。

Image in a image block

デモ

<div style="width: 100%; aspect-ratio: 4 / 3;">
  <iframe
    style="width: 100%; height: 100%;"
    src="https://myhub.autodesk360.com/ue2af766a/shares/public/SH56a43QTfd62c1cd968793ce3017c05306f?mode=embed"
    allowfullscreen="true"
    webkitallowfullscreen="true"
    mozallowfullscreen="true"
    frameborder="0">
  </iframe>
</div>
中身はこれ

後日談

Image in a image block

認めてもらえたようです。

CAD HTML･CSS