diff --git a/css/video_embed_vidyard.css b/css/video_embed_vidyard.css
index 7cf3918..376ddce 100644
--- a/css/video_embed_vidyard.css
+++ b/css/video_embed_vidyard.css
@@ -1,15 +1,21 @@
-/* Set vidyard span wrappers for responsive videos. */
-/* Ref: http://knowledge.vidyard.com/33007-publish-your-player/245140-make-an-inline-player-responsive */
-.video-embed-field-responsive-video .vidyard_player {
+.video-embed-field-responsive-video .vidyard-player-container {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.video-embed-field-responsive-video .vidyard_player > span {
+  top: 0 !important;
+  left: 0 !important;
+  height: 100% !important;
   width: 100% !important;
+  max-width: initial !important;
+  max-height: initial !important;
+}
+.video-embed-field-responsive-video .vidyard-player-container  > div {
   height: 100% !important;
+  width: 100% !important;
   margin: 0 auto !important;
 }
+.video-embed-field-responsive-video .vidyard-player-container > div > div {
+  position: absolute !important;
+  height: 100% !important;
+  width: 100% !important;
+  max-width: initial !important;
+  max-height: initial !important;
+}
diff --git a/src/Plugin/video_embed_field/Provider/Vidyard.php b/src/Plugin/video_embed_field/Provider/Vidyard.php
index ba00a9e..f75d8ad 100644
--- a/src/Plugin/video_embed_field/Provider/Vidyard.php
+++ b/src/Plugin/video_embed_field/Provider/Vidyard.php
@@ -13,59 +13,70 @@ use Drupal\Component\Utility\Html;
  *  title = @Translation("Vidyard")
  * )
  */
-class Vidyard extends ProviderPluginBase {
+class Vidyard extends ProviderPluginBase
+{
 
-  /**
-   * {@inheritdoc}
-   */
-  public function renderEmbedCode($width, $height, $autoplay) {
-    return [
-      '#type' => 'html_tag',
-      '#tag' => 'script',
-      '#attributes' => [
-        'type' => 'text/javascript',
-        'id' => 'vidyard_embed_code_' . $this->getVideoId(),
-        'src' => sprintf('//play.vidyard.com/%s.js?v=3.1.1&type=inline&autoplay=%d', $this->getVideoId(), $autoplay),
-      ],
-      '#attached' => [
-        'library' => [
-          'video_embed_vidyard/styles',
-        ],
-      ],
-    ];
-  }
+    /**
+     * {@inheritdoc}
+     */
+    public function renderEmbedCode($width, $height, $autoplay)
+    {
+        return [
+            '#type' => 'video_embed_iframe',
+            '#provider' => 'vidyard',
+            '#url' => sprintf('https://play.vidyard.com/%s.jpg', $this->getVideoId()),
+            '#attributes' => [
+                'id' => 'vidyard_embed_code_' . $this->getVideoId(),
+                'class' => ['vidyard-player-embed'],
+                'alt' => '',
+                'data-uuid' => $this->getVideoId(),
+                'data-v' => '4',
+                'data-type' => 'inline',
+                'data-width' => $width,
+                'data-height' => $height,
+                'data-autoplay' => $autoplay,
+            ],
+            '#attached' => [
+                'library' => [
+                    'video_embed_vidyard/styles',
+                    'video_embed_vidyard/embed-api',
+                ],
+            ],
+        ];
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function getRemoteThumbnailUrl()
+    {
+        return sprintf('https://play.vidyard.com/%s.jpg', $this->getVideoId());
+    }
 
-  /**
-   * {@inheritdoc}
-   */
-  public function getRemoteThumbnailUrl() {
-    return sprintf("https://play.vidyard.com/%s.jpg", $this->getVideoId());
-  }
+    /**
+     * {@inheritdoc}
+     */
+    public static function getIdFromInput($input)
+    {
+        $parsed_url = parse_url($input);
+        // Retrieve the configuration.
+        $vidyard_config = \Drupal::config('video_embed_vidyard.settings');
+        $host_name = $vidyard_config->get('custom_domain');
+        $additional_pattern = $vidyard_config->get('additional_pattern');
+        $default_pattern = 'share|embed\_select|watch';
 
-  /**
-   * {@inheritdoc}
-   */
-  public static function getIdFromInput($input) {
-    $parsed_url = parse_url($input);
-    // Retrieve the configuration.
-    $vidyard_config = \Drupal::config('video_embed_vidyard.settings');
-    $host_name = $vidyard_config->get('custom_domain');
-    $additional_pattern = $vidyard_config->get('additional_pattern');
-    $default_pattern = 'share|embed\_select|watch';
+        if (!empty($parsed_url['host']) && !empty($parsed_url['path'])) {
+            if (stripos($parsed_url['host'], 'vidyard.com') !== FALSE) {
+                preg_match('@\/(?:' . $default_pattern . ')\/(?<id>[\_\-a-zA-Z0-9]+)@i', $parsed_url['path'], $matches);
+                return !empty($matches['id']) ? $matches['id'] : FALSE;
+            } elseif (stripos($parsed_url['host'], $host_name) !== FALSE) {
+                $pattern = $default_pattern . '|' . Html::escape($additional_pattern);
+                preg_match('@\/(?:' . $pattern . ')\/(?<id>[\_\-a-zA-Z0-9]+)@i', $parsed_url['path'], $matches);
+                return !empty($matches['id']) ? $matches['id'] : FALSE;
+            }
+        }
 
-    if (!empty($parsed_url['host']) && !empty($parsed_url['path'])) {
-      if (stripos($parsed_url['host'], 'vidyard.com') !== FALSE) {
-        preg_match('@\/(?:' . $default_pattern . ')\/(?<id>[\_\-a-zA-Z0-9]+)@i', $parsed_url['path'], $matches);
-        return !empty($matches['id']) ? $matches['id'] : FALSE;
-      }
-      elseif (stripos($parsed_url['host'], $host_name) !== FALSE) {
-        $pattern = $default_pattern . '|' . Html::escape($additional_pattern);
-        preg_match('@\/(?:' . $pattern . ')\/(?<id>[\_\-a-zA-Z0-9]+)@i', $parsed_url['path'], $matches);
-        return !empty($matches['id']) ? $matches['id'] : FALSE;
-      }
+        return FALSE;
     }
 
-    return FALSE;
-  }
-
 }
diff --git a/templates/video-embed-iframe--vidyard.html.twig b/templates/video-embed-iframe--vidyard.html.twig
new file mode 100644
index 0000000..2ddcb57
--- /dev/null
+++ b/templates/video-embed-iframe--vidyard.html.twig
@@ -0,0 +1,20 @@
+{#
+/**
+ * @file
+ * Theme override to display an image required for Vidyard Embed API.
+ *
+ * Available variables:
+ * - url: Image source URL. This should be in https://play.vidyard.com/VIDEO_ID.jpg format.
+ * - attributes: HTML attributes for the image, excluding `src` and `alt`.
+ *   - id: HTML DOM ID. Default: `vidyard_embed_code_VIDEOID`
+ *   - class: CSS classes. Default: `vidyard-player-embed`
+ *   - alt: Alternative text.
+ *   - data-uuid: Vidyard video ID.
+ *   - data-v: Vidyard Embed API version. Default: `4`
+ *   - data-type: Embed type. Default: `inline`
+ *   - data-width: The width in pixels of the original image.
+ *   - data-height: The height in pixels of the original image.
+ *   - data-autoplay: Video auto playback.
+ */
+#}
+<img{{ attributes }} src="{{ url }}">
diff --git a/video_embed_vidyard.libraries.yml b/video_embed_vidyard.libraries.yml
index 934c1b7..24cfcd7 100644
--- a/video_embed_vidyard.libraries.yml
+++ b/video_embed_vidyard.libraries.yml
@@ -3,3 +3,8 @@ styles:
   css:
     component:
       css/video_embed_vidyard.css: {}
+embed-api:
+  version: 4
+  header: true
+  js:
+    https://play.vidyard.com/embed/v4.js: { type: external, minified: true, attributes: { async: true } }
diff --git a/video_embed_vidyard.module b/video_embed_vidyard.module
new file mode 100644
index 0000000..7580b14
--- /dev/null
+++ b/video_embed_vidyard.module
@@ -0,0 +1,17 @@
+<?php
+
+/**
+ * Implements hook_theme().
+ */
+function video_embed_vidyard_theme() {
+  return [
+    'video_embed_iframe__vidyard' => [
+      'variables' => [
+        'url' => '',
+        'query' => [],
+        'attributes' => [],
+        'fragment' => '',
+      ],
+    ],
+  ];
+}