Video renders with block defined width, and respects initial ratio.

Module.php

@@ -9,12 +9,19 @@ class Module extends AbstractModule
 {
 	const NAMESPACE = __NAMESPACE__;
 
+	const IMAGE_WIDTH = [
+			'25' => '25 %',
+			'50' => '50 %',
+			'75' => '75 %',
+			'100' => '100 %',
+	];
+/*
 	const RATIOS = [
 		'1.777' => '16:9',
 		'1.333' => '4:3',
 		'2' => '2:1',
 	];
-
+*/
 	public function getConfig()
 	{
 		return include __DIR__ . '/config/module.config.php';

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

src/Form/VimeoBlockForm.php

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

src/Site/BlockLayout/Vimeo.php

@@ -75,15 +75,17 @@ class Vimeo extends AbstractBlockLayout
 		static $id = 0;
 
     $media = $attachments[0]->item()->media()[0];
-    $width = 900;
+    $vimeo_width = $media->mediaData()['width'];
-    //$height = $width / $block->dataValue('ratio');
+    $vimeo_height = $media->mediaData()['height'];
-    $height = $width / 1.333;
+    $ratio = $vimeo_width / $vimeo_height;
+
     return $view->partial('common/block-layout/vimeo', [
       'title' => $block->dataValue('title'),
       'renderSourceLink' => $block->dataValue('renderSourceLink'),
       'item_url' => $attachments[0]->item()->url(),
-      'width' => $width,
+      'width' => $block->dataValue('width'),
-      'height' => $height,
+      'video_id' =>  $media->mediaData()['video_id'],
+      'ratio' => $ratio,
       'vimeo_iframe' => $media->mediaData()['html'],
     ]);
 	}

view/common/block-layout/vimeo.phtml

@@ -1,4 +1,9 @@
-<div class="vimeo-wrap" style="position:relative;">
+<?php
+$this->headScript()->appendFile($this->assetUrl('js/height_calculator.js',
+																								'Vimeo'));
+?>
+
+<div id="vimeo_<?= $video_id ?>" class="vimeo-wrap" style="position:relative;">
 
 	<?php if ($renderSourceLink) { ?>
 		<div class="source-link">
@@ -16,11 +21,11 @@
 
 </div>
 
-
 <script>
 jQuery(document).ready(function() {
-	var vimeo = $(".vimeo-wrap").find('iframe');
+	var vimeo = $("#vimeo_<?= $video_id ?>").find('iframe');
-	//$(vimeo).prop('width', <?= $width ?>);
+	$(vimeo).prop("width", "<?= $width ?>%")
-	//$(vimeo).prop('height', <?= $height ?>);
+	var height = get_height(vimeo, <?= $ratio ?>)
+	$(vimeo).prop("height", height)
 });
 </script>