Cocoonを積んだWordpressにスクリプトを正しく実装したい

前提・実現したいこと

非エンジニア、HTML・CSSがかろうじて読めるレベルの初心者です。
Cocoonを積んだWordpressにおいて、ドラッグで回転する画像を実装しようとしています。
下記のスクリプト、
js-cloudimage-360-view / GitHub
を用いてデスクトップ、モバイルともに表示したい赤いソファの画像を作成時、問題が発生しました。ある程度模索していましたが、行き詰ってしまったので知恵をお借りしたいです。
浅学ゆえ言葉足らず感が否めませんが、どなたかよろしくお願いいたします。

作成テストページ
上から
js-cloudimage-360-viewのテスト（実装したい赤いソファ）
js-cloudimage-360-viewのデモ
を設置してあります。
コンテンツ幅は790px、画像は800×800pxです。

問題点

・Wordpressのプレビュー時やサーバー管理者権限のあるChromeブラウザだと表示されるが、公開するとデスクトップ、モバイルともに表示されない。（DEMOは表示される）

・ウインドウ幅を狭めると、高さはそのままに画像が潰れてしまう（触ると直る）

・デスクトップ表示の際に画像の拡大表示をすると、閉じるボタンの×が表示されない。（デスクトップ表示だとDEMOも表示されないが、モバイル表示だと表示される）

試したこと

・Chromeでサーバー内を閲覧編集していたが、IE/Edge/Firefoxでは画像を確認できず、サーバー管理者権限の無いPCからChromeで閲覧しても表示されなかった。
・CSSでheight:auto; width:100%;を設定しても画像が潰れる。
・画像のピクセル数を変更したり、コンテンツ幅を600px、1080pxと上下させても×ボタンは表示されなかった。

該当のソースコード

コードエディター

<!-- wp:paragraph -->
<p>testです</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>下記、js-cloudimage-360-viewを使用したsofaのテスト</p>
<!-- /wp:paragraph -->

<div class="cloudimage-360" data-folder="http://pomnit.wp.xdomain.jp/wp-content/uploads/2021/07/" data-filename="sofa_{index}.jpg?v1" data-amount="36" data-full-screen="">　　</div>

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>下記、js-cloudimage-360-viewを使用したchair(DEMO)</p>
<!-- /wp:paragraph -->

<div class="cloudimage-360" data-folder="https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/demo/chair-360-36/" data-filename="chair_{index}.jpg?v1" data-amount="36" data-magnifier="3" data-full-screen=""></div>
<div class="image-wrap"></div>
<p><!--
  Powered by Scaleflex team. All rights reserved.
  JS Cloudimage 360 View is provided under the MIT License
--></p>

カスタムjavascript

window.addEventListener('load', function() {
  var el = document.createElement("script");
  el.src = "https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2.6.0/js-cloudimage-360-view.min.js";
  document.body.appendChild(el);
});

補足情報（FW/ツールのバージョンなど）

Xfreeの無料サーバーを使用。
Cocoonを使用、スキンはイノセンスです。

使用しているプラグインは、
Akismet Anti-Spam (アンチスパム)
Contact Form 7
EWWW Image Optimizer
Jetpack by WordPress.com
Media Library Categories
Real Media Library (Free)
Regenerate Thumbnails
Wordfence Security
WP Multibyte Patch
XML Sitemaps

追記

下記が検証ツールを使用してそれぞれのHTMLを検証した際の差異部分です。
正常に動作しているDEMOは文節が１つ多いようです。
【テストに存在しないテキスト】

<div style="position: absolute; top: 35px; right: 5px; width: 25px; height: 25px; z-index: 101; cursor: pointer; background: url(&quot;https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/loupe.svg&quot;) 50% 50% / cover no-repeat;"></div>

◆cloudimage-360より下層部分

DEMO

<div class="cloudimage-360 initialized" data-folder="https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/demo/chair-360-36/" data-filename="chair_{index}.jpg?v1" data-amount="36" data-magnifier="3" data-full-screen="" draggable="false" style="position: relative; width: 100%; cursor: grab;">
  <div class="cloudimage-inner-box"><canvas width="802" style="width: 802px; font-size: 0px; height: 802px;" height="802"></canvas>
    <div style="position: absolute; inset: 0px; width: 100px; height: 100px; margin: auto; background: url(&quot;https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/360_view.svg&quot;) 50% 50% / contain no-repeat rgba(255, 255, 255, 0.8); border-radius: 50%; box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 4px; transition: all 0.5s ease 0s; color: rgb(80, 80, 80); text-align: center; line-height: 100px; z-index: 2;"></div>
    <div style="position: absolute; top: 35px; right: 5px; width: 25px; height: 25px; z-index: 101; cursor: pointer; background: url(&quot;https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/loupe.svg&quot;) 50% 50% / cover no-repeat;"></div>
    <div style="position: absolute; top: 5px; right: 5px; width: 25px; height: 25px; z-index: 101; cursor: pointer; background: url(&quot;https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/full_screen.svg&quot;) 50% 50% / cover no-repeat;"></div>
  </div>
</div>

テストページ

<div class="cloudimage-360 initialized" data-folder="https://pomnit.wp.xdomain.jp/wp-content/uploads/2021/07/" data-filename="sofa_{index}.jpg?v1" data-amount="36" data-full-screen="" draggable="false" style="position: relative; width: 100%; cursor: grab;">
  <div class="cloudimage-inner-box"><canvas width="802" style="width: 802px; font-size: 0px; height: 802px;" height="802"></canvas>
    <div style="position: absolute; inset: 0px; width: 100px; height: 100px; margin: auto; background: url(&quot;https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/360_view.svg&quot;) 50% 50% / contain no-repeat rgba(255, 255, 255, 0.8); border-radius: 50%; box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 4px; transition: all 0.5s ease 0s; color: rgb(80, 80, 80); text-align: center; line-height: 100px; z-index: 2;"></div>
    <div style="position: absolute; top: 5px; right: 5px; width: 25px; height: 25px; z-index: 101; cursor: pointer; background: url(&quot;https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/full_screen.svg&quot;) 50% 50% / cover no-repeat;"></div>
  </div>
</div>

行動規範の内容に同意します

回答1件

ベストアンサー

ご提示いただいたコードは

html
1<div class="cloudimage-360" data-folder="http://pomnit.wp.xdomain.jp/wp-content/uploads/2021/07/" data-filename="sofa_{index}.jpg?v1" data-amount="36" data-full-screen="">　　</div>

となっていますが、
ご提示いただいた「作成テストページ」のソースでは、

html
1<div class="cloudimage-360" data-folder="https://pomnit.wp.xdomain.jp/wp-content/uploads/2021/07/" data-filename="sofa_{index}.jpg?v1" data-amount="36" data-full-screen="">　　</div>