corrects iframe height

Module.php

@@ -9,10 +9,11 @@ class Module extends AbstractModule
 {
 	const NAMESPACE = __NAMESPACE__;
 
-	const RATIOS = [
-		'1.777' => '16:9',
-		'1.333' => '4:3',
-		'2' => '2:1',
+	const MODEL_WIDTH = [
+			'25' => '25 %',
+			'50' => '50 %',
+			'75' => '75 %',
+			'100' => '100 %',
 	];
 
 	public function getConfig()

asset/js/height_calculator.js

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

config/module.config.php

@@ -31,8 +31,7 @@ return [
         'SketchfabBlockForm' => [
             'title' => '',
             'renderSourceLink' => true,
-            'width' => 600,
-            'ratio' => '2',
+            'width' => 100,
             'wrapStyle' => 'overflow-y: hidden;display: flex;flex-direction: column;justify-content: center;',
         ]
     ]

src/Form/SketchfabBlockForm.php

@@ -12,12 +12,10 @@ class SketchfabBlockForm extends Form
 
 		$this->add([
 			'name' => 'o:block[__blockIndex__][o:data][width]',
-			'type' => Element\Number::class,
+			'type' => Element\Select::class,
 			'options' => [
-				'label' => 'Width in pixels',
-			],
-			'attributes' => [
-				'min' => '100',
+          'label' => 'Width',
+					'value_options' => Module::MODEL_WIDTH,
       ],
 		]);
 

src/Site/BlockLayout/Sketchfab.php

@@ -49,7 +49,6 @@ class Sketchfab extends AbstractBlockLayout
 		$form->setData([
 			'o:block[__blockIndex__][o:data][title]' => $data['title'],
 			'o:block[__blockIndex__][o:data][width]' => $data['width'],
-			'o:block[__blockIndex__][o:data][ratio]' => $data['ratio'],
       'o:block[__blockIndex__][o:data][renderSourceLink]' => $data['renderSourceLink'],
 		]);
 		$form->prepare();
@@ -75,15 +74,18 @@ class Sketchfab extends AbstractBlockLayout
 		static $id = 0;
 
     $media = $attachments[0]->item()->media()[0];
-    $width = 900;
-    //$height = $width / $block->dataValue('ratio');
-    $height = $width / 1.333;
+    $media = $attachments[0]->item()->media()[0];
+    $sketchfab_width = $media->mediaData()['width'];
+    $sketchfab_height = $media->mediaData()['height'];
+    $ratio = $sketchfab_width / $sketchfab_height;
+
     return $view->partial('common/block-layout/sketchfab', [
       'title' => $block->dataValue('title'),
+      'model_id' => $block->dataValue('identifier'),
       'renderSourceLink' => $block->dataValue('renderSourceLink'),
       'item_url' => $attachments[0]->item()->url(),
-      'width' => $width,
-      'height' => $height,
+      'width' => $block->dataValue('width'),
+      'ratio' => $ratio,
       'sketchfab_iframe' => $media->mediaData()['html'],
     ]);
 	}

view/common/block-layout/sketchfab.phtml

@@ -1,4 +1,9 @@
-<div class="sketchfab-wrap" style="position:relative;">
+<?php
+$this->headScript()->appendFile($this->assetUrl('js/height_calculator.js',
+																								'Sketchfab'));
+?>
+
+<div id="sketchfab_<?= $model_id ?>" class="sketchfab-wrap" style="position:relative;">
 
 	<?php if ($renderSourceLink) { ?>
 		<div class="source-link">
@@ -19,8 +24,9 @@
 
 <script>
 jQuery(document).ready(function() {
-	var sketchfab = $(".sketchfab-wrap").find('iframe');
-	$(sketchfab).prop('width', <?= $width ?>);
-	$(sketchfab).prop('height', <?= $height ?>);
+	var sketchfab = $("#sketchfab_<?= $model_id ?>").find('iframe');
+	$(sketchfab).prop("width", "<?= $width ?>%")
+	var height = get_height(sketchfab, <?= $ratio ?>)
+	$(sketchfab).prop("height", height)
 });
 </script>