],
],
[
- '#type' => 'video_embed_iframe',
- '#provider' => 'youtube',
- '#url' => 'https://www.youtube.com/embed/fdbFVWupSsw',
- '#query' => [
- 'autoplay' => '1',
- 'start' => '0',
- 'rel' => '0',
- ],
+ '#type' => 'container',
'#attributes' => [
- 'width' => '100',
- 'height' => '100',
- 'frameborder' => '0',
- 'allowfullscreen' => 'allowfullscreen',
+ 'class' => [
+ 'video-embed-field-provider-youtube',
+ ],
],
- '#cache' => [
- 'contexts' => [
- 'user.permissions',
+ 'children' => [
+ '#type' => 'video_embed_iframe',
+ '#provider' => 'youtube',
+ '#url' => 'https://www.youtube.com/embed/fdbFVWupSsw',
+ '#query' => [
+ 'autoplay' => '1',
+ 'start' => '0',
+ 'rel' => '0',
+ ],
+ '#attributes' => [
+ 'width' => '100',
+ 'height' => '100',
+ 'frameborder' => '0',
+ 'allowfullscreen' => 'allowfullscreen',
+ ],
+ '#cache' => [
+ 'contexts' => [
+ 'user.permissions',
+ ],
],
],
],
],
],
[
- '#type' => 'video_embed_iframe',
- '#provider' => 'youtube',
- '#url' => 'https://www.youtube.com/embed/fdbFVWupSsw',
- '#query' => [
- 'autoplay' => '1',
- 'start' => '100',
- 'rel' => '0',
- ],
+ '#type' => 'container',
'#attributes' => [
- 'width' => '100',
- 'height' => '100',
- 'frameborder' => '0',
- 'allowfullscreen' => 'allowfullscreen',
+ 'class' => [
+ 'video-embed-field-provider-youtube',
+ ],
],
- '#cache' => [
- 'contexts' => [
- 'user.permissions',
+ 'children' => [
+ '#type' => 'video_embed_iframe',
+ '#provider' => 'youtube',
+ '#url' => 'https://www.youtube.com/embed/fdbFVWupSsw',
+ '#query' => [
+ 'autoplay' => '1',
+ 'start' => '100',
+ 'rel' => '0',
+ ],
+ '#attributes' => [
+ 'width' => '100',
+ 'height' => '100',
+ 'frameborder' => '0',
+ 'allowfullscreen' => 'allowfullscreen',
+ ],
+ '#cache' => [
+ 'contexts' => [
+ 'user.permissions',
+ ],
],
],
],
],
],
[
- '#type' => 'video_embed_iframe',
- '#provider' => 'youtube',
- '#url' => 'https://www.youtube.com/embed/fdbFVWupSsw',
- '#query' => [
- 'autoplay' => '1',
- 'start' => '0',
- 'rel' => '0',
- 'cc_lang_pref' => 'fr',
- ],
+ '#type' => 'container',
'#attributes' => [
- 'width' => '100',
- 'height' => '100',
- 'frameborder' => '0',
- 'allowfullscreen' => 'allowfullscreen',
+ 'class' => [
+ 'video-embed-field-provider-youtube',
+ ],
],
- '#cache' => [
- 'contexts' => [
- 'user.permissions',
+ 'children' => [
+ '#type' => 'video_embed_iframe',
+ '#provider' => 'youtube',
+ '#url' => 'https://www.youtube.com/embed/fdbFVWupSsw',
+ '#query' => [
+ 'autoplay' => '1',
+ 'start' => '0',
+ 'rel' => '0',
+ 'cc_lang_pref' => 'fr',
+ ],
+ '#attributes' => [
+ 'width' => '100',
+ 'height' => '100',
+ 'frameborder' => '0',
+ 'allowfullscreen' => 'allowfullscreen',
+ ],
+ '#cache' => [
+ 'contexts' => [
+ 'user.permissions',
+ ],
],
],
],
],
],
[
- '#type' => 'video_embed_iframe',
- '#provider' => 'vimeo',
- '#url' => 'https://player.vimeo.com/video/80896303',
- '#query' => [
- 'autoplay' => '1',
- ],
+ '#type' => 'container',
'#attributes' => [
- 'width' => '100',
- 'height' => '100',
- 'frameborder' => '0',
- 'allowfullscreen' => 'allowfullscreen',
+ 'class' => [
+ 'video-embed-field-provider-vimeo',
+ ],
],
- '#cache' => [
- 'contexts' => [
- 'user.permissions',
+ 'children' => [
+ '#type' => 'video_embed_iframe',
+ '#provider' => 'vimeo',
+ '#url' => 'https://player.vimeo.com/video/80896303',
+ '#query' => [
+ 'autoplay' => '1',
+ ],
+ '#attributes' => [
+ 'width' => '100',
+ 'height' => '100',
+ 'frameborder' => '0',
+ 'allowfullscreen' => 'allowfullscreen',
+ ],
+ '#cache' => [
+ 'contexts' => [
+ 'user.permissions',
+ ],
],
],
],
],
],
[
- '#type' => 'video_embed_iframe',
- '#provider' => 'vimeo',
- '#url' => 'https://player.vimeo.com/video/80896303',
- '#query' => [
- 'autoplay' => '1',
- ],
- '#fragment' => 't=150s',
+ '#type' => 'container',
'#attributes' => [
- 'width' => '100',
- 'height' => '100',
- 'frameborder' => '0',
- 'allowfullscreen' => 'allowfullscreen',
+ 'class' => [
+ 'video-embed-field-provider-vimeo',
+ ],
],
- '#cache' => [
- 'contexts' => [
- 'user.permissions',
+ 'children' => [
+ '#type' => 'video_embed_iframe',
+ '#provider' => 'vimeo',
+ '#url' => 'https://player.vimeo.com/video/80896303',
+ '#query' => [
+ 'autoplay' => '1',
+ ],
+ '#fragment' => 't=150s',
+ '#attributes' => [
+ 'width' => '100',
+ 'height' => '100',
+ 'frameborder' => '0',
+ 'allowfullscreen' => 'allowfullscreen',
+ ],
+ '#cache' => [
+ 'contexts' => [
+ 'user.permissions',
+ ],
],
],
],
[
'#type' => 'container',
'#attributes' => [
- 'data-video-embed-field-modal' => '<iframe width="500" height="500" frameborder="0" allowfullscreen="allowfullscreen" src="https://player.vimeo.com/video/80896303?autoplay=1"></iframe>',
+ 'data-video-embed-field-modal' => '<div class="video-embed-field-provider-vimeo"><iframe width="500" height="500" frameborder="0" allowfullscreen="allowfullscreen" src="https://player.vimeo.com/video/80896303?autoplay=1"></iframe></div>',
'class' => ['video-embed-field-launch-modal'],
],
'#attached' => [
[
'#type' => 'container',
'#attributes' => [
- 'data-video-embed-field-modal' => '<div class="video-embed-field-responsive-video video-embed-field-responsive-modal" style="width:999px;"><iframe width="900" height="450" frameborder="0" allowfullscreen="allowfullscreen" src="https://player.vimeo.com/video/80896303?autoplay=1"></iframe></div>',
+ 'data-video-embed-field-modal' => '<div class="video-embed-field-provider-vimeo video-embed-field-responsive-video video-embed-field-responsive-modal" style="width:999px;"><iframe width="900" height="450" frameborder="0" allowfullscreen="allowfullscreen" src="https://player.vimeo.com/video/80896303?autoplay=1"></iframe></div>',
'class' => [
'video-embed-field-launch-modal',
],
],
],
],
+ 'Lazy load formatter' => [
+ 'https://vimeo.com/80896303',
+ [
+ 'type' => 'video_embed_field_lazyload',
+ 'settings' => [
+ 'link_image_to' => Thumbnail::LINK_PROVIDER,
+ 'autoplay' => TRUE,
+ 'width' => 900,
+ 'height' => 450,
+ 'responsive' => TRUE,
+ 'modal_max_width' => 999,
+ ],
+ ],
+ [
+ '#type' => 'container',
+ '#attributes' => [
+ 'data-video-embed-field-lazy' => '<div class="video-embed-field-provider-vimeo video-embed-field-responsive-video"><iframe width="900" height="450" frameborder="0" allowfullscreen="allowfullscreen" src="https://player.vimeo.com/video/80896303?autoplay=1"></iframe></div>',
+ 'class' => [
+ 'video-embed-field-lazy',
+ ],
+ ],
+ '#attached' => [
+ 'library' => [
+ 'video_embed_field/lazy-load',
+ ],
+ ],
+ '#cache' => [
+ 'contexts' => [
+ 'user.permissions',
+ ],
+ ],
+ 'children' => [
+ [
+ '#type' => 'link',
+ '#title' => [
+ '#theme' => 'image',
+ '#uri' => 'public://video_thumbnails/80896303.jpg',
+ ],
+ '#url' => 'https://vimeo.com/80896303',
+ ],
+ [
+ '#type' => 'html_tag',
+ '#tag' => 'div',
+ '#attributes' => [
+ 'class' => [
+ 'video-embed-field-lazy-play',
+ ],
+ ],
+ ],
+ ],
+ ],
+ ],
'Video: Responsive' => [
'https://vimeo.com/80896303',
[
'library' => ['video_embed_field/responsive-video'],
],
'#attributes' => [
- 'class' => ['video-embed-field-responsive-video'],
+ 'class' => [
+ 'video-embed-field-provider-vimeo',
+ 'video-embed-field-responsive-video'
+ ],
],
'children' => [
'#type' => 'video_embed_iframe',
],
],
[
- '#type' => 'video_embed_iframe',
- '#provider' => 'youtube_playlist',
- '#url' => 'https://www.youtube.com/embed/videoseries',
- '#query' => [
- 'list' => 'PLpeDXSh4nHjQCIZmkxg3VSdpR5e87X5eB',
- ],
+ '#type' => 'container',
'#attributes' => [
- 'width' => '100',
- 'height' => '100',
- 'frameborder' => '0',
- 'allowfullscreen' => 'allowfullscreen',
+ 'class' => [
+ 'video-embed-field-provider-youtube-playlist',
+ ],
],
- '#cache' => [
- 'contexts' => [
- 'user.permissions',
+ 'children' => [
+ '#type' => 'video_embed_iframe',
+ '#provider' => 'youtube_playlist',
+ '#url' => 'https://www.youtube.com/embed/videoseries',
+ '#query' => [
+ 'list' => 'PLpeDXSh4nHjQCIZmkxg3VSdpR5e87X5eB',
+ ],
+ '#attributes' => [
+ 'width' => '100',
+ 'height' => '100',
+ 'frameborder' => '0',
+ 'allowfullscreen' => 'allowfullscreen',
+ ],
+ '#cache' => [
+ 'contexts' => [
+ 'user.permissions',
+ ],
],
],
],
$entity->{$this->fieldName}->value = $url;
$entity->save();
- $field_output = $this->container->get('renderer')->executeInRenderContext(new RenderContext(), function() use ($entity, $settings) {
- return $entity->{$this->fieldName}->view($settings);
- });
+ $field_output = $this->container->get('renderer')
+ ->executeInRenderContext(new RenderContext(), function () use ($entity, $settings) {
+ return $entity->{$this->fieldName}->view($settings);
+ });
// Prepare the field output to make it easier to compare our test data
// values against.