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

まえがき

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

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

方法

<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あります。これが原因ですね。

📄astro-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モデルに対しても使い回すことができます。

結果

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

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

デモ

<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>

中身はこれ

後日談

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