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

This commit is contained in:
buttle 2021-07-30 13:20:46 +02:00
parent 361f4c2917
commit 559a385055
6 changed files with 37 additions and 16 deletions

View File

@ -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';

View File

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

View File

@ -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;',
]

View File

@ -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' => [
'label' => 'Width in pixels',
'label' => 'Width',
'value_options' => Module::IMAGE_WIDTH,
],
/*
'attributes' => [
'min' => '100',
],
*/
]);
$this->add([

View File

@ -75,15 +75,17 @@ class Vimeo extends AbstractBlockLayout
static $id = 0;
$media = $attachments[0]->item()->media()[0];
$width = 900;
//$height = $width / $block->dataValue('ratio');
$height = $width / 1.333;
$vimeo_width = $media->mediaData()['width'];
$vimeo_height = $media->mediaData()['height'];
$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,
'height' => $height,
'width' => $block->dataValue('width'),
'video_id' => $media->mediaData()['video_id'],
'ratio' => $ratio,
'vimeo_iframe' => $media->mediaData()['html'],
]);
}

View File

@ -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');
//$(vimeo).prop('width', <?= $width ?>);
//$(vimeo).prop('height', <?= $height ?>);
var vimeo = $("#vimeo_<?= $video_id ?>").find('iframe');
$(vimeo).prop("width", "<?= $width ?>%")
var height = get_height(vimeo, <?= $ratio ?>)
$(vimeo).prop("height", height)
});
</script>