adds common oembed dimension solution

asset/js/height_calculator.js

@@ -1,4 +0,0 @@
-function get_height(container, ratio) {
-  var height = $(container).width() / ratio
-  return height
-}

asset/js/media_dimensions.js

@@ -0,0 +1,16 @@
+
+function adjust_sketchfab_height() {
+	$(".embeded-sketchfab-wrapper").each(function() {
+		var iframe = $(this).find('iframe')
+    var height = $(iframe).width() / $(iframe).attr('ratio')
+		$(iframe).prop("height", height)
+	});
+}
+
+jQuery(document).ready(function() {
+	adjust_sketchfab_height();
+});
+
+$(window).resize(function() {
+  adjust_sketchfab_height();
+});

src/Site/BlockLayout/Sketchfab.php

@@ -8,8 +8,8 @@ use Omeka\Site\BlockLayout\AbstractBlockLayout;
 use Laminas\View\Renderer\PhpRenderer;
 
 use Laminas\Form\FormElementManager;
-
 use Sketchfab\Form\SketchfabBlockForm;
+use DOMDocument;
 
 class Sketchfab extends AbstractBlockLayout
 {
@@ -69,26 +69,38 @@ class Sketchfab extends AbstractBlockLayout
           if (!$attachments) {
               return '';
   		}
-
-    $thumbnails = [];
-		static $id = 0;
-    $id = $id +1;
-
       $media = $attachments[0]->item()->media()[0];
-    $media = $attachments[0]->item()->media()[0];
-    $sketchfab_width = $media->mediaData()['width'];
-    $sketchfab_height = $media->mediaData()['height'];
-    $ratio = $sketchfab_width / $sketchfab_height;
+      $ratio = $media->mediaData()['width'] / $media->mediaData()['height'];
+
+      // creates an iframe injecting our width and calculated ratio
+      $attribs= 'ratio="'.$ratio.'"'.PHP_EOL;
+      $doc = new DOMDocument();
+      $doc->loadHTML($media->mediaData()['html']);
+      $html_element= $doc->getElementsByTagName('iframe')->item(0);
+      if ($html_element->hasAttributes()) {
+        foreach ($html_element->attributes as $attr) {
+          $name = $attr->nodeName;
+          $value = $attr->nodeValue;
+          if ($name == 'height') {
+            // we will calculate height with jQuery
+            continue;
+          }
+          if ($name == 'width') {
+            $attrib = 'width="'.$block->dataValue('width').'%"';
+            $attribs .= $attrib.PHP_EOL;
+            continue;
+          }
+          $attrib = $name.'="'.$value.'"';
+          $attribs .= $attrib.PHP_EOL;
+        }
+      }
+      $iframe = "<iframe ".$attribs." >".PHP_EOL."</iframe>";
 
       return $view->partial('common/block-layout/sketchfab', [
         'title' => $block->dataValue('title'),
-      //'model_id' => $block->dataValue('identifier'),
-      'model_id' => $id,
         'renderSourceLink' => $block->dataValue('renderSourceLink'),
         'item_url' => $attachments[0]->item()->url(),
-      'width' => $block->dataValue('width'),
-      'ratio' => $ratio,
-      'sketchfab_iframe' => $media->mediaData()['html'],
+        'sketchfab_iframe' => $iframe
       ]);
 	}
 }

view/common/block-layout/sketchfab.phtml

@@ -1,9 +1,11 @@
 <?php
-$this->headScript()->appendFile($this->assetUrl('js/height_calculator.js',
+$this->headScript()->appendFile($this->assetUrl('js/media_dimensions.js',
 																								'Sketchfab'));
 ?>
 
-<div id="sketchfab_<?= $model_id ?>" class="sketchfab-wrap" style="position:relative;">
+<div
+	class="embeded-sketchfab-wrapper"
+	style="position:relative;">
 
 	<?php if ($renderSourceLink) { ?>
 		<div class="source-link">
@@ -20,20 +22,3 @@ $this->headScript()->appendFile($this->assetUrl('js/height_calculator.js',
 	<?php } ?>
 
 </div>
-
-<script>
-function adjust_height() {
-	$(".sketchfab-embed-wrapper").each(function() {
-		var sketchfab = $(this).find('iframe')
-		$(sketchfab).prop("width", "<?= $width ?>%")
-		var height = get_height(sketchfab, <?= $ratio ?>)
-		$(sketchfab).prop("height", height)
-	});
-}
-jQuery(document).ready(function() {
-	adjust_height();
-});
-$( window ).resize(function() {
-  adjust_height();
-});
-</script>