Module.php

@@ -15,13 +15,6 @@ class Module extends AbstractModule
 		'image' => 'Image',
 	];
 
-	const MODEL_WIDTH = [
-			'25' => '25 %',
-			'50' => '50 %',
-			'75' => '75 %',
-			'100' => '100 %',
-	];
-	
 	const RATIOS = [
 		'1.777' => '16:9',
 		'1.333' => '4:3',

asset/js/height_calculator.js

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

config/module.config.php

@@ -32,8 +32,8 @@ return [
             'media_type' => 'video',
             'title' => '',
             'renderSourceLink' => true,
-            'width' => 100,
-            'ratio' => '1.777',
+            'width' => 600,
+            'ratio' => '2',
             'autoLoad' => false,
             'wrapStyle' => 'overflow-y: hidden;display: flex;flex-direction: column;justify-content: center;',
         ]

src/Form/ArchiveOrgBlockForm.php

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

src/Site/BlockLayout/ArchiveOrg.php

@@ -76,21 +76,15 @@ class ArchiveOrg extends AbstractBlockLayout
 		static $id = 0;
 
     $media = $attachments[0]->item()->media()[0];
-    $media_type = $block->dataValue('media_type');
     $width = $block->dataValue('width');
-    if ($media_type == "audio") {
-      $height = 32;
-    } else {
     $height = $width / $block->dataValue('ratio');
-    }
 		return $view->partial('common/block-layout/archiveOrg', [
-			'media_type' => $media_type,
+			'media_type' => $block->dataValue('media_type'),
 			'title' => $block->dataValue('title'),
       'renderSourceLink' => $block->dataValue('renderSourceLink'),
       'item_url' => $attachments[0]->item()->url(),
 			'width' => $width,
 			'height' => $height,
-      'ratio' => $block->dataValue('ratio'),
 			'url' => $media->source(),
       'id' => 'achive_org-' . ++$id,
       'thumbnails' => $thumbnails,

view/common/block-layout/archiveOrg.phtml

@@ -1,9 +1,4 @@
-<?php
-$this->headScript()->appendFile($this->assetUrl('js/height_calculator.js',
-																								'ArchiveOrg'));
-?>
-
-<div class="archive_org-wrap">
+<div class="archive_org-wrap" style="position:relative;">
 
 	<?php if ($renderSourceLink) { ?>
 		<div class="source-link">
@@ -19,16 +14,21 @@ $this->headScript()->appendFile($this->assetUrl('js/height_calculator.js',
 		}
 	?>
 
+	<?php if ($media_type != "audio") { ?>
+	<style>
+		#<?= $id ?> {
+			height: <?= $height ?>px;
+			width: <?= $width ?>px;
+		}
+	</style>
+	<?php } ?>
+
 	<iframe
 		id="<?= $id ?>"
 		src="<?= $url ?>"
 		frameborder="0"
 		webkitallowfullscreen="true"
 		mozallowfullscreen="true"
-		width="<?= $width ?>%"
-		height="<?= $height ?>"
-		user_defined_ratio="<?= $ratio ?>"
-		media_type="<?= $media_type ?>"
 		allowfullscreen >
 	</iframe>
 
@@ -39,21 +39,3 @@ $this->headScript()->appendFile($this->assetUrl('js/height_calculator.js',
 	<?php } ?>
 
 </div>
-
-<script>
-function adjust_height() {
-	$(".archive_org-wrap").each(function() {
-		var iframe = $(this).find('iframe')
-		if ($(iframe).attr("media_type") == 'video') {
-			var height = get_height(iframe, $(iframe).attr("user_defined_ratio"))
-			$(iframe).prop("height", height)
-		}
-	});
-}
-jQuery(document).ready(function() {
-  adjust_height();
-});
-$(window).resize(function() {
-  adjust_height();
-});
-</script>