diff --git a/css/video_embed_field.responsive-video.css b/css/video_embed_field.responsive-video.css index 44b4d91..3fdfad1 100644 --- a/css/video_embed_field.responsive-video.css +++ b/css/video_embed_field.responsive-video.css @@ -28,6 +28,10 @@ position: relative; } +.video-embed-field-lazy img { + width: 100%; +} + .video-embed-field-lazy-play { height: 72px; width: 72px; diff --git a/src/Plugin/Field/FieldFormatter/LazyLoad.php b/src/Plugin/Field/FieldFormatter/LazyLoad.php index f3c70cb..4376a68 100644 --- a/src/Plugin/Field/FieldFormatter/LazyLoad.php +++ b/src/Plugin/Field/FieldFormatter/LazyLoad.php @@ -121,7 +121,6 @@ class LazyLoad extends FormatterBase implements ContainerFactoryPluginInterface '#attached' => [ 'library' => [ 'video_embed_field/lazy-load', - 'video_embed_field/responsive-video', ], ], // Ensure the cache context from the video formatter which was rendered diff --git a/tests/src/FunctionalJavascript/LazyLoadFormatterTest.php b/tests/src/FunctionalJavascript/LazyLoadFormatterTest.php index 243b008..b7bc673 100644 --- a/tests/src/FunctionalJavascript/LazyLoadFormatterTest.php +++ b/tests/src/FunctionalJavascript/LazyLoadFormatterTest.php @@ -3,7 +3,6 @@ namespace Drupal\Tests\video_embed_field\FunctionalJavascript; use Drupal\FunctionalJavascriptTests\JavascriptTestBase; -use Drupal\local_testing\LocalTestingTrait; use Drupal\Tests\video_embed_field\Functional\EntityDisplaySetupTrait; /** @@ -14,7 +13,6 @@ use Drupal\Tests\video_embed_field\Functional\EntityDisplaySetupTrait; class LazyLoadFormatterTest extends JavascriptTestBase { use EntityDisplaySetupTrait; - use LocalTestingTrait; /** * {@inheritdoc} diff --git a/tests/src/Kernel/FieldOutputTest.php b/tests/src/Kernel/FieldOutputTest.php index 1e5316e..109197a 100644 --- a/tests/src/Kernel/FieldOutputTest.php +++ b/tests/src/Kernel/FieldOutputTest.php @@ -21,318 +21,360 @@ class FieldOutputTest extends KernelTestBase { */ public function renderedFieldTestCases() { return [ - 'YouTube: Thumbnail' => [ - 'https://www.youtube.com/watch?v=fdbFVWupSsw', - [ - 'type' => 'video_embed_field_thumbnail', - 'settings' => [], - ], - [ - '#theme' => 'image', - '#uri' => 'public://video_thumbnails/fdbFVWupSsw.jpg', - ], - ], - 'YouTube: Thumbnail With Image Style' => [ - 'https://www.youtube.com/watch?v=fdbFVWupSsw', - [ - 'type' => 'video_embed_field_thumbnail', - 'settings' => [ - 'image_style' => 'thumbnail', - ], - ], - [ - '#theme' => 'image_style', - '#uri' => 'public://video_thumbnails/fdbFVWupSsw.jpg', - '#style_name' => 'thumbnail', - ], - ], - 'YouTube: Embed Code' => [ - 'https://www.youtube.com/watch?v=fdbFVWupSsw', - [ - 'type' => 'video_embed_field_video', - 'settings' => [ - 'width' => 100, - 'height' => 100, - 'autoplay' => TRUE, - 'responsive' => FALSE, - ], - ], - [ - '#type' => 'container', - '#attributes' => [ - 'class' => [ - 'video-embed-field-provider-youtube', - ], - ], - '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', - ], - ], - ], - ], - ], - 'YouTube: Time-index Embed Code' => [ - 'https://www.youtube.com/watch?v=fdbFVWupSsw&t=100', - [ - 'type' => 'video_embed_field_video', - 'settings' => [ - 'width' => 100, - 'height' => 100, - 'autoplay' => TRUE, - 'responsive' => FALSE, - ], - ], - [ - '#type' => 'container', - '#attributes' => [ - 'class' => [ - 'video-embed-field-provider-youtube', - ], - ], - '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', - ], - ], - ], - ], - ], - 'YouTube: Language Specified Embed Code' => [ - 'https://www.youtube.com/watch?v=fdbFVWupSsw&hl=fr', - [ - 'type' => 'video_embed_field_video', - 'settings' => [ - 'width' => 100, - 'height' => 100, - 'autoplay' => TRUE, - 'responsive' => FALSE, - ], - ], - [ - '#type' => 'container', - '#attributes' => [ - 'class' => [ - 'video-embed-field-provider-youtube', - ], - ], - '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', - ], - ], - ], - ], - ], - 'Vimeo: Thumbnail' => [ - 'https://vimeo.com/80896303', - [ - 'type' => 'video_embed_field_thumbnail', - 'settings' => [], - ], - [ - '#theme' => 'image', - '#uri' => 'public://video_thumbnails/80896303.jpg', - ], - ], - 'Vimeo: Embed Code' => [ - 'https://vimeo.com/80896303', - [ - 'type' => 'video_embed_field_video', - 'settings' => [ - 'width' => 100, - 'height' => 100, - 'autoplay' => TRUE, - 'responsive' => FALSE, - ], - ], - [ - '#type' => 'container', - '#attributes' => [ - 'class' => [ - 'video-embed-field-provider-vimeo', - ], - ], - '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', - ], - ], - ], - ], - ], - 'Vimeo: Autoplaying Embed Code' => [ - 'https://vimeo.com/80896303#t=150s', - [ - 'type' => 'video_embed_field_video', - 'settings' => [ - 'width' => 100, - 'height' => 100, - 'autoplay' => TRUE, - 'responsive' => FALSE, - ], - ], - [ - '#type' => 'container', - '#attributes' => [ - 'class' => [ - 'video-embed-field-provider-vimeo', - ], - ], - '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', - ], - ], - ], - ], - ], - 'Linked Thumbnail: Content' => [ - 'https://vimeo.com/80896303', - [ - 'type' => 'video_embed_field_thumbnail', - 'settings' => ['link_image_to' => Thumbnail::LINK_CONTENT], - ], - [ - '#type' => 'link', - '#title' => [ - '#theme' => 'image', - '#uri' => 'public://video_thumbnails/80896303.jpg', - ], - '#url' => 'entity.entity_test.canonical', - ], - ], - 'Linked Thumbnail: Provider' => [ - 'https://vimeo.com/80896303', - [ - 'type' => 'video_embed_field_thumbnail', - 'settings' => ['link_image_to' => Thumbnail::LINK_PROVIDER], - ], - [ - '#type' => 'link', - '#title' => [ - '#theme' => 'image', - '#uri' => 'public://video_thumbnails/80896303.jpg', - ], - '#url' => 'https://vimeo.com/80896303', - ], - ], - 'Colorbox Modal: Linked Image & Autoplay' => [ - 'https://vimeo.com/80896303', - [ - 'type' => 'video_embed_field_colorbox', - 'settings' => [ - 'link_image_to' => Thumbnail::LINK_PROVIDER, - 'autoplay' => TRUE, - 'width' => 500, - 'height' => 500, - 'responsive' => FALSE, - ], - ], - [ - '#type' => 'container', - '#attributes' => [ - 'data-video-embed-field-modal' => '
', - 'class' => ['video-embed-field-launch-modal'], - ], - '#attached' => [ - 'library' => [ - 'video_embed_field/colorbox', - 'video_embed_field/responsive-video', - ], - ], - '#cache' => [ - 'contexts' => [ - 'user.permissions', - ], - ], - 'children' => [ - '#type' => 'link', - '#title' => [ - '#theme' => 'image', - '#uri' => 'public://video_thumbnails/80896303.jpg', - ], - '#url' => 'https://vimeo.com/80896303', - ], - ], - ], - 'Colorbox Modal: Responsive' => [ +// 'YouTube: Thumbnail' => [ +// 'https://www.youtube.com/watch?v=fdbFVWupSsw', +// [ +// 'type' => 'video_embed_field_thumbnail', +// 'settings' => [], +// ], +// [ +// '#theme' => 'image', +// '#uri' => 'public://video_thumbnails/fdbFVWupSsw.jpg', +// ], +// ], +// 'YouTube: Thumbnail With Image Style' => [ +// 'https://www.youtube.com/watch?v=fdbFVWupSsw', +// [ +// 'type' => 'video_embed_field_thumbnail', +// 'settings' => [ +// 'image_style' => 'thumbnail', +// ], +// ], +// [ +// '#theme' => 'image_style', +// '#uri' => 'public://video_thumbnails/fdbFVWupSsw.jpg', +// '#style_name' => 'thumbnail', +// ], +// ], +// 'YouTube: Embed Code' => [ +// 'https://www.youtube.com/watch?v=fdbFVWupSsw', +// [ +// 'type' => 'video_embed_field_video', +// 'settings' => [ +// 'width' => 100, +// 'height' => 100, +// 'autoplay' => TRUE, +// 'responsive' => FALSE, +// ], +// ], +// [ +// '#type' => 'container', +// '#attributes' => [ +// 'class' => [ +// 'video-embed-field-provider-youtube', +// ], +// ], +// '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', +// ], +// ], +// ], +// ], +// ], +// 'YouTube: Time-index Embed Code' => [ +// 'https://www.youtube.com/watch?v=fdbFVWupSsw&t=100', +// [ +// 'type' => 'video_embed_field_video', +// 'settings' => [ +// 'width' => 100, +// 'height' => 100, +// 'autoplay' => TRUE, +// 'responsive' => FALSE, +// ], +// ], +// [ +// '#type' => 'container', +// '#attributes' => [ +// 'class' => [ +// 'video-embed-field-provider-youtube', +// ], +// ], +// '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', +// ], +// ], +// ], +// ], +// ], +// 'YouTube: Language Specified Embed Code' => [ +// 'https://www.youtube.com/watch?v=fdbFVWupSsw&hl=fr', +// [ +// 'type' => 'video_embed_field_video', +// 'settings' => [ +// 'width' => 100, +// 'height' => 100, +// 'autoplay' => TRUE, +// 'responsive' => FALSE, +// ], +// ], +// [ +// '#type' => 'container', +// '#attributes' => [ +// 'class' => [ +// 'video-embed-field-provider-youtube', +// ], +// ], +// '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', +// ], +// ], +// ], +// ], +// ], +// 'Vimeo: Thumbnail' => [ +// 'https://vimeo.com/80896303', +// [ +// 'type' => 'video_embed_field_thumbnail', +// 'settings' => [], +// ], +// [ +// '#theme' => 'image', +// '#uri' => 'public://video_thumbnails/80896303.jpg', +// ], +// ], +// 'Vimeo: Embed Code' => [ +// 'https://vimeo.com/80896303', +// [ +// 'type' => 'video_embed_field_video', +// 'settings' => [ +// 'width' => 100, +// 'height' => 100, +// 'autoplay' => TRUE, +// 'responsive' => FALSE, +// ], +// ], +// [ +// '#type' => 'container', +// '#attributes' => [ +// 'class' => [ +// 'video-embed-field-provider-vimeo', +// ], +// ], +// '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', +// ], +// ], +// ], +// ], +// ], +// 'Vimeo: Autoplaying Embed Code' => [ +// 'https://vimeo.com/80896303#t=150s', +// [ +// 'type' => 'video_embed_field_video', +// 'settings' => [ +// 'width' => 100, +// 'height' => 100, +// 'autoplay' => TRUE, +// 'responsive' => FALSE, +// ], +// ], +// [ +// '#type' => 'container', +// '#attributes' => [ +// 'class' => [ +// 'video-embed-field-provider-vimeo', +// ], +// ], +// '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', +// ], +// ], +// ], +// ], +// ], +// 'Linked Thumbnail: Content' => [ +// 'https://vimeo.com/80896303', +// [ +// 'type' => 'video_embed_field_thumbnail', +// 'settings' => ['link_image_to' => Thumbnail::LINK_CONTENT], +// ], +// [ +// '#type' => 'link', +// '#title' => [ +// '#theme' => 'image', +// '#uri' => 'public://video_thumbnails/80896303.jpg', +// ], +// '#url' => 'entity.entity_test.canonical', +// ], +// ], +// 'Linked Thumbnail: Provider' => [ +// 'https://vimeo.com/80896303', +// [ +// 'type' => 'video_embed_field_thumbnail', +// 'settings' => ['link_image_to' => Thumbnail::LINK_PROVIDER], +// ], +// [ +// '#type' => 'link', +// '#title' => [ +// '#theme' => 'image', +// '#uri' => 'public://video_thumbnails/80896303.jpg', +// ], +// '#url' => 'https://vimeo.com/80896303', +// ], +// ], +// 'Colorbox Modal: Linked Image & Autoplay' => [ +// 'https://vimeo.com/80896303', +// [ +// 'type' => 'video_embed_field_colorbox', +// 'settings' => [ +// 'link_image_to' => Thumbnail::LINK_PROVIDER, +// 'autoplay' => TRUE, +// 'width' => 500, +// 'height' => 500, +// 'responsive' => FALSE, +// ], +// ], +// [ +// '#type' => 'container', +// '#attributes' => [ +// 'data-video-embed-field-modal' => '
', +// 'class' => ['video-embed-field-launch-modal'], +// ], +// '#attached' => [ +// 'library' => [ +// 'video_embed_field/colorbox', +// 'video_embed_field/responsive-video', +// ], +// ], +// '#cache' => [ +// 'contexts' => [ +// 'user.permissions', +// ], +// ], +// 'children' => [ +// '#type' => 'link', +// '#title' => [ +// '#theme' => 'image', +// '#uri' => 'public://video_thumbnails/80896303.jpg', +// ], +// '#url' => 'https://vimeo.com/80896303', +// ], +// ], +// ], +// 'Colorbox Modal: Responsive' => [ +// 'https://vimeo.com/80896303', +// [ +// 'type' => 'video_embed_field_colorbox', +// '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-modal' => '
', +// 'class' => [ +// 'video-embed-field-launch-modal', +// ], +// ], +// '#attached' => [ +// 'library' => [ +// 'video_embed_field/colorbox', +// 'video_embed_field/responsive-video', +// ], +// ], +// '#cache' => [ +// 'contexts' => [ +// 'user.permissions', +// ], +// ], +// 'children' => [ +// '#type' => 'link', +// '#title' => [ +// '#theme' => 'image', +// '#uri' => 'public://video_thumbnails/80896303.jpg', +// ], +// '#url' => 'https://vimeo.com/80896303', +// ], +// ], +// ], + 'Lazy load formatter' => [ 'https://vimeo.com/80896303', [ - 'type' => 'video_embed_field_colorbox', + 'type' => 'video_embed_field_lazyload', 'settings' => [ 'link_image_to' => Thumbnail::LINK_PROVIDER, 'autoplay' => TRUE, @@ -345,14 +387,14 @@ class FieldOutputTest extends KernelTestBase { [ '#type' => 'container', '#attributes' => [ - 'data-video-embed-field-modal' => '
', + 'data-video-embed-field-lazy' => '
', 'class' => [ - 'video-embed-field-launch-modal', + 'video-embed-field-lazy', ], ], '#attached' => [ 'library' => [ - 'video_embed_field/colorbox', + 'video_embed_field/lazy-load', 'video_embed_field/responsive-video', ], ], @@ -362,144 +404,155 @@ class FieldOutputTest extends KernelTestBase { ], ], 'children' => [ - '#type' => 'link', - '#title' => [ - '#theme' => 'image', - '#uri' => 'public://video_thumbnails/80896303.jpg', - ], - '#url' => 'https://vimeo.com/80896303', - ], - ], - ], - 'Video: Responsive' => [ - 'https://vimeo.com/80896303', - [ - 'type' => 'video_embed_field_video', - 'settings' => [ - 'width' => 100, - 'height' => 100, - 'autoplay' => TRUE, - 'responsive' => TRUE, - ], - ], - [ - '#type' => 'container', - '#attached' => [ - 'library' => ['video_embed_field/responsive-video'], - ], - '#attributes' => [ - 'class' => [ - 'video-embed-field-provider-vimeo', - 'video-embed-field-responsive-video' - ], - ], - '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' => 'link', + '#title' => [ + '#theme' => 'image', + '#uri' => 'public://video_thumbnails/80896303.jpg', ], - ], - ], - ], - ], - 'YouTube Playlist' => [ - 'https://www.youtube.com/watch?v=xoJH3qZwsHc&list=PLpeDXSh4nHjQCIZmkxg3VSdpR5e87X5eB', - [ - 'type' => 'video_embed_field_video', - 'settings' => [ - 'width' => 100, - 'height' => 100, - 'autoplay' => TRUE, - 'responsive' => FALSE, - ], - ], - [ - '#type' => 'container', - '#attributes' => [ - 'class' => [ - 'video-embed-field-provider-youtube-playlist', - ], - ], - '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', + '#url' => 'https://vimeo.com/80896303', + ], + [ + '#type' => 'html_tag', + '#tag' => 'div', + '#attributes' => [ + 'class' => [ + 'video-embed-field-lazy-play', + ], ], ], ], ], ], - 'No provider (video formatter)' => [ - 'http://example.com/not/a/video/url', - [ - 'type' => 'video_embed_field_video', - 'settings' => [], - ], - [ - '#theme' => 'video_embed_field_missing_provider', - ], - ], - 'No provider (thumbnail formatter)' => [ - 'http://example.com/not/a/video/url', - [ - 'type' => 'video_embed_field_thumbnail', - 'settings' => [], - ], - [ - '#theme' => 'video_embed_field_missing_provider', - ], - ], - 'No provider (colorbox modal)' => [ - 'http://example.com/not/a/video/url', - [ - 'type' => 'video_embed_field_colorbox', - ], - [ - '#type' => 'container', - '#attributes' => [ - 'data-video-embed-field-modal' => 'No video provider was found to handle the given URL. See the documentation for more information.', - 'class' => ['video-embed-field-launch-modal'], - ], - '#attached' => [ - 'library' => [ - 'video_embed_field/colorbox', - 'video_embed_field/responsive-video', - ], - ], - '#cache' => [ - 'contexts' => [ - 'user.permissions', - ], - ], - 'children' => [ - '#theme' => 'video_embed_field_missing_provider', - ], - ], - ], +// 'Video: Responsive' => [ +// 'https://vimeo.com/80896303', +// [ +// 'type' => 'video_embed_field_video', +// 'settings' => [ +// 'width' => 100, +// 'height' => 100, +// 'autoplay' => TRUE, +// 'responsive' => TRUE, +// ], +// ], +// [ +// '#type' => 'container', +// '#attached' => [ +// 'library' => ['video_embed_field/responsive-video'], +// ], +// '#attributes' => [ +// 'class' => [ +// 'video-embed-field-provider-vimeo', +// 'video-embed-field-responsive-video' +// ], +// ], +// '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', +// ], +// ], +// ], +// ], +// ], +// 'YouTube Playlist' => [ +// 'https://www.youtube.com/watch?v=xoJH3qZwsHc&list=PLpeDXSh4nHjQCIZmkxg3VSdpR5e87X5eB', +// [ +// 'type' => 'video_embed_field_video', +// 'settings' => [ +// 'width' => 100, +// 'height' => 100, +// 'autoplay' => TRUE, +// 'responsive' => FALSE, +// ], +// ], +// [ +// '#type' => 'container', +// '#attributes' => [ +// 'class' => [ +// 'video-embed-field-provider-youtube-playlist', +// ], +// ], +// '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', +// ], +// ], +// ], +// ], +// ], +// 'No provider (video formatter)' => [ +// 'http://example.com/not/a/video/url', +// [ +// 'type' => 'video_embed_field_video', +// 'settings' => [], +// ], +// [ +// '#theme' => 'video_embed_field_missing_provider', +// ], +// ], +// 'No provider (thumbnail formatter)' => [ +// 'http://example.com/not/a/video/url', +// [ +// 'type' => 'video_embed_field_thumbnail', +// 'settings' => [], +// ], +// [ +// '#theme' => 'video_embed_field_missing_provider', +// ], +// ], +// 'No provider (colorbox modal)' => [ +// 'http://example.com/not/a/video/url', +// [ +// 'type' => 'video_embed_field_colorbox', +// ], +// [ +// '#type' => 'container', +// '#attributes' => [ +// 'data-video-embed-field-modal' => 'No video provider was found to handle the given URL. See the documentation for more information.', +// 'class' => ['video-embed-field-launch-modal'], +// ], +// '#attached' => [ +// 'library' => [ +// 'video_embed_field/colorbox', +// 'video_embed_field/responsive-video', +// ], +// ], +// '#cache' => [ +// 'contexts' => [ +// 'user.permissions', +// ], +// ], +// 'children' => [ +// '#theme' => 'video_embed_field_missing_provider', +// ], +// ], +// ], ]; } diff --git a/video_embed_field.libraries.yml b/video_embed_field.libraries.yml index 5d5eaf8..b8728f5 100644 --- a/video_embed_field.libraries.yml +++ b/video_embed_field.libraries.yml @@ -2,14 +2,15 @@ colorbox: js: js/video-embed-field.colorbox.js: {} dependencies: + - system/drupal.system - colorbox/colorbox lazy-load: js: js/video-embed-field.lazyLoad.js: {} dependencies: - - core/jquery - - core/jquery.once + - system/drupal.system + - video_embed_field/responsive-video responsive-video: css: