Add autoPlay to YouTube and Vimeo services

README.md

@@ -66,6 +66,16 @@ By default most embedded services are shown at a ratio of `16:9`. Some services
 
 The aspect ratio is maintained at different viewport sizes.
 
+### Setting AutoPlay
+
+By default, this setting is set to `false`. If you want to set the autoplay to true, you can do so by passing in a boolean to the `auto-play` attribute.
+
+This feature is only supported by YouTube and Vimeo services.
+
+```html
+<x-embed url="https://www.youtube.com/watch?v=oHg5SJYRHA0" auto-play="true" />
+```
+
 ### Fallback
 
 If no service exists to handle the URL a fallback view is rendered. You can customize this by publishing the views and editing `/resources/views/vendor/embed/services/fallback.blade.php`.

resources/views/services/vimeo.blade.php

@@ -1,7 +1,7 @@
 <x-embed-responsive-wrapper :aspect-ratio="$aspectRatio">
-    <iframe 
+    <iframe
             aria-label="{{ $label }}"
-            src="https://player.vimeo.com/video/{{ $videoId }}@if($videoHash)?h={{ $videoHash}}@endif"
+            src="https://player.vimeo.com/video/{{ $videoId }}@if($videoHash)?h={{ $videoHash}}@endif{{$autoplay}}"
             frameborder="0"
             allow="autoplay; fullscreen"
             allowfullscreen

resources/views/services/youtube.blade.php

@@ -1,9 +1,9 @@
 <x-embed-responsive-wrapper :aspect-ratio="$aspectRatio">
     <iframe
         aria-label="foo {{ $label }}"
-        src="https://www.youtube-nocookie.com/embed/{{ $videoId }}"
+        src="https://www.youtube-nocookie.com/embed/{{ $videoId }}{{ $autoplay }}"
         frameborder="0"
-        allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
+        allow="accelerometer; encrypted-media; gyroscope; picture-in-picture; autoplay;"
         allowfullscreen
     ></iframe>
 </x-embed-responsive-wrapper>

src/ServiceBase.php

@@ -16,6 +16,8 @@ abstract class ServiceBase implements ServiceContract
 
     protected ?string $label;
 
+    protected ?bool $autoPlay;
+
     public function __construct(Url $url)
     {
         $this->url = $url;
@@ -52,6 +54,13 @@ public function setLabel(?string $label): ServiceContract
         return $this;
     }
 
+    public function setAutoPlay(?bool $autoPlay): ServiceContract
+    {
+        $this->autoPlay = $autoPlay ?? $this->defaultAutoPlay();
+
+        return $this;
+    }
+
     protected function viewName(): string
     {
         return $this->guessViewName();
@@ -67,6 +76,11 @@ protected function label(): string
         return $this->label ?? $this->defaultLabel();
     }
 
+    protected function autoPlay(): bool
+    {
+        return $this->autoPlay ?? $this->defaultAutoPlay();
+    }
+
     protected function defaultAspectRatio(): Ratio
     {
         return new Ratio('16:9');
@@ -77,6 +91,11 @@ protected function defaultLabel(): string
         return __('An embedded video');
     }
 
+    protected function defaultAutoPlay(): bool
+    {
+        return false;
+    }
+
     private function fullyQualifiedViewName(): string
     {
         return 'embed::services.' . $this->viewName();

src/ServiceContract.php

@@ -13,4 +13,5 @@ public function view(): View;
     public function cacheAndRender(): string;
     public function setAspectRatio(?Ratio $aspectRatio): ServiceContract;
     public function setLabel(?string $label): ServiceContract;
+    public function setAutoPlay(?bool $autoPlay): ServiceContract;
 }

src/Services/Vimeo.php

@@ -27,7 +27,8 @@ protected function parseUrl(): ?array
         if (array_key_exists(5, $match)) {
             return [
                 'videoId' => $match[5],
-                'videoHash' => isset($match[6]) ? $match[6] : NULL
+                'videoHash' => isset($match[6]) ? $match[6] : NULL,
+                'autoplay' => $this->autoPlay() ? '?autoplay=1' : NULL,
             ];
         }
 

src/Services/YouTube.php

@@ -16,6 +16,7 @@ protected function viewData(): array
     {
         return [
             'videoId' => $this->videoId(),
+            'autoplay' => $this->autoPlay() ? '?autoplay=1&mute=1' : NULL
         ];
     }
 

src/ViewComponents/EmbedViewComponent.php

@@ -15,12 +15,14 @@ class EmbedViewComponent extends Component
     protected Url $url;
     protected ?Ratio $aspectRatio;
     protected ?string $label;
+    protected ?bool $autoPlay;
 
-    public function __construct(string $url, string $aspectRatio = null, string $label = null)
+    public function __construct(string $url, string $aspectRatio = null, string $label = null, bool $autoPlay = false)
     {
         $this->url = new Url($url);
         $this->aspectRatio = $aspectRatio ? new Ratio($aspectRatio) : null;
         $this->label = $label;
+        $this->autoPlay = $autoPlay;
     }
 
     public function render(): string
@@ -34,6 +36,7 @@ public function render(): string
         return $this->service
             ->setAspectRatio($this->aspectRatio)
             ->setLabel($this->label)
+            ->setAutoPlay($this->autoPlay)
             ->cacheAndRender();
     }
 }