injects our attribs into iframe element

This commit is contained in:
buttle 2021-08-30 17:27:26 +02:00
parent f4d75b5b78
commit 34713d9acb
2 changed files with 53 additions and 27 deletions

View File

@ -8,8 +8,8 @@ use Omeka\Site\BlockLayout\AbstractBlockLayout;
use Laminas\View\Renderer\PhpRenderer; use Laminas\View\Renderer\PhpRenderer;
use Laminas\Form\FormElementManager; use Laminas\Form\FormElementManager;
use Vimeo\Form\VimeoBlockForm; use Vimeo\Form\VimeoBlockForm;
use DOMDocument;
class Vimeo extends AbstractBlockLayout class Vimeo extends AbstractBlockLayout
{ {
@ -70,23 +70,49 @@ class Vimeo extends AbstractBlockLayout
if (!$attachments) { if (!$attachments) {
return ''; return '';
} }
$thumbnails = [];
static $id = 0;
$media = $attachments[0]->item()->media()[0]; $media = $attachments[0]->item()->media()[0];
$vimeo_width = $media->mediaData()['width']; $width = $media->mediaData()['width'];
$vimeo_height = $media->mediaData()['height']; $width = 100;
$ratio = $vimeo_width / $vimeo_height; $height = 0;
// creates an iframe injecting our width and calculated ratio and height
$attribs=" ";
$original_width = 0;
$original_height = 0;
$doc = new DOMDocument();
$doc->loadHTML($media->mediaData()['html']);
$html_element= $doc->getElementsByTagName('iframe')->item(0);
if ($html_element->hasAttributes()) {
foreach ($html_element->attributes as $attr) {
$name = $attr->nodeName;
$value = $attr->nodeValue;
if ($name == 'height') {
$original_height = $value;
continue;
}
if ($name == 'width') {
$original_width = $value;
$attrib = $name.'="'.$width.'%"';
$attribs .= $attrib.PHP_EOL;
continue;
}
$attrib = $name.'="'.$value.'"';
$attribs .= $attrib.PHP_EOL;
}
}
if ($original_height !== 0) {
$ratio = $original_width / $original_height;
$attrib = 'ratio="'.$ratio.'"';
$attribs .= $attrib.PHP_EOL;
}
$iframe = "<iframe ".$attribs." >".PHP_EOL."</iframe>";
return $view->partial('common/block-layout/vimeo', [ return $view->partial('common/block-layout/vimeo', [
'title' => $block->dataValue('title'), 'title' => $block->dataValue('title'),
'renderSourceLink' => $block->dataValue('renderSourceLink'), 'renderSourceLink' => $block->dataValue('renderSourceLink'),
'item_url' => $attachments[0]->item()->url(), 'item_url' => $attachments[0]->item()->url(),
'width' => $block->dataValue('width'),
'video_id' => $media->mediaData()['video_id'],
'ratio' => $ratio, 'ratio' => $ratio,
'vimeo_iframe' => $media->mediaData()['html'], 'vimeo_iframe' => $iframe
]); ]);
} }
} }

View File

@ -3,7 +3,8 @@ $this->headScript()->appendFile($this->assetUrl('js/height_calculator.js',
'Vimeo')); 'Vimeo'));
?> ?>
<div id="vimeo_<?= $video_id ?>" class="vimeo-embed-wrapper" style="position:relative;"> <div class="vimeo-embed-wrapper"
style="position:relative;">
<?php if ($renderSourceLink) { ?> <?php if ($renderSourceLink) { ?>
<div class="source-link"> <div class="source-link">
@ -25,9 +26,8 @@ $this->headScript()->appendFile($this->assetUrl('js/height_calculator.js',
function adjust_height() { function adjust_height() {
$(".vimeo-embed-wrapper").each(function() { $(".vimeo-embed-wrapper").each(function() {
var iframe = $(this).find('iframe') var iframe = $(this).find('iframe')
$(iframe).prop("width", "<?= $width ?>%") var ratio = $(iframe).attr('ratio')
var height = get_height(iframe, <?= $ratio ?>) $(iframe).prop("height", get_height(iframe, ratio))
$(iframe).prop("height", height)
}); });
} }
jQuery(document).ready(function() { jQuery(document).ready(function() {