Module.php

@@ -9,19 +9,12 @@ 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

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

src/Form/VimeoBlockForm.php

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

src/Site/BlockLayout/Vimeo.php

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

view/common/block-layout/vimeo.phtml

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