<x-embed :url="$libraryItem->value" />

composer.json

@@ -11,6 +11,7 @@
         "php": "^8.1",
         "akuechler/laravel-geoly": "^1.0",
         "archtechx/enums": "^0.3.1",
+        "bensampo/laravel-embed": "^1.4",
         "ebess/advanced-nova-media-library": "dev-master#2d7151d8b2159d28e1d73fcc7fe23992e327b7df",
         "ezadr/lnurl-php": "^1.0",
         "gonoware/laravel-maps": "^2.0",
@@ -29,6 +30,7 @@
         "nova/start": "*",
         "oneduo/nova-time-field": "^1.0",
         "podcastindex/podcastindex-php": "^1.0",
+        "pusher/pusher-php-server": "5.0.3",
         "qcod/laravel-gamify": "^1.0",
         "ralphjsmit/laravel-seo": "^1.2",
         "rappasoft/laravel-livewire-tables": "^2.8",
@@ -47,7 +49,6 @@
         "spatie/laravel-sluggable": "^3.4",
         "spatie/laravel-tags": "^4.3",
         "spatie/nova-tags-field": "^4.0",
-        "pusher/pusher-php-server": "5.0.3",
         "staudenmeir/eloquent-has-many-deep": "^1.7",
         "stijnvanouplines/blade-country-flags": "^1.0",
         "symfony/http-client": "^6.2",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "5052a8175f0211390b03e5afcaaea869",
+    "content-hash": "5c7a3f14cc5db305af3ba03901284623",
     "packages": [
         {
             "name": "akuechler/laravel-geoly",
@@ -164,6 +164,78 @@
             },
             "time": "2022-12-07T17:46:57+00:00"
         },
+        {
+            "name": "bensampo/laravel-embed",
+            "version": "v1.4.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/BenSampo/laravel-embed.git",
+                "reference": "d94dfe948f9edfc0a541067712918630a607a438"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/BenSampo/laravel-embed/zipball/d94dfe948f9edfc0a541067712918630a607a438",
+                "reference": "d94dfe948f9edfc0a541067712918630a607a438",
+                "shasum": ""
+            },
+            "require": {
+                "guzzlehttp/guzzle": "^6.3.1|^7.0",
+                "illuminate/contracts": "^7.25|^8.0|^9.0",
+                "illuminate/support": "^7.25|^8.0|^9.0",
+                "php": "^7.4.0|^8.0"
+            },
+            "require-dev": {
+                "laravel/framework": "^7.25|^8.75.0|^9.0",
+                "orchestra/testbench": "^5.0|^6.0",
+                "phpunit/phpunit": "^8.5.23|^9.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.0-dev"
+                },
+                "laravel": {
+                    "providers": [
+                        "BenSampo\\Embed\\EmbedServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "BenSampo\\Embed\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Ben Sampson",
+                    "homepage": "https://sampo.co.uk",
+                    "role": "Developer"
+                }
+            ],
+            "description": "Painless responsive embeds for videos, slideshows and more.",
+            "homepage": "https://github.com/bensampo/laravel-embed",
+            "keywords": [
+                "bensampo",
+                "embed",
+                "laravel",
+                "package"
+            ],
+            "support": {
+                "issues": "https://github.com/BenSampo/laravel-embed/issues",
+                "source": "https://github.com/BenSampo/laravel-embed/tree/v1.4.0"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/bensampo",
+                    "type": "github"
+                }
+            ],
+            "time": "2022-02-10T09:10:51+00:00"
+        },
         {
             "name": "bitwasp/bech32",
             "version": "v0.0.1",

resources/views/layouts/app.blade.php

@@ -35,6 +35,7 @@
     @vite(['resources/css/app.css', 'resources/js/app.js'])
     <!-- Styles -->
     <x-comments::styles/>
+    <x-embed-styles />
     @livewireStyles
     @mapstyles
     <style>

resources/views/layouts/guest.blade.php

@@ -32,6 +32,7 @@
     @mapscripts
     <wireui:scripts/>
     <x-comments::scripts/>
+    <x-embed-styles />
     @vite(['resources/css/app.css', 'resources/js/app.js'])
     <!-- Styles -->
     @livewireStyles

resources/views/livewire/news/intern-article-view.blade.php

@@ -91,10 +91,17 @@
                         class="prose md:prose-xl prose-invert mx-auto mt-5 text-gray-100 lg:col-start-1 lg:row-start-1 lg:max-w-none">
                         <div class="flex flex-col space-y-1">
                             @if($libraryItem->type !== 'markdown_article' && str($libraryItem->value)->contains('http'))
-                                <x-button lg amber :href="$libraryItem->value" target="_blank">
+                                @if($libraryItem->type === 'youtube_video')
-                                    <i class="fa fa-thin fa-book-open mr-2"></i>
+                                    <x-button lg amber :href="$libraryItem->value" target="_blank">
-                                    {{ __('Open') }}
+                                        <i class="fa fa-brand fa-youtube mr-2"></i>
-                                </x-button>
+                                        {{ __('Open on Youtube') }}
+                                    </x-button>
+                                @else
+                                    <x-button lg amber :href="$libraryItem->value" target="_blank">
+                                        <i class="fa fa-thin fa-book-open mr-2"></i>
+                                        {{ __('Open') }}
+                                    </x-button>
+                                @endif
                             @endif
                             @if($libraryItem->type === 'downloadable_file')
                                 <x-button lg amber :href="$libraryItem->getFirstMediaUrl('single_file')"
@@ -132,6 +139,12 @@
                             @endif
                         </div>
 
+                        @if($libraryItem->type === 'youtube_video')
+                            <div class="my-12">
+                                <x-embed :url="$libraryItem->value" />
+                            </div>
+                        @endif
+
                         @if($libraryItem->type === 'markdown_article')
                             <x-markdown>
                                 {!! $libraryItem->value !!}