sets media dimensions as per defined by user

fixes: #1

Module.php

@@ -15,6 +15,13 @@ 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

@@ -0,0 +1,4 @@
+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' => 600,
+            'width' => 100,
-            'ratio' => '2',
+            'ratio' => '1.777',
             'autoLoad' => false,
             'wrapStyle' => 'overflow-y: hidden;display: flex;flex-direction: column;justify-content: center;',
         ]

src/Form/ArchiveOrgBlockForm.php

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

src/Site/BlockLayout/ArchiveOrg.php

@@ -76,15 +76,21 @@ 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' => $block->dataValue('media_type'),
+			'media_type' => $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,4 +1,9 @@
-<div class="archive_org-wrap" style="position:relative;">
+<?php
+$this->headScript()->appendFile($this->assetUrl('js/height_calculator.js',
+																								'ArchiveOrg'));
+?>
+
+<div class="archive_org-wrap">
 
 	<?php if ($renderSourceLink) { ?>
 		<div class="source-link">
@@ -14,21 +19,16 @@
 		}
 	?>
 
-	<?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,3 +39,21 @@
 	<?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>