From cd134a7375a63c7d622769d93bdd54db97dc3854 Mon Sep 17 00:00:00 2001
From: Ahmad Afandi <ahmad.afandi85@gmail.com>
Date: Mon, 28 Sep 2026 15:44:34 +0700
Subject: [PATCH 1/2] support video dari provider seperti google drive dan
 youtube

---
 app/Enums/TipeMedia.php                       |  90 ++++
 .../Publikasi/GaleriController.php            |  32 +-
 app/Http/Middleware/SecurityHeaders.php       |   5 +-
 app/Http/Requests/GaleriRequest.php           |  31 +-
 app/Models/Galeri.php                         |  85 +++-
 app/Services/MediaLinkService.php             | 408 ++++++++++++++++++
 app/Support/CspPolicy.php                     | 129 ++++++
 app/ValueObjects/MediaLink.php                |  90 ++++
 ...000001_add_media_type_to_galeris_table.php |  36 ++
 public/js/custom.js                           |  75 ++++
 .../views/components/galeri-media.blade.php   |  42 ++
 .../views/publikasi/galeri/_form.blade.php    |  54 ++-
 .../views/publikasi/galeri/index.blade.php    |  13 +-
 .../galeri/parts/media-cell.blade.php         |   1 +
 .../Api/Frontend/GaleriControllerTest.php     | 120 ++++++
 tests/Feature/GaleriControllerTest.php        | 208 +++++++++
 tests/Feature/PublikasiGaleriPublikTest.php   |  65 +++
 tests/Unit/Models/GaleriTest.php              | 134 ++++++
 tests/Unit/Services/MediaLinkServiceTest.php  | 248 +++++++++++
 tests/Unit/Support/CspPolicyTest.php          |  53 +++
 .../views/pages/publikasi/galeri.blade.php    |  46 +-
 .../pages/publikasi/galeri_detail.blade.php   |  29 +-
 22 files changed, 1933 insertions(+), 61 deletions(-)
 create mode 100644 app/Enums/TipeMedia.php
 create mode 100644 app/Services/MediaLinkService.php
 create mode 100644 app/Support/CspPolicy.php
 create mode 100644 app/ValueObjects/MediaLink.php
 create mode 100644 database/migrations/2026_09_28_000001_add_media_type_to_galeris_table.php
 create mode 100644 resources/views/components/galeri-media.blade.php
 create mode 100644 resources/views/publikasi/galeri/parts/media-cell.blade.php
 create mode 100644 tests/Feature/Api/Frontend/GaleriControllerTest.php
 create mode 100644 tests/Feature/PublikasiGaleriPublikTest.php
 create mode 100644 tests/Unit/Models/GaleriTest.php
 create mode 100644 tests/Unit/Services/MediaLinkServiceTest.php
 create mode 100644 tests/Unit/Support/CspPolicyTest.php

diff --git a/app/Enums/TipeMedia.php b/app/Enums/TipeMedia.php
new file mode 100644
index 0000000000..ca0b7aadd2
--- /dev/null
+++ b/app/Enums/TipeMedia.php
@@ -0,0 +1,90 @@
+<?php
+
+/*
+ * File ini bagian dari:
+ *
+ * OpenDK
+ *
+ * Aplikasi dan source code ini dirilis berdasarkan lisensi GPL V3
+ *
+ * Hak Cipta 2017 - 2024 Perkumpulan Desa Digital Terbuka (https://opendesa.id)
+ *
+ * Dengan ini diberikan izin, secara gratis, kepada siapa pun yang mendapatkan salinan
+ * dari perangkat lunak ini dan file dokumentasi terkait ("Aplikasi Ini"), untuk diperlakukan
+ * tanpa batasan, termasuk hak untuk menggunakan, menyalin, mengubah dan/atau mendistribusikan,
+ * asal tunduk pada syarat berikut:
+ *
+ * Pemberitahuan hak cipta di atas dan pemberitahuan izin ini harus disertakan dalam
+ * setiap salinan atau bagian penting Aplikasi Ini. Barang siapa yang menghapus atau menghilangkan
+ * pemberitahuan ini melanggar ketentuan lisensi Aplikasi Ini.
+ *
+ * PERANGKAT LUNAK INI DISEDIAKAN "SEBAGAIMANA ADANYA", TANPA JAMINAN APA PUN, BAIK TERSURAT MAUPUN
+ * TERSIRAT. PENULIS ATAU PEMEGANG HAK CIPTA SAMA SEKALI TIDAK BERTANGGUNG JAWAB ATAS KLAIM, KERUSAKAN ATAU
+ * KEWAJIBAN ATAUPUN PENGGUNAAN ATAU LAINNYA TERKAIT APLIKASI INI.
+ *
+ * @package    OpenDK
+ * @author     Tim Pengembang OpenDesa
+ * @copyright  Hak Cipta 2017 - 2024 Perkumpulan Desa Digital Terbuka (https://opendesa.id)
+ * @license    http://www.gnu.org/licenses/gpl.html    GPL V3
+ * @link       https://github.com/OpenSID/opendk
+ */
+
+namespace App\Enums;
+
+use BenSampo\Enum\Enum;
+
+/**
+ * Tipe media galeri untuk media berbasis link (Google Drive, YouTube, file langsung).
+ *
+ * Menentukan bagaimana media ditampilkan pada web maupun admin:
+ * - image  : dirender sebagai <img>
+ * - video  : dirender sebagai <video> atau <iframe> preview
+ * - youtube: dirender sebagai <iframe> embed YouTube
+ * - unknown: hanya ditampilkan sebagai tautan biasa
+ */
+final class TipeMedia extends Enum
+{
+    /** @var string Media foto. */
+    public const Image = 'image';
+
+    /** @var string Media video. */
+    public const Video = 'video';
+
+    /** @var string Video YouTube, ditampilkan melalui iframe embed. */
+    public const Youtube = 'youtube';
+
+    /** @var string Link tidak dikenali sebagai media. */
+    public const Unknown = 'unknown';
+
+    /**
+     * Tipe media yang boleh dipilih manual oleh pengguna pada form galeri.
+     *
+     * @return array<string, string>
+     */
+    public static function selectable(): array
+    {
+        return [
+            self::Image => 'Foto',
+            self::Video => 'Video',
+            self::Youtube => 'YouTube',
+        ];
+    }
+
+    /**
+     * Daftar seluruh nilai tipe media yang valid.
+     *
+     * @return array<int, string>
+     */
+    public static function values(): array
+    {
+        return [self::Image, self::Video, self::Youtube, self::Unknown];
+    }
+
+    /**
+     * Cek apakah nilai yang diberikan merupakan tipe media yang valid.
+     */
+    public static function isValid(?string $value): bool
+    {
+        return $value !== null && in_array($value, self::values(), true);
+    }
+}
diff --git a/app/Http/Controllers/Publikasi/GaleriController.php b/app/Http/Controllers/Publikasi/GaleriController.php
index ee099435d9..604a22840a 100644
--- a/app/Http/Controllers/Publikasi/GaleriController.php
+++ b/app/Http/Controllers/Publikasi/GaleriController.php
@@ -35,6 +35,7 @@
 use App\Http\Requests\GaleriRequest;
 use App\Models\Album;
 use App\Models\Galeri;
+use App\Services\MediaLinkService;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Log;
 use Illuminate\Support\Facades\Session;
@@ -43,7 +44,6 @@
 
 class GaleriController extends Controller
 {
-
     public function index(Album $album)
     {
         $page_title = 'Album';
@@ -61,7 +61,7 @@ public function getDataGaleri(Request $request, Album $album)
                 ->addIndexColumn()
                 ->addColumn('aksi', function ($row) {
                     // $data['show_web'] = route('berita.detail', $row->slug);
-    
+
                     if (!auth()->guest()) {
                         $data['edit_url'] = auth()->user()->can('access.publikasi.galeri.edit') ? route('publikasi.galeri.edit', $row->id) : null;
                         $data['delete_url'] = auth()->user()->can('access.publikasi.galeri.delete') ? route('publikasi.galeri.destroy', $row->id) : null;
@@ -74,17 +74,22 @@ public function getDataGaleri(Request $request, Album $album)
 
                     return view('forms.aksi', $data);
                 })
+                ->addColumn('media', function (Galeri $row) {
+                    return view('publikasi.galeri.parts.media-cell', [
+                        'galeri' => $row,
+                    ]);
+                })
                 ->editColumn('status', function ($row) {
                     if ($row->status == 0) {
                         return '<span class="label label-danger">Tidak Aktif</span>';
-                    } else {
-                        return '<span class="label label-success">Aktif</span>';
                     }
+                        return '<span class="label label-success">Aktif</span>';
+
                 })
                 ->editColumn('dibuat', function ($row) {
                     return format_datetime($row->created_at);
                 })
-                ->rawColumns(['aksi', 'status', 'dibuat'])
+                ->rawColumns(['aksi', 'media', 'status', 'dibuat'])
                 ->make(true);
         }
     }
@@ -115,6 +120,7 @@ public function store(GaleriRequest $request)
             }
 
             $input['link'] = $input['jenis'] == 'file' ? null : ($input['link'] ?? null);
+            $input['media_type'] = $input['jenis'] == 'file' ? null : $this->detectMediaType($request);
             $input['album_id'] = Session::get('album_id');
 
             Galeri::create($input);
@@ -181,6 +187,7 @@ public function update(GaleriRequest $request, Galeri $galeri)
             }
 
             $input['link'] = ($input['jenis'] ?? null) == 'file' ? null : ($input['link'] ?? null);
+            $input['media_type'] = ($input['jenis'] ?? null) == 'file' ? null : $this->detectMediaType($request);
 
             $galeri->update($input);
         } catch (\Exception $e) {
@@ -212,4 +219,19 @@ public function destroy(Galeri $galeri)
 
         return redirect()->route('publikasi.galeri.index', Session::get('album_id'))->with('success', 'Galeri sukses dihapus!');
     }
+
+    /**
+     * Tentukan tipe media untuk galeri berbasis link.
+     *
+     * Pilihan manual pengguna selalu dipakai apa adanya. Bila tidak ada pilihan,
+     * tipe dideteksi dari link, dan hanya melakukan permintaan jaringan bila
+     * link-nya memang tidak memberi petunjuk (misalnya Google Drive).
+     */
+    protected function detectMediaType(GaleriRequest $request): string
+    {
+        return app(MediaLinkService::class)->detectType(
+            $request->input('link'),
+            $request->selectedMediaType()
+        );
+    }
 }
diff --git a/app/Http/Middleware/SecurityHeaders.php b/app/Http/Middleware/SecurityHeaders.php
index c7441b2932..275e8fe976 100644
--- a/app/Http/Middleware/SecurityHeaders.php
+++ b/app/Http/Middleware/SecurityHeaders.php
@@ -31,6 +31,7 @@
 
 namespace App\Http\Middleware;
 
+use App\Support\CspPolicy;
 use Closure;
 
 class SecurityHeaders
@@ -48,9 +49,7 @@ public function handle($request, Closure $next)
         $response = $next($request);
 
         if (app()->environment('production')) {
-            $localDomain = env('APP_URL', 'http://localhost');
-            $urlDatabaseGabungan = config('setting.api_server_database_gabungan');
-            $response->headers->set('Content-Security-Policy', "default-src 'self';script-src 'self' https://pantau.opensid.my.id/ https://cdnjs.cloudflare.com/ajax/libs/tinymce/ https://cdn.jsdelivr.net/npm/ https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js https://website-widgets.pages.dev/dist/sienna.min.js platform.twitter.com unpkg.com 'unsafe-inline' 'unsafe-eval';style-src 'self' https://www.tiny.cloud/ http://www.tinymce.com/css/codepen.min.css https://cdnjs.cloudflare.com/ajax/libs/tinymce/ https://cdn.jsdelivr.net/npm/ fonts.googleapis.com unpkg.com 'unsafe-inline';img-src 'self' * data: blob:;font-src 'self' https://cdnjs.cloudflare.com/ajax/libs/tinymce/ https://cdn.jsdelivr.net/npm/ fonts.gstatic.com data:;connect-src 'self' ".$urlDatabaseGabungan." https://pantau.opensid.my.id/ ;media-src 'self';frame-src 'self' blob: data: platform.twitter.com github.com *.youtube.com *.vimeo.com *.opensid.my.id;object-src 'self' blob:;frame-ancestors 'self';base-uri 'self';");
+            $response->headers->set('Content-Security-Policy', (new CspPolicy())->toHeader());
         }
 
         return $response;
diff --git a/app/Http/Requests/GaleriRequest.php b/app/Http/Requests/GaleriRequest.php
index 430ce60bc9..3d972ff236 100644
--- a/app/Http/Requests/GaleriRequest.php
+++ b/app/Http/Requests/GaleriRequest.php
@@ -2,8 +2,10 @@
 
 namespace App\Http\Requests;
 
+use App\Enums\TipeMedia;
 use App\Services\FileUploadService;
 use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Validation\Rule;
 
 class GaleriRequest extends FormRequest
 {
@@ -30,10 +32,37 @@ public function rules()
         return [
             'judul' => 'required|string|max:191',
             'jenis' => 'required|in:file,url',
-            'link' => $isUrl ? 'required|string|max:255' : 'nullable',
+            'link' => $isUrl ? 'required|string|max:255|url:http,https' : 'nullable',
+            'media_type' => [
+                'nullable',
+                Rule::in(array_keys(TipeMedia::selectable())),
+            ],
             'gambar' => (! $isUrl && $this->isMethod('post')) ? 'required|array' : 'nullable|array',
             'gambar.*' => $isUrl ? 'nullable' : 'required|image|mimes:jpg,jpeg,png' . $maxRule . '|valid_file',
             'status' => 'required',
         ];
     }
+
+    /**
+     * Get custom messages for validator errors.
+     *
+     * @return array<string, string>
+     */
+    public function messages()
+    {
+        return [
+            'link.url' => 'Link media harus berupa URL yang valid (diawali http:// atau https://).',
+            'media_type.in' => 'Tipe media harus salah satu dari: Foto, Video, atau YouTube.',
+        ];
+    }
+
+    /**
+     * Tipe media yang dipilih manual, atau null bila biarkan dideteksi otomatis.
+     */
+    public function selectedMediaType(): ?string
+    {
+        $mediaType = $this->input('media_type');
+
+        return is_string($mediaType) && $mediaType !== '' ? $mediaType : null;
+    }
 }
diff --git a/app/Models/Galeri.php b/app/Models/Galeri.php
index 47e7a4a935..d78cc7e75a 100644
--- a/app/Models/Galeri.php
+++ b/app/Models/Galeri.php
@@ -2,30 +2,26 @@
 
 namespace App\Models;
 
+use App\Enums\TipeMedia;
+use App\Observers\GaleriObserver;
+use App\Services\MediaLinkService;
+use App\ValueObjects\MediaLink;
 use Cviebrock\EloquentSluggable\Sluggable;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
-use App\Observers\GaleriObserver;
 
 class Galeri extends Model
 {
     use HasFactory, Sluggable;
 
-    /**
-     * Register model lifecycle hooks.
-     */
-    protected static function booted(): void
-    {
-        static::observe(GaleriObserver::class);
-    }
-
     protected $fillable = [
         'album_id',
         'judul',
         'gambar',
         'link',
         'jenis',
+        'media_type',
         'status',
     ];
 
@@ -34,7 +30,7 @@ protected static function booted(): void
         'status' => 'boolean',
     ];
 
-    protected $appends = ['gambar_path'];
+    protected $appends = ['gambar_path', 'media_type', 'media_url', 'media_embed_url'];
 
     /**
      * Return the sluggable configuration array for this model.
@@ -65,6 +61,7 @@ public function Album(): BelongsTo
 
     public function getGambarPathAttribute(): string
     {
+        // Media lokal selalu berupa foto, jadi cukup pakai berkas pertama.
         if (($this->attributes['jenis'] ?? null) === 'file' && ! empty($this->gambar)) {
             $gambar = is_array($this->gambar) ? ($this->gambar[0] ?? null) : $this->gambar;
             if ($gambar) {
@@ -72,12 +69,70 @@ public function getGambarPathAttribute(): string
             }
         }
 
-        if (($this->attributes['jenis'] ?? null) === 'url' && ! empty($this->link)) {
-            if (preg_match('/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/', $this->link, $matches)) {
-                return 'https://img.youtube.com/vi/' . $matches[1] . '/hqdefault.jpg';
-            }
+        return $this->media()->thumbnail ?? asset('/img/no-image.png');
+    }
+
+    /**
+     * Tipe media galeri: image, video, youtube, atau unknown.
+     *
+     * Untuk media berbasis link, kolom media_type hasil deteksi saat penyimpanan
+     * lebih dipercaya daripada menebak ulang dari URL, karena link Google Drive
+     * tidak memiliki ekstensi berkas sehingga jenis media tidak bisa dibaca
+     * langsung dari URL.
+     */
+    public function getMediaTypeAttribute(): string
+    {
+        if (($this->attributes['jenis'] ?? null) === 'file') {
+            return empty($this->gambar) ? TipeMedia::Unknown : TipeMedia::Image;
+        }
+
+        $stored = $this->attributes['media_type'] ?? null;
+
+        if (is_string($stored) && in_array($stored, [TipeMedia::Image, TipeMedia::Video, TipeMedia::Youtube], true)) {
+            return $stored;
         }
 
-        return asset('/img/no-image.png');
+        return $this->media()->type;
+    }
+
+    /**
+     * URL media yang bisa dimuat langsung oleh browser (src).
+     */
+    public function getMediaUrlAttribute(): ?string
+    {
+        if (($this->attributes['jenis'] ?? null) === 'file' && ! empty($this->gambar)) {
+            $gambar = is_array($this->gambar) ? ($this->gambar[0] ?? null) : $this->gambar;
+
+            return $gambar ? isThumbnail('publikasi/galeri/' . $gambar) : null;
+        }
+
+        return $this->media()->url;
+    }
+
+    /**
+     * URL untuk <iframe>, dipakai bila <video> tidak mendukung media tersebut.
+     */
+    public function getMediaEmbedUrlAttribute(): ?string
+    {
+        return $this->media()->embedUrl;
+    }
+
+    /**
+     * Register model lifecycle hooks.
+     */
+    protected static function booted(): void
+    {
+        static::observe(GaleriObserver::class);
+    }
+
+    /**
+     * Resolusi link galeri menjadi objek media siap tampil.
+     */
+    protected function media(): MediaLink
+    {
+        return app(MediaLinkService::class)->resolve(
+            $this->attributes['link'] ?? null,
+            $this->attributes['media_type'] ?? null
+        );
     }
 }
diff --git a/app/Services/MediaLinkService.php b/app/Services/MediaLinkService.php
new file mode 100644
index 0000000000..7765d6b72f
--- /dev/null
+++ b/app/Services/MediaLinkService.php
@@ -0,0 +1,408 @@
+<?php
+
+/*
+ * File ini bagian dari:
+ *
+ * OpenDK
+ *
+ * Aplikasi dan source code ini dirilis berdasarkan lisensi GPL V3
+ *
+ * Hak Cipta 2017 - 2024 Perkumpulan Desa Digital Terbuka (https://opendesa.id)
+ *
+ * Dengan ini diberikan izin, secara gratis, kepada siapa pun yang mendapatkan salinan
+ * dari perangkat lunak ini dan file dokumentasi terkait ("Aplikasi Ini"), untuk diperlakukan
+ * tanpa batasan, termasuk hak untuk menggunakan, menyalin, mengubah dan/atau mendistribusikan,
+ * asal tunduk pada syarat berikut:
+ *
+ * Pemberitahuan hak cipta di atas dan pemberitahuan izin ini harus disertakan dalam
+ * setiap salinan atau bagian penting Aplikasi Ini. Barang siapa yang menghapus atau menghilangkan
+ * pemberitahuan ini melanggar ketentuan lisensi Aplikasi Ini.
+ *
+ * PERANGKAT LUNAK INI DISEDIAKAN "SEBAGAIMANA ADANYA", TANPA JAMINAN APA PUN, BAIK TERSURAT MAUPUN
+ * TERSIRAT. PENULIS ATAU PEMEGANG HAK CIPTA SAMA SEKALI TIDAK BERTANGGUNG JAWAB ATAS KLAIM, KERUSAKAN ATAU
+ * KEWAJIBAN ATAUPUN PENGGUNAAN ATAU LAINNYA TERKAIT APLIKASI INI.
+ *
+ * @package    OpenDK
+ * @author     Tim Pengembang OpenDesa
+ * @copyright  Hak Cipta 2017 - 2024 Perkumpulan Desa Digital Terbuka (https://opendesa.id)
+ * @license    http://www.gnu.org/licenses/gpl.html    GPL V3
+ * @link       https://github.com/OpenSID/opendk
+ */
+
+namespace App\Services;
+
+use App\Enums\TipeMedia;
+use App\ValueObjects\MediaLink;
+use Illuminate\Http\Client\Response;
+use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Facades\Log;
+use Illuminate\Support\Str;
+
+/**
+ * Resolusi link media galeri menjadi informasi siap tampil.
+ *
+ * Menangani link Google Drive (foto maupun video), YouTube, Vimeo, serta
+ * file foto/video yang dihosting langsung. Media tidak diunduh ke server,
+ * melainkan dinormalkan menjadi URL yang bisa dimuat langsung oleh browser.
+ */
+class MediaLinkService
+{
+    /** @var array<int, string> Ekstensi foto yang dikenali. */
+    protected const IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'avif', 'svg'];
+
+    /** @var array<int, string> Ekstensi video yang dikenali. */
+    protected const VIDEO_EXTENSIONS = ['mp4', 'webm', 'ogv', 'ogg', 'mov', 'm4v', 'mkv', 'avi'];
+
+    /**
+     * Resolusi link menjadi objek media tanpa melakukan permintaan jaringan.
+     *
+     * Parameter $hint adalah tipe media yang dipilih manual oleh pengguna.
+     * Hint dipakai hanya bila link sendiri tidak memberikan petunjuk yang jelas,
+     * sehingga pilihan pengguna tidak dapat menimpa provider yang pasti
+     * (misalnya YouTube tetap dianggap YouTube).
+     *
+     * @param  string|null  $url  Link media yang dimasukkan pengguna
+     * @param  string|null  $hint  Tipe media pilihan manual (image/video/youtube)
+     */
+    public function resolve(?string $url, ?string $hint = null): MediaLink
+    {
+        $url = is_string($url) ? trim($url) : '';
+
+        if ($url === '' || ! $this->isHttpUrl($url)) {
+            return MediaLink::unknown();
+        }
+
+        if (($youtubeId = $this->youtubeId($url)) !== null) {
+            return new MediaLink(
+                type: TipeMedia::Youtube,
+                id: $youtubeId,
+                url: $url,
+                embedUrl: 'https://www.youtube.com/embed/' . $youtubeId,
+                thumbnail: 'https://img.youtube.com/vi/' . $youtubeId . '/hqdefault.jpg',
+            );
+        }
+
+        if (($vimeoId = $this->vimeoId($url)) !== null) {
+            return new MediaLink(
+                type: TipeMedia::Video,
+                id: $vimeoId,
+                url: $url,
+                embedUrl: 'https://player.vimeo.com/video/' . $vimeoId,
+            );
+        }
+
+        if (($driveId = $this->googleDriveId($url)) !== null) {
+            return $this->resolveGoogleDrive($url, $driveId, $hint);
+        }
+
+        $extension = $this->extension($url);
+
+        if ($extension !== null && in_array($extension, self::IMAGE_EXTENSIONS, true)) {
+            return new MediaLink(TipeMedia::Image, null, $url, null, $url);
+        }
+
+        if ($extension !== null && in_array($extension, self::VIDEO_EXTENSIONS, true)) {
+            return new MediaLink(TipeMedia::Video, null, $url, null, null);
+        }
+
+        $hinted = $this->normalizeHint($hint);
+
+        if ($hinted !== null && $hinted !== TipeMedia::Unknown) {
+            return new MediaLink($hinted, null, $url, null, $hinted === TipeMedia::Image ? $url : null);
+        }
+
+        return MediaLink::unknown($url);
+    }
+
+    /**
+     * Tentukan tipe media, dengan melakukan probing HTTP bila link tidak informatif.
+     *
+     * @param  string|null  $url  Link media
+     * @param  string|null  $hint  Tipe media pilihan manual; bila diisi, probing dilewati
+     */
+    public function detectType(?string $url, ?string $hint = null): string
+    {
+        $hinted = $this->normalizeHint($hint);
+        $resolved = $this->resolve($url, $hint);
+
+        // Tautan Google Drive tidak memuat ekstensi berkas, sehingga "image" di sana
+        // hanya asumsi dan harus dipastikan lewat pemeriksaan HTTP. Tanpa ini, video
+        // Google Drive akan salah diperlakukan sebagai foto dan gagal ditampilkan.
+        $needsProbe = $resolved->type === TipeMedia::Unknown
+            || ($resolved->type === TipeMedia::Image && $this->isGoogleDrive((string) $url));
+
+        if (! $needsProbe) {
+            return $resolved->type;
+        }
+
+        if ($hinted !== null) {
+            return $hinted;
+        }
+
+        return $this->probe($url) ?? $resolved->type;
+    }
+
+    /**
+     * Deteksi tipe media lewat HTTP HEAD, hanya untuk link yang tidak punya petunjuk.
+     *
+     * @return string|null Tipe media, atau null bila link tidak dapat diperiksa sama sekali
+     *                     (URL tidak valid, request gagal, atau timeout)
+     */
+    public function probe(?string $url): ?string
+    {
+        $url = is_string($url) ? trim($url) : '';
+
+        if ($url === '' || ! $this->isHttpUrl($url)) {
+            return null;
+        }
+
+        // Google Drive hanya-serving halaman HTML pada /view, jadi periksa file langsungnya.
+        $target = $this->isGoogleDrive($url) ? $this->googleDriveDownloadUrl($this->googleDriveId($url) ?? '') : $url;
+
+        if ($target === null) {
+            return null;
+        }
+
+        try {
+            $response = Http::timeout(5)
+                ->withOptions(['allow_redirects' => ['max' => 3]])
+                ->head($target);
+
+            if (! $response->successful()) {
+                return null;
+            }
+
+            return $this->typeFromResponse($response);
+        } catch (\Throwable $e) {
+            Log::debug('Gagal memeriksa tipe media dari link.', [
+                'url' => $url,
+                'error' => $e->getMessage(),
+            ]);
+
+            return null;
+        }
+    }
+
+    /**
+     * Bangun URL preview Google Drive untuk media video.
+     */
+    public function googleDrivePreviewUrl(string $fileId): string
+    {
+        return 'https://drive.google.com/file/d/' . $fileId . '/preview';
+    }
+
+    /**
+     * Bangun URL unduh langsung Google Drive untuk media video.
+     */
+    public function googleDriveDownloadUrl(?string $fileId): ?string
+    {
+        return $fileId === null
+            ? null
+            : 'https://drive.google.com/uc?export=download&id=' . $fileId;
+    }
+
+    /**
+     * Bangun URL tampil langsung (untuk foto) Google Drive.
+     */
+    public function googleDriveViewUrl(string $fileId): string
+    {
+        return 'https://drive.google.com/uc?export=view&id=' . $fileId;
+    }
+
+    /**
+     * Resolusi link Google Drive menjadi media siap tampil.
+     */
+    protected function resolveGoogleDrive(string $originalUrl, string $fileId, ?string $hint): MediaLink
+    {
+        $hint = $this->normalizeHint($hint);
+        $isVideo = $hint === TipeMedia::Video;
+
+        if ($isVideo) {
+            return new MediaLink(
+                type: TipeMedia::Video,
+                id: $fileId,
+                url: $this->googleDriveDownloadUrl($fileId),
+                embedUrl: $this->googleDrivePreviewUrl($fileId),
+            );
+        }
+
+        return new MediaLink(
+            type: TipeMedia::Image,
+            id: $fileId,
+            url: $this->googleDriveViewUrl($fileId),
+            thumbnail: $this->googleDriveViewUrl($fileId),
+        );
+    }
+
+    /**
+     * Ambil ID video YouTube dari berbagai format link.
+     */
+    protected function youtubeId(string $url): ?string
+    {
+        $host = strtolower((string) parse_url($url, PHP_URL_HOST));
+        $path = (string) parse_url($url, PHP_URL_PATH);
+
+        if ($host === 'youtu.be') {
+            return $this->trimId(ltrim($path, '/'));
+        }
+
+        if (! in_array($host, ['youtube.com', 'www.youtube.com', 'm.youtube.com', 'music.youtube.com', 'youtube-nocookie.com', 'www.youtube-nocookie.com'], true)) {
+            return null;
+        }
+
+        if (preg_match('~^/(?:embed|shorts|live|v)/([^/?&#]+)~', $path, $matches) === 1) {
+            return $this->trimId($matches[1]);
+        }
+
+        parse_str((string) parse_url($url, PHP_URL_QUERY), $query);
+
+        if (isset($query['v']) && is_string($query['v'])) {
+            return $this->trimId($query['v']);
+        }
+
+        return null;
+    }
+
+    /**
+     * Ambil ID video Vimeo dari link vimeo.com.
+     */
+    protected function vimeoId(string $url): ?string
+    {
+        $host = strtolower((string) parse_url($url, PHP_URL_HOST));
+        $path = trim((string) parse_url($url, PHP_URL_PATH), '/');
+
+        if (! in_array($host, ['vimeo.com', 'www.vimeo.com', 'player.vimeo.com'], true)) {
+            return null;
+        }
+
+        if (preg_match('#(?:^|/)(?:video/)?(\d+)#', $path, $matches) === 1) {
+            return $matches[1];
+        }
+
+        return null;
+    }
+
+    /**
+     * Ambil file ID Google Drive dari berbagai format link.
+     */
+    protected function googleDriveId(string $url): ?string
+    {
+        $host = strtolower((string) parse_url($url, PHP_URL_HOST));
+
+        if (! $this->isGoogleDrive($url)) {
+            return null;
+        }
+
+        $path = (string) parse_url($url, PHP_URL_PATH);
+        $query = [];
+        parse_str((string) parse_url($url, PHP_URL_QUERY), $query);
+
+        if (preg_match('~/(?:file/)?d/([^/?]+)~', $path, $matches) === 1) {
+            return $this->trimId($matches[1]);
+        }
+
+        // docs.google.com hanya punya viewer untuk berkas, parameter ?id= dipakai form editor.
+        if ($host !== 'docs.google.com' && isset($query['id']) && is_string($query['id']) && $query['id'] !== '') {
+            return $this->trimId($query['id']);
+        }
+
+        return null;
+    }
+
+    /**
+     * Cek apakah host berasal dari Google Drive / Google Docs viewer.
+     */
+    protected function isGoogleDrive(string $url): bool
+    {
+        $host = strtolower((string) parse_url($url, PHP_URL_HOST));
+
+        return in_array($host, ['drive.google.com', 'docs.google.com'], true)
+            || str_ends_with($host, '.drive.google.com');
+    }
+
+    /**
+     * Ekstrak tipe media dari respons HTTP.
+     *
+     * @return string Tipe media, atau TipeMedia::Unknown bila respons tidak membocorkan jenis berkasnya
+     */
+    protected function typeFromResponse(Response $response): string
+    {
+        $contentType = strtolower(trim(explode(';', (string) $response->header('Content-Type'))[0]));
+
+        if (str_starts_with($contentType, 'image/')) {
+            return TipeMedia::Image;
+        }
+
+        if (str_starts_with($contentType, 'video/')) {
+            return TipeMedia::Video;
+        }
+
+        // Google Drive sering mengirim application/octet-stream, andalkan nama berkas.
+        $disposition = (string) $response->header('Content-Disposition');
+
+        if (preg_match('/filename="?([^";]+)"?/i', $disposition, $matches) === 1) {
+            $extension = $this->extension($matches[1]);
+
+            if ($extension !== null && in_array($extension, self::VIDEO_EXTENSIONS, true)) {
+                return TipeMedia::Video;
+            }
+
+            if ($extension !== null && in_array($extension, self::IMAGE_EXTENSIONS, true)) {
+                return TipeMedia::Image;
+            }
+        }
+
+        return TipeMedia::Unknown;
+    }
+
+    /**
+     * Ekstensi berkas lowercase dari URL, tanpa titik sama sekali.
+     */
+    protected function extension(string $value): ?string
+    {
+        $path = parse_url($value, PHP_URL_PATH);
+
+        if (! is_string($path) || ! str_contains($path, '.')) {
+            return null;
+        }
+
+        $extension = strtolower((string) pathinfo($path, PATHINFO_EXTENSION));
+
+        return $extension === '' ? null : $extension;
+    }
+
+    /**
+     * Normalisasi pilihan tipe media manual dari pengguna.
+     */
+    protected function normalizeHint(?string $hint): ?string
+    {
+        $hint = is_string($hint) ? strtolower(trim($hint)) : '';
+
+        if ($hint === '' || $hint === TipeMedia::Unknown || $hint === 'auto') {
+            return null;
+        }
+
+        return TipeMedia::isValid($hint) ? $hint : null;
+    }
+
+    /**
+     * Pastikan nilai adalah URL http(s) yang valid.
+     */
+    protected function isHttpUrl(string $url): bool
+    {
+        $scheme = strtolower((string) parse_url($url, PHP_URL_SCHEME));
+        $host = (string) parse_url($url, PHP_URL_HOST);
+
+        return in_array($scheme, ['http', 'https'], true) && $host !== '' && filter_var($url, FILTER_VALIDATE_URL) !== false;
+    }
+
+    /**
+     * Bersihkan identifier agar aman dipakai di URL.
+     */
+    protected function trimId(string $id): ?string
+    {
+        $id = trim(Str::before(trim($id), '/'));
+
+        return preg_match('/^[A-Za-z0-9_-]{3,128}$/', $id) === 1 ? $id : null;
+    }
+}
diff --git a/app/Support/CspPolicy.php b/app/Support/CspPolicy.php
new file mode 100644
index 0000000000..bdd2d68dbf
--- /dev/null
+++ b/app/Support/CspPolicy.php
@@ -0,0 +1,129 @@
+<?php
+
+/*
+ * File ini bagian dari:
+ *
+ * OpenDK
+ *
+ * Aplikasi dan source code ini dirilis berdasarkan lisensi GPL V3
+ *
+ * Hak Cipta 2017 - 2024 Perkumpulan Desa Digital Terbuka (https://opendesa.id)
+ *
+ * Dengan ini diberikan izin, secara gratis, kepada siapa pun yang mendapatkan salinan
+ * dari perangkat lunak ini dan file dokumentasi terkait ("Aplikasi Ini"), untuk diperlakukan
+ * tanpa batasan, termasuk hak untuk menggunakan, menyalin, mengubah dan/atau mendistribusikan,
+ * asal tunduk pada syarat berikut:
+ *
+ * Pemberitahuan hak cipta di atas dan pemberitahuan izin ini harus disertakan dalam
+ * setiap salinan atau bagian penting Aplikasi Ini. Barang siapa yang menghapus atau menghilangkan
+ * pemberitahuan ini melanggar ketentuan lisensi Aplikasi Ini.
+ *
+ * PERANGKAT LUNAK INI DISEDIAKAN "SEBAGAIMANA ADANYA", TANPA JAMINAN APA PUN, BAIK TERSURAT MAUPUN
+ * TERSIRAT. PENULIS ATAU PEMEGANG HAK CIPTA SAMA SEKALI TIDAK BERTANGGUNG JAWAB ATAS KLAIM, KERUSAKAN ATAU
+ * KEWAJIBAN ATAUPUN PENGGUNAAN ATAU LAINNYA TERKAIT APLIKASI INI.
+ *
+ * @package    OpenDK
+ * @author     Tim Pengembang OpenDesa
+ * @copyright  Hak Cipta 2017 - 2024 Perkumpulan Desa Digital Terbuka (https://opendesa.id)
+ * @license    http://www.gnu.org/licenses/gpl.html    GPL V3
+ * @link       https://github.com/OpenSID/opendk
+ */
+
+namespace App\Support;
+
+/**
+ * Content Security Policy untuk seluruh halaman.
+ *
+ * Dipisahkan dari middleware agar tiap directive bisa diuji secara terpisah
+ * dan mudah ditambahkan ketika ada sumber daya baru yang diizinkan.
+ */
+class CspPolicy
+{
+    /**
+     * Directive CSP beserta sumber daya yang diizinkan.
+     *
+     * media-src mengizinkan https: karena galeri dapat memutar video dari
+     * hosting situs desa mana pun, dan frame-src mengizinkan penyedia video
+     * yang hanya menyediakan preview lewat iframe (Google Drive, YouTube, Vimeo).
+     *
+     * @var array<string, array<int, string>>
+     */
+    protected const DIRECTIVES = [
+        'default-src' => ["'self'"],
+        'script-src' => [
+            "'self'",
+            'https://pantau.opensid.my.id/',
+            'https://cdnjs.cloudflare.com/ajax/libs/tinymce/',
+            'https://cdn.jsdelivr.net/npm/',
+            'https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js',
+            'https://website-widgets.pages.dev/dist/sienna.min.js',
+            'platform.twitter.com',
+            'unpkg.com',
+            "'unsafe-inline'",
+            "'unsafe-eval'",
+        ],
+        'style-src' => [
+            "'self'",
+            'https://www.tiny.cloud/',
+            'http://www.tinymce.com/css/codepen.min.css',
+            'https://cdnjs.cloudflare.com/ajax/libs/tinymce/',
+            'https://cdn.jsdelivr.net/npm/',
+            'fonts.googleapis.com',
+            'unpkg.com',
+            "'unsafe-inline'",
+        ],
+        'img-src' => ["'self'", '*', 'data:', 'blob:'],
+        'font-src' => [
+            "'self'",
+            'https://cdnjs.cloudflare.com/ajax/libs/tinymce/',
+            'https://cdn.jsdelivr.net/npm/',
+            'fonts.gstatic.com',
+            'data:',
+        ],
+        'media-src' => ["'self'", 'https:', 'blob:'],
+        'frame-src' => [
+            "'self'",
+            'blob:',
+            'data:',
+            'platform.twitter.com',
+            'github.com',
+            '*.youtube.com',
+            '*.vimeo.com',
+            'https://drive.google.com',
+            '*.opensid.my.id',
+        ],
+        'object-src' => ["'self'", 'blob:'],
+        'frame-ancestors' => ["'self'"],
+        'base-uri' => ["'self'"],
+    ];
+
+    /**
+     * Nilai seluruh directive dalam format header CSP.
+     */
+    public function toHeader(): string
+    {
+        $directives = self::DIRECTIVES;
+
+        $directives['connect-src'] = array_values(array_filter(array_merge(
+            ["'self'"],
+            [config('setting.api_server_database_gabungan')],
+            ['https://pantau.opensid.my.id/']
+        )));
+
+        $parts = [];
+
+        foreach ($directives as $name => $sources) {
+            $parts[] = $name . ' ' . implode(' ', $sources);
+        }
+
+        return implode(';', $parts) . ';';
+    }
+
+    /**
+     * Nilai satu directive, mis. media-src.
+     */
+    public function directive(string $name): string
+    {
+        return implode(' ', self::DIRECTIVES[$name] ?? []);
+    }
+}
diff --git a/app/ValueObjects/MediaLink.php b/app/ValueObjects/MediaLink.php
new file mode 100644
index 0000000000..a54cba88e2
--- /dev/null
+++ b/app/ValueObjects/MediaLink.php
@@ -0,0 +1,90 @@
+<?php
+
+/*
+ * File ini bagian dari:
+ *
+ * OpenDK
+ *
+ * Aplikasi dan source code ini dirilis berdasarkan lisensi GPL V3
+ *
+ * Hak Cipta 2017 - 2024 Perkumpulan Desa Digital Terbuka (https://opendesa.id)
+ *
+ * Dengan ini diberikan izin, secara gratis, kepada siapa pun yang mendapatkan salinan
+ * dari perangkat lunak ini dan file dokumentasi terkait ("Aplikasi Ini"), untuk diperlakukan
+ * tanpa batasan, termasuk hak untuk menggunakan, menyalin, mengubah dan/atau mendistribusikan,
+ * asal tunduk pada syarat berikut:
+ *
+ * Pemberitahuan hak cipta di atas dan pemberitahuan izin ini harus disertakan dalam
+ * setiap salinan atau bagian penting Aplikasi Ini. Barang siapa yang menghapus atau menghilangkan
+ * pemberitahuan ini melanggar ketentuan lisensi Aplikasi Ini.
+ *
+ * PERANGKAT LUNAK INI DISEDIAKAN "SEBAGAIMANA ADANYA", TANPA JAMINAN APA PUN, BAIK TERSURAT MAUPUN
+ * TERSIRAT. PENULIS ATAU PEMEGANG HAK CIPTA SAMA SEKALI TIDAK BERTANGGUNG JAWAB ATAS KLAIM, KERUSAKAN ATAU
+ * KEWAJIBAN ATAUPUN PENGGUNAAN ATAU LAINNYA TERKAIT APLIKASI INI.
+ *
+ * @package    OpenDK
+ * @author     Tim Pengembang OpenDesa
+ * @copyright  Hak Cipta 2017 - 2024 Perkumpulan Desa Digital Terbuka (https://opendesa.id)
+ * @license    http://www.gnu.org/licenses/gpl.html    GPL V3
+ * @link       https://github.com/OpenSID/opendk
+ */
+
+namespace App\ValueObjects;
+
+use App\Enums\TipeMedia;
+use JsonSerializable;
+
+/**
+ * Hasil resolusi sebuah link media.
+ *
+ * Objek ini dipakai oleh front-end (API) maupun Blade untuk menentukan
+ * elemen HTML mana yang harus dirender saat menampilkan galeri.
+ */
+final class MediaLink implements JsonSerializable
+{
+    /**
+     * @param  string  $type  Salah satu dari nilai {@see TipeMedia}
+     * @param  string|null  $id  Identifier media pada penyedia (YouTube/Vimeo/Drive), jika ada
+     * @param  string|null  $url  URL media yang bisa dimuat langsung (src)
+     * @param  string|null  $embedUrl  URL untuk <iframe> bila <video> tidak mendukung
+     * @param  string|null  $thumbnail  URL poster/thumbnail untuk pratinjau
+     */
+    public function __construct(
+        public readonly string $type = TipeMedia::Unknown,
+        public readonly ?string $id = null,
+        public readonly ?string $url = null,
+        public readonly ?string $embedUrl = null,
+        public readonly ?string $thumbnail = null,
+    ) {
+    }
+
+    /**
+     * Buat hasil resolusi kosong untuk link yang tidak valid.
+     */
+    public static function unknown(?string $url = null): self
+    {
+        return new self(TipeMedia::Unknown, null, $url, null, null);
+    }
+
+    /**
+     * Apakah media ini bisa ditampilkan langsung tanpa membuka tab baru.
+     */
+    public function isEmbeddable(): bool
+    {
+        return $this->embedUrl !== null || $this->thumbnail !== null || $this->url !== null;
+    }
+
+    /**
+     * @return array<string, string|null>
+     */
+    public function jsonSerialize(): array
+    {
+        return [
+            'type' => $this->type,
+            'id' => $this->id,
+            'url' => $this->url,
+            'embed_url' => $this->embedUrl,
+            'thumbnail' => $this->thumbnail,
+        ];
+    }
+}
diff --git a/database/migrations/2026_09_28_000001_add_media_type_to_galeris_table.php b/database/migrations/2026_09_28_000001_add_media_type_to_galeris_table.php
new file mode 100644
index 0000000000..fac7f624b2
--- /dev/null
+++ b/database/migrations/2026_09_28_000001_add_media_type_to_galeris_table.php
@@ -0,0 +1,36 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * Menambahkan kolom penanda tipe media (foto/video/youtube/unknown) untuk
+     * galeri berbasis link, karena link Google Drive tidak memiliki ekstensi
+     * sehingga jenis media tidak bisa ditentukan hanya dari URL.
+     */
+    public function up(): void
+    {
+        Schema::table('galeris', function (Blueprint $table) {
+            if (! Schema::hasColumn('galeris', 'media_type')) {
+                $table->string('media_type', 20)->nullable()->after('jenis')->comment('image|video|youtube|unknown untuk media berbasis link');
+            }
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('galeris', function (Blueprint $table) {
+            if (Schema::hasColumn('galeris', 'media_type')) {
+                $table->dropColumn('media_type');
+            }
+        });
+    }
+};
diff --git a/public/js/custom.js b/public/js/custom.js
index 69fe222324..b8e3af1af5 100644
--- a/public/js/custom.js
+++ b/public/js/custom.js
@@ -121,6 +121,81 @@ function generateDropdownYear(element) {
   }  
 }
 
+/**
+ * Render media galeri (foto, video, atau YouTube) menjadi HTML.
+ *
+ * Data galeri berasal dari API frontend dan sudah membawa:
+ * - media_type     : "image" | "video" | "youtube" | "unknown"
+ * - media_url      : URL yang bisa dimuat langsung (src)
+ * - media_embed_url: URL untuk <iframe> bila <video> tidak mendukung
+ * - gambar_path    : thumbnail/pratinjau
+ *
+ * Opsi:
+ * - className  : kelas CSS untuk elemen pembungkus
+ * - imageStyle : gaya inline untuk elemen <img>
+ * - controls   : tampilkan kontrol pemutar video (default true)
+ * - autoplay   : mulai putar otomatis (default false)
+ * - preferNativeVideo : pakai <video> walau tersedia embed
+ */
+function renderGaleriMedia(galeri, options) {
+  var opts = options || {};
+  var type = galeri && galeri.media_type ? galeri.media_type : "unknown";
+  var url = galeri ? galeri.media_url : null;
+  var embed = galeri ? galeri.media_embed_url : null;
+  var poster = (galeri && galeri.gambar_path) || "/img/no-image.png";
+  var label = galeri ? galeri.judul || "Media" : "Media";
+  var wrapperClass = opts.className ? " " + opts.className : "";
+  var imageStyle = opts.imageStyle || "width:100%;height:100%;object-fit:cover;";
+  var allowFullscreen =
+    ' allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen referrerpolicy="strict-origin-when-cross-origin"';
+
+  function escapeAttr(value) {
+    return String(value)
+      .replace(/&/g, "&amp;")
+      .replace(/"/g, "&quot;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;");
+  }
+
+  var html = "";
+
+  if (type === "youtube" && embed) {
+    // YouTube hanya mengizinkan pemutaran lewat iframe.
+    html =
+      '<div class="embed-responsive embed-responsive-16by9' + wrapperClass + '">' +
+      '<iframe class="embed-responsive-item" src="' + escapeAttr(embed) + '" title="' + escapeAttr(label) + '"' + allowFullscreen + "></iframe>" +
+      "</div>";
+  } else if (type === "video" && embed && !opts.preferNativeVideo) {
+    // Google Drive dan Vimeo tidak mendukung Range Request, jadi pakai preview resmi.
+    html =
+      '<div class="embed-responsive embed-responsive-16by9' + wrapperClass + '">' +
+      '<iframe class="embed-responsive-item" src="' + escapeAttr(embed) + '" title="' + escapeAttr(label) + '"' + allowFullscreen + "></iframe>" +
+      "</div>";
+  } else if (type === "video" && url) {
+    html =
+      '<video src="' + escapeAttr(url) + '"' + (opts.controls === false ? "" : " controls") + ' preload="metadata"' + (opts.autoplay ? " autoplay" : "") + ' playsinline style="width:100%;height:100%;object-fit:contain;background:#000;"' + wrapperClass + "></video>";
+  } else if (type === "image" && url) {
+    html =
+      '<img src="' + escapeAttr(url) + '" alt="' + escapeAttr(label) + '" loading="lazy" style="' + imageStyle + '"' + wrapperClass +
+      ' onerror="this.onerror=null;this.src=\'/img/no-image.png\';">';
+  } else {
+    html =
+      '<div class="' + (opts.className || "") + '">' +
+      '<img src="' + escapeAttr(poster) + '" alt="' + escapeAttr(label) + '" loading="lazy" style="' + imageStyle + '">' +
+      "</div>";
+  }
+
+  return html;
+}
+
+/**
+ * Tandai galeri yang berupa video/YouTube agar tema bisa menampilkan ikon putar.
+ */
+function isGaleriPlayable(galeri) {
+  var type = galeri && galeri.media_type ? galeri.media_type : "unknown";
+  return type === "video" || type === "youtube";
+}
+
 //drop down menu
 $(".drop-down").hover(function () {
   $(".dropdown-menu").addClass("display-on");
diff --git a/resources/views/components/galeri-media.blade.php b/resources/views/components/galeri-media.blade.php
new file mode 100644
index 0000000000..57e426daeb
--- /dev/null
+++ b/resources/views/components/galeri-media.blade.php
@@ -0,0 +1,42 @@
+@props(['galeri', 'variant' => 'thumb'])
+
+@use(App\Enums\TipeMedia)
+
+@php
+    $type = $galeri->media_type;
+    $url = $galeri->media_url;
+    $embed = $galeri->media_embed_url;
+    $poster = $galeri->gambar_path ?: asset('/img/no-image.png');
+    $isFull = $variant === 'full';
+    $isYoutube = $type === TipeMedia::Youtube;
+    $isVideo = in_array($type, [TipeMedia::Video, TipeMedia::Youtube], true);
+@endphp
+
+<div class="galeri-media" data-media-type="{{ $type }}">
+    @if ($isFull && $isYoutube && $embed)
+        {{-- Embed YouTube memakai iframe karena YouTube tidak mengizinkan pemutaran langsung. --}}
+        <div class="embed-responsive embed-responsive-16by9">
+            <iframe class="embed-responsive-item" src="{{ $embed }}" title="{{ $galeri->judul }}" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen referrerpolicy="strict-origin-when-cross-origin"></iframe>
+        </div>
+    @elseif ($isFull && $type === TipeMedia::Video && $embed)
+        {{-- Google Drive/Vimeo tidak mendukung Range Request, jadi pakai preview resmi. --}}
+        <div class="embed-responsive embed-responsive-16by9">
+            <iframe class="embed-responsive-item" src="{{ $embed }}" title="{{ $galeri->judul }}" allow="autoplay" allowfullscreen referrerpolicy="strict-origin-when-cross-origin"></iframe>
+        </div>
+    @elseif ($isFull && $type === TipeMedia::Video && $url)
+        <video src="{{ $url }}" controls preload="metadata" style="width:100%;max-height:70vh;background:#000;border-radius:4px;">
+            Browser Anda tidak mendukung pemutaran video. <a href="{{ $url }}">Unduh video</a>.
+        </video>
+    @elseif ($type === TipeMedia::Image && $url)
+        <img src="{{ $url }}" alt="{{ $galeri->judul }}" loading="lazy" style="{{ $isFull ? 'width:100%;height:auto;border-radius:4px;' : 'max-height:60px;max-width:90px;object-fit:contain;border-radius:3px;' }}" onerror="this.src='{{ asset('/img/no-image.png') }}'">
+    @else
+        <img src="{{ $poster }}" alt="{{ $galeri->judul }}" loading="lazy" style="{{ $isFull ? 'width:100%;height:auto;border-radius:4px;' : 'max-height:60px;max-width:90px;object-fit:contain;border-radius:3px;' }}" onerror="this.src='{{ asset('/img/no-image.png') }}'">
+    @endif
+
+    @if ($isVideo && !$isFull)
+        <span class="label label-primary galeri-media__badge">
+            <i class="fa {{ $isYoutube ? 'fa-youtube-play' : 'fa-play-circle' }}"></i>
+            {{ $isYoutube ? 'YouTube' : 'Video' }}
+        </span>
+    @endif
+</div>
diff --git a/resources/views/publikasi/galeri/_form.blade.php b/resources/views/publikasi/galeri/_form.blade.php
index 736a6f6a50..3544c27911 100644
--- a/resources/views/publikasi/galeri/_form.blade.php
+++ b/resources/views/publikasi/galeri/_form.blade.php
@@ -1,3 +1,5 @@
+@use(App\Enums\TipeMedia)
+
 <div class="row">
     <div class="col-md-9">
         <div class="box box-primary">
@@ -24,16 +26,54 @@
                 <div class="form-group" id="view-url">
                     <label for="url" class="control-label">URL <span class="required text-danger">*</span></label>
 
-                    {!! html()->text('link')->class('form-control')->value(old('link', isset($galeri) ? $galeri->link : '')) !!}
+                    {!! html()->text('link')->class('form-control')->placeholder('https://drive.google.com/file/d/... atau https://youtube.com/watch?v=...')->value(old('link', isset($galeri) ? $galeri->link : '')) !!}
+
+                    <small class="help-block text-muted">
+                        Mendukung tautan Google Drive, YouTube, Vimeo, serta berkas foto/video yang dihosting langsung.
+                    </small>
 
                     @if ($errors->has('link'))
                         <span class="help-block" style="color:red">{{ $errors->first('link') }}</span>
                     @endif
                 </div>
-                <div class="form-group" id="image">
-                    <label class="control-label" for="file-galeri">Thumbnail @if(!isset($galeri) || empty($galeri->gambar))<span class="required text-danger">*</span>@endif</label>
+                <div class="form-group" id="view-media-type">
+                    <label for="media_type" class="control-label">Tipe Media</label>
 
-                    <input type="file" name="gambar[]" id="file-galeri" class="form-control" accept=".jpg,.jpeg,.png" multiple>
+                    {!! html()->select('media_type', array_merge(['' => 'Otomatis (deteksi sendiri)'], TipeMedia::selectable()))->class('form-control')->value(old('media_type', isset($galeri) ? $galeri->media_type : '')) !!}
+
+                    <small class="help-block text-muted">
+                        Pilih <b>Video</b> bila berkas Google Drive berisi video, karena jenis media
+                        tidak dapat dibaca langsung dari alamat tautannya.
+                    </small>
+
+                    @if ($errors->has('media_type'))
+                        <span class="help-block" style="color:red">{{ $errors->first('media_type') }}</span>
+                    @endif
+                </div>
+                <div class="form-group" id="media-link-preview">
+                    @if (isset($galeri) && $galeri->jenis === 'url' && $galeri->link)
+                        <label class="control-label">Pratinjau Media</label>
+                        <x-galeri-media :galeri="$galeri" variant="full" />
+                        <small class="help-block text-muted">
+                            Tautan asli: <a href="{{ $galeri->link }}" target="_blank" rel="noopener">{{ $galeri->link }}</a>
+                        </small>
+                    @endif
+                </div>
+                <div class="form-group" id="image">
+                    <label class="control-label" for="file-galeri">Thumbnail @if (!isset($galeri) || empty($galeri->gambar))
+                            <span class="required text-danger">*</span>
+                        @endif
+                    </label>
+
+                    <input
+                        type="file"
+                        name="gambar[]"
+                        id="file-galeri"
+                        class="form-control"
+                        accept=".jpg,.jpeg,.png"
+                        multiple
+                        data-testid="file-galeri"
+                    >
                     <x-upload-hint formats="JPG, JPEG, PNG" :limit-kb="1024" />
                     <br />
 
@@ -105,13 +145,19 @@ function cleanupObjectUrls() {
 
             function toggleUrlFields(type) {
                 var viewUrl = $('#view-url');
+                var viewMediaType = $('#view-media-type');
+                var mediaPreview = $('#media-link-preview');
                 var image = $('#image');
 
                 if (type == 'file') {
                     viewUrl.hide();
+                    viewMediaType.hide();
+                    mediaPreview.hide();
                     image.show();
                 } else {
                     viewUrl.show();
+                    viewMediaType.show();
+                    mediaPreview.show();
                     image.hide();
                 }
             }
diff --git a/resources/views/publikasi/galeri/index.blade.php b/resources/views/publikasi/galeri/index.blade.php
index 79c7e07803..da71ba9224 100644
--- a/resources/views/publikasi/galeri/index.blade.php
+++ b/resources/views/publikasi/galeri/index.blade.php
@@ -18,16 +18,17 @@
         <div class="box box-primary">
             <div class="box-header with-border">
                 @can('access.publikasi.galeri.create')
-                    <a href="{{ route('publikasi.galeri.create') }}" class="btn btn-primary btn-sm" judul="Tambah Data"><i class="fa fa-plus"></i>&ensp;Tambah</a>
+                    <a href="{{ route('publikasi.galeri.create') }}" class="btn btn-primary btn-sm" judul="Tambah Data" data-testid="btn-tambah"><i class="fa fa-plus"></i>&ensp;Tambah</a>
                 @endcan
-                <a href="{{ route('publikasi.album.index') }}" class="btn btn-info btn-sm" judul="Tambah Data"><i class="fa fa-arrow-left"></i>&ensp;Kembali ke Daftar Album</a>
+                <a href="{{ route('publikasi.album.index') }}" class="btn btn-info btn-sm" judul="Kembali ke Daftar Album" data-testid="btn-kembali"><i class="fa fa-arrow-left"></i>&ensp;Kembali ke Daftar Album</a>
             </div>
             <div class="box-body">
                 <div class="table-responsive">
-                    <table class="table table-striped table-bordered" id="galeri-table">
+                    <table class="table table-striped table-bordered" id="galeri-table" data-testid="table-galeri">
                         <thead>
                             <tr>
                                 <th style="max-width: 80px;">Aksi</th>
+                                <th style="max-width: 100px;">Media</th>
                                 <th>Nama Album</th>
                                 <th style="max-width: 100px;">Aktif</th>
                                 <th>Dimuat pada</th>
@@ -56,6 +57,12 @@ class: 'text-center',
                         searchable: false,
                         orderable: false
                     },
+                    {
+                        data: 'media',
+                        name: 'media',
+                        orderable: false,
+                        searchable: false
+                    },
                     {
                         data: 'judul',
                         name: 'judul'
diff --git a/resources/views/publikasi/galeri/parts/media-cell.blade.php b/resources/views/publikasi/galeri/parts/media-cell.blade.php
new file mode 100644
index 0000000000..658e0684ff
--- /dev/null
+++ b/resources/views/publikasi/galeri/parts/media-cell.blade.php
@@ -0,0 +1 @@
+<x-galeri-media :galeri="$galeri" variant="thumb" />
diff --git a/tests/Feature/Api/Frontend/GaleriControllerTest.php b/tests/Feature/Api/Frontend/GaleriControllerTest.php
new file mode 100644
index 0000000000..8e68c22efb
--- /dev/null
+++ b/tests/Feature/Api/Frontend/GaleriControllerTest.php
@@ -0,0 +1,120 @@
+<?php
+
+use App\Http\Middleware\Authenticate;
+use App\Http\Middleware\CompleteProfile;
+use App\Http\Middleware\GlobalShareMiddleware;
+use App\Models\Album;
+use App\Models\Galeri;
+use App\Models\SettingAplikasi;
+use Illuminate\Foundation\Testing\DatabaseTransactions;
+use Illuminate\Support\Facades\Cache;
+use Spatie\Permission\Middleware\PermissionMiddleware;
+use Spatie\Permission\Middleware\RoleMiddleware;
+
+/*
+|--------------------------------------------------------------------------
+| Galeri Frontend API
+|--------------------------------------------------------------------------
+|
+| Tema web merender galeri dari API, jadi API wajib mengembalikan informasi
+| media (tipe, URL, embed) agar foto maupun video berbasis link bisa
+| ditampilkan dengan benar.
+|
+*/
+
+uses(DatabaseTransactions::class);
+
+beforeEach(function () {
+    $this->withViewErrors([]);
+    $this->withoutMiddleware([
+        Authenticate::class,
+        RoleMiddleware::class,
+        PermissionMiddleware::class,
+        CompleteProfile::class,
+        GlobalShareMiddleware::class,
+    ]);
+
+    // Respons API di-cache; DatabaseTransactions membuat rollback pada tabel
+    // cache_keys sehingga cache dari test sebelumnya tidak bisa dihapus observer.
+    Cache::flush();
+
+    SettingAplikasi::updateOrCreate(
+        ['key' => 'sinkronisasi_database_gabungan'],
+        ['value' => '0']
+    );
+
+    $this->album = Album::factory()->create([
+        'judul' => 'Album Galeri Uji',
+        'slug' => 'album-galeri-uji',
+    ]);
+});
+
+function makeGaleri(array $attributes = []): Galeri
+{
+    return Galeri::create(array_merge([
+        'album_id' => test()->album->id,
+        'judul' => 'Galeri API',
+        'jenis' => 'url',
+        'status' => true,
+    ], $attributes));
+}
+
+it('returns media details for a google drive video', function () {
+    makeGaleri([
+        'judul' => 'Video Drive',
+        'link' => 'https://drive.google.com/file/d/1AbCdEf123/view',
+        'media_type' => 'video',
+    ]);
+
+    $response = $this->getJson('/api/frontend/v1/galeri?filter[status]=1&filter[album.slug]=album-galeri-uji');
+
+    $response->assertStatus(200);
+
+    $attributes = collect($response->json('data'))->firstWhere('attributes.judul', 'Video Drive')['attributes'];
+
+    expect($attributes['media_type'])->toBe('video')
+        ->and($attributes['media_embed_url'])->toBe('https://drive.google.com/file/d/1AbCdEf123/preview')
+        ->and($attributes['media_url'])->toBe('https://drive.google.com/uc?export=download&id=1AbCdEf123');
+});
+
+it('returns media details for a google drive photo', function () {
+    makeGaleri([
+        'judul' => 'Foto Drive',
+        'link' => 'https://drive.google.com/file/d/1AbCdEf123/view',
+        'media_type' => 'image',
+    ]);
+
+    $response = $this->getJson('/api/frontend/v1/galeri?filter[status]=1&filter[album.slug]=album-galeri-uji');
+
+    $attributes = collect($response->json('data'))->firstWhere('attributes.judul', 'Foto Drive')['attributes'];
+
+    expect($attributes['media_type'])->toBe('image')
+        ->and($attributes['media_url'])->toBe('https://drive.google.com/uc?export=view&id=1AbCdEf123')
+        ->and($attributes['gambar_path'])->toBe('https://drive.google.com/uc?export=view&id=1AbCdEf123');
+});
+
+it('returns an embed url and thumbnail for a youtube video', function () {
+    makeGaleri([
+        'judul' => 'Video YouTube',
+        'link' => 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+    ]);
+
+    $response = $this->getJson('/api/frontend/v1/galeri?filter[status]=1&filter[album.slug]=album-galeri-uji');
+
+    $attributes = collect($response->json('data'))->firstWhere('attributes.judul', 'Video YouTube')['attributes'];
+
+    expect($attributes['media_type'])->toBe('youtube')
+        ->and($attributes['media_embed_url'])->toBe('https://www.youtube.com/embed/dQw4w9WgXcQ')
+        ->and($attributes['gambar_path'])->toBe('https://img.youtube.com/vi/dQw4w9WgXcQ/hqdefault.jpg');
+});
+
+it('exposes the media keys for every galeri record', function () {
+    makeGaleri(['judul' => 'Tanpa Link', 'link' => null]);
+
+    $response = $this->getJson('/api/frontend/v1/galeri?filter[status]=1&filter[album.slug]=album-galeri-uji');
+
+    $attributes = collect($response->json('data'))->firstWhere('attributes.judul', 'Tanpa Link')['attributes'];
+
+    expect($attributes)->toHaveKeys(['media_type', 'media_url', 'media_embed_url', 'gambar_path'])
+        ->and($attributes['media_type'])->toBe('unknown');
+});
diff --git a/tests/Feature/GaleriControllerTest.php b/tests/Feature/GaleriControllerTest.php
index 0ad0d7dee4..efc672db51 100644
--- a/tests/Feature/GaleriControllerTest.php
+++ b/tests/Feature/GaleriControllerTest.php
@@ -6,6 +6,7 @@
 use App\Models\Galeri;
 use Illuminate\Foundation\Testing\DatabaseTransactions;
 use Illuminate\Http\UploadedFile;
+use Illuminate\Support\Facades\Http;
 use Illuminate\Support\Facades\Session;
 use Illuminate\Support\Facades\Storage;
 use Spatie\Permission\Middleware\PermissionMiddleware;
@@ -126,6 +127,213 @@
     expect($galeri->gambar)->toBeNull();
 });
 
+test('create a galeri with google drive video link', function () {
+    Http::fake(['*' => Http::response('', 200, ['Content-Type' => 'video/mp4'])]);
+    $album = Album::factory()->create();
+    Session::put('album_id', $album->id);
+
+    $data = [
+        'judul' => 'Video Kegiatan Google Drive',
+        'jenis' => 'url',
+        'link' => 'https://drive.google.com/file/d/1AbCdEf123/view?usp=sharing',
+        'status' => '1',
+    ];
+
+    $response = $this->post(route('publikasi.galeri.store'), $data);
+
+    $response->assertRedirect(route('publikasi.galeri.index', $album->id));
+    $response->assertSessionHas('success', 'Galeri berhasil disimpan!');
+
+    $galeri = Galeri::where('judul', 'Video Kegiatan Google Drive')->first();
+    expect($galeri)->not->toBeNull()
+        ->and($galeri->media_type)->toBe('video')
+        ->and($galeri->media_embed_url)->toBe('https://drive.google.com/file/d/1AbCdEf123/preview')
+        ->and($galeri->media_url)->toBe('https://drive.google.com/uc?export=download&id=1AbCdEf123');
+});
+
+test('create a galeri with google drive photo link', function () {
+    $album = Album::factory()->create();
+    Session::put('album_id', $album->id);
+
+    $data = [
+        'judul' => 'Foto Kegiatan Google Drive',
+        'jenis' => 'url',
+        'link' => 'https://drive.google.com/file/d/1AbCdEf123/view',
+        'status' => '1',
+    ];
+
+    $this->post(route('publikasi.galeri.store'), $data)
+        ->assertSessionHas('success', 'Galeri berhasil disimpan!');
+
+    $galeri = Galeri::where('judul', 'Foto Kegiatan Google Drive')->first();
+    expect($galeri)->not->toBeNull()
+        ->and($galeri->media_type)->toBe('image')
+        ->and($galeri->media_url)->toBe('https://drive.google.com/uc?export=view&id=1AbCdEf123');
+});
+
+test('manual media type overrides the automatic detection', function () {
+    Http::preventStrayRequests();
+    $album = Album::factory()->create();
+    Session::put('album_id', $album->id);
+
+    $data = [
+        'judul' => 'Video Pilihan Manual',
+        'jenis' => 'url',
+        'link' => 'https://drive.google.com/file/d/1AbCdEf123/view',
+        'media_type' => 'video',
+        'status' => '1',
+    ];
+
+    $this->post(route('publikasi.galeri.store'), $data)
+        ->assertSessionHas('success', 'Galeri berhasil disimpan!');
+
+    expect(Galeri::where('judul', 'Video Pilihan Manual')->first()->media_type)->toBe('video');
+});
+
+test('rejects a link that is not a valid url', function () {
+    $album = Album::factory()->create();
+    Session::put('album_id', $album->id);
+
+    $data = [
+        'judul' => 'Link Tidak Valid',
+        'jenis' => 'url',
+        'link' => 'bukan sebuah url',
+        'status' => '1',
+    ];
+
+    $response = $this->post(route('publikasi.galeri.store'), $data);
+
+    $response->assertSessionHasErrors('link');
+    $this->assertDatabaseMissing('galeris', ['judul' => 'Link Tidak Valid']);
+});
+
+test('rejects an unsupported manual media type', function () {
+    $album = Album::factory()->create();
+    Session::put('album_id', $album->id);
+
+    $data = [
+        'judul' => 'Tipe Media Ngawur',
+        'jenis' => 'url',
+        'link' => 'https://youtu.be/dQw4w9WgXcQ',
+        'media_type' => 'audio',
+        'status' => '1',
+    ];
+
+    $this->post(route('publikasi.galeri.store'), $data)
+        ->assertSessionHasErrors('media_type');
+
+    $this->assertDatabaseMissing('galeris', ['judul' => 'Tipe Media Ngawur']);
+});
+
+test('switching a galeri from file to link clears the stored image', function () {
+    Storage::fake('public');
+    $album = Album::factory()->create();
+    Session::put('album_id', $album->id);
+
+    Storage::disk('public')->put('publikasi/galeri/lama.jpg', 'lama');
+    $galeri = Galeri::create([
+        'album_id' => $album->id,
+        'judul' => 'Galeri Awal File',
+        'gambar' => ['lama.jpg'],
+        'jenis' => 'file',
+        'status' => true,
+    ]);
+
+    $data = [
+        'judul' => 'Galeri Jadi Link',
+        'jenis' => 'url',
+        'link' => 'https://youtu.be/dQw4w9WgXcQ',
+        'status' => '1',
+    ];
+
+    $this->put(route('publikasi.galeri.update', $galeri->id), $data)
+        ->assertSessionHas('success', 'Galeri berhasil diubah!');
+
+    $galeri->refresh();
+    expect($galeri->jenis)->toBe('url')
+        ->and($galeri->gambar)->toBeNull()
+        ->and($galeri->media_type)->toBe('youtube');
+
+    Storage::disk('public')->assertMissing('publikasi/galeri/lama.jpg');
+});
+
+test('switching a galeri from link to file clears the stored media type', function () {
+    $album = Album::factory()->create();
+    Session::put('album_id', $album->id);
+
+    $galeri = Galeri::create([
+        'album_id' => $album->id,
+        'judul' => 'Galeri Awal Link',
+        'jenis' => 'url',
+        'link' => 'https://youtu.be/dQw4w9WgXcQ',
+        'media_type' => 'youtube',
+        'status' => true,
+    ]);
+
+    $data = [
+        'judul' => 'Galeri Jadi File',
+        'jenis' => 'file',
+        'status' => '1',
+        'gambar' => [UploadedFile::fake()->image('baru.jpg', 600, 400)],
+    ];
+
+    $this->put(route('publikasi.galeri.update', $galeri->id), $data)
+        ->assertSessionHas('success', 'Galeri berhasil diubah!');
+
+    $galeri->refresh();
+    expect($galeri->jenis)->toBe('file')
+        ->and($galeri->link)->toBeNull()
+        ->and($galeri->media_type)->toBe('image');
+});
+
+test('display the galeri edit page with a link media preview', function () {
+    $album = Album::factory()->create();
+    Session::put('album_id', $album->id);
+
+    $galeri = Galeri::create([
+        'album_id' => $album->id,
+        'judul' => 'Galeri Link Video',
+        'jenis' => 'url',
+        'link' => 'https://drive.google.com/file/d/1AbCdEf123/view',
+        'media_type' => 'video',
+        'status' => true,
+    ]);
+
+    $response = $this->get(route('publikasi.galeri.edit', $galeri->id));
+
+    $response->assertStatus(200);
+    $response->assertViewIs('publikasi.galeri.edit');
+    $response->assertSee('id="media-link-preview"', false);
+    $response->assertSee('https://drive.google.com/file/d/1AbCdEf123/preview', false);
+    $response->assertSee('id="media_type"', false);
+});
+
+test('galeri datatable exposes a media column that renders link media', function () {
+    $album = Album::factory()->create();
+    Session::put('album_id', $album->id);
+
+    Galeri::create([
+        'album_id' => $album->id,
+        'judul' => 'Galeri DataTable',
+        'jenis' => 'url',
+        'link' => 'https://youtu.be/dQw4w9WgXcQ',
+        'status' => true,
+    ]);
+
+    $response = $this->getJson(route('publikasi.galeri.getdata', $album->id), [
+        'X-Requested-With' => 'XMLHttpRequest',
+    ]);
+
+    $response->assertStatus(200);
+    $row = collect($response->json('data'))->firstWhere('judul', 'Galeri DataTable');
+
+    expect($row)->not->toBeNull()
+        ->and(data_get($row, 'media_type'))->toBe('youtube')
+        ->and(data_get($row, 'media_embed_url'))->toBe('https://www.youtube.com/embed/dQw4w9WgXcQ')
+        ->and(data_get($row, 'gambar_path'))->toBe('https://img.youtube.com/vi/dQw4w9WgXcQ/hqdefault.jpg')
+        ->and(data_get($row, 'media'))->toContain('data-media-type="youtube"');
+});
+
 test('update a galeri without changing image preserves existing image', function () {
     Storage::fake('public');
     $album = Album::factory()->create();
diff --git a/tests/Feature/PublikasiGaleriPublikTest.php b/tests/Feature/PublikasiGaleriPublikTest.php
new file mode 100644
index 0000000000..46e94bd7c5
--- /dev/null
+++ b/tests/Feature/PublikasiGaleriPublikTest.php
@@ -0,0 +1,65 @@
+<?php
+
+use App\Models\Album;
+use App\Models\Galeri;
+use App\Models\SettingAplikasi;
+use Illuminate\Foundation\Testing\DatabaseTransactions;
+use Illuminate\Support\Facades\Cache;
+
+/*
+|--------------------------------------------------------------------------
+| Halaman Galeri Publik
+|--------------------------------------------------------------------------
+|
+| Tema web memuat media galeri lewat JavaScript, namun URL dasar media harus
+| benar-benar valid agar gambar tidak gagal dimuat di browser.
+|
+*/
+
+uses(DatabaseTransactions::class);
+
+beforeEach(function () {
+    SettingAplikasi::updateOrCreate(
+        ['key' => 'sinkronisasi_database_gabungan'],
+        ['value' => '0']
+    );
+
+    Cache::flush();
+
+    $this->album = Album::factory()->create([
+        'judul' => 'Album Publik',
+        'slug' => 'album-publik',
+    ]);
+});
+
+it('renders the public galeri list page', function () {
+    $response = $this->get(route('publik.publikasi.galeri', 'album-publik'));
+
+    $response->assertStatus(200);
+    $response->assertSee('galeri-container', false);
+});
+
+it('renders the public galeri detail page', function () {
+    $response = $this->get(route('publik.publikasi.galeri.detail', 'album-publik'));
+
+    $response->assertStatus(200);
+    $response->assertSee('galeri-images-container', false);
+});
+
+it('builds the storage base url without a double slash', function () {
+    $response = $this->get(route('publik.publikasi.galeri.detail', 'album-publik'));
+
+    // asset() membuang garis miring di akhir path, sehingga pemisah harus
+    // ditambahkan eksplisit. Tanpa itu nama berkas akan menempel ke folder.
+    $response->assertSee(json_encode(asset('storage/publikasi/galeri')), false)
+        ->assertSee("storageBaseUrl + '/' + item", false);
+
+    // Dua garis miring sebelum folder akan membuat gambar gagal dimuat.
+    $response->assertDontSee('//storage/publikasi/galeri/');
+});
+
+it('loads the shared media rendering helper on the galeri pages', function () {
+    $response = $this->get(route('publik.publikasi.galeri.detail', 'album-publik'));
+
+    $response->assertSee('custom.js', false);
+});
diff --git a/tests/Unit/Models/GaleriTest.php b/tests/Unit/Models/GaleriTest.php
new file mode 100644
index 0000000000..86d3b13926
--- /dev/null
+++ b/tests/Unit/Models/GaleriTest.php
@@ -0,0 +1,134 @@
+<?php
+
+use App\Models\Album;
+use App\Models\Galeri;
+use Illuminate\Support\Facades\Storage;
+
+/*
+|--------------------------------------------------------------------------
+| Galeri media resolvers
+|--------------------------------------------------------------------------
+|
+| Galeri dengan `jenis = url` harus bisa ditampilkan baik di web maupun di
+| admin, baik berupa foto, video Google Drive, maupun video YouTube.
+|
+*/
+
+beforeEach(function () {
+    Storage::fake('public');
+    $this->album = Album::factory()->create();
+});
+
+it('exposes image media for google drive photo links', function () {
+    $galeri = Galeri::create([
+        'album_id' => $this->album->id,
+        'judul' => 'Foto Google Drive',
+        'jenis' => 'url',
+        'link' => 'https://drive.google.com/file/d/1AbCdEf123/view?usp=sharing',
+        'media_type' => 'image',
+        'status' => true,
+    ]);
+
+    expect($galeri->media_type)->toBe('image')
+        ->and($galeri->media_url)->toBe('https://drive.google.com/uc?export=view&id=1AbCdEf123')
+        ->and($galeri->media_embed_url)->toBeNull()
+        ->and($galeri->gambar_path)->toBe('https://drive.google.com/uc?export=view&id=1AbCdEf123');
+});
+
+it('exposes video media for google drive video links', function () {
+    $galeri = Galeri::create([
+        'album_id' => $this->album->id,
+        'judul' => 'Video Google Drive',
+        'jenis' => 'url',
+        'link' => 'https://drive.google.com/file/d/1AbCdEf123/view',
+        'media_type' => 'video',
+        'status' => true,
+    ]);
+
+    expect($galeri->media_type)->toBe('video')
+        ->and($galeri->media_embed_url)->toBe('https://drive.google.com/file/d/1AbCdEf123/preview')
+        ->and($galeri->media_url)->toContain('id=1AbCdEf123');
+});
+
+it('exposes embed media for youtube links', function () {
+    $galeri = Galeri::create([
+        'album_id' => $this->album->id,
+        'judul' => 'Video YouTube',
+        'jenis' => 'url',
+        'link' => 'https://youtu.be/dQw4w9WgXcQ',
+        'status' => true,
+    ]);
+
+    expect($galeri->media_type)->toBe('youtube')
+        ->and($galeri->media_embed_url)->toBe('https://www.youtube.com/embed/dQw4w9WgXcQ')
+        ->and($galeri->gambar_path)->toBe('https://img.youtube.com/vi/dQw4w9WgXcQ/hqdefault.jpg');
+});
+
+it('exposes media url for direct video files', function () {
+    $galeri = Galeri::create([
+        'album_id' => $this->album->id,
+        'judul' => 'Video MP4',
+        'jenis' => 'url',
+        'link' => 'https://sitim.go.id/video/kegiatan.mp4',
+        'status' => true,
+    ]);
+
+    expect($galeri->media_type)->toBe('video')
+        ->and($galeri->media_url)->toBe('https://sitim.go.id/video/kegiatan.mp4')
+        ->and($galeri->media_embed_url)->toBeNull();
+});
+
+it('falls back to a local file thumbnail for uploaded media', function () {
+    Storage::disk('public')->put('publikasi/galeri/unggah.jpg', 'fake content');
+
+    $galeri = Galeri::create([
+        'album_id' => $this->album->id,
+        'judul' => 'Foto Unggah',
+        'jenis' => 'file',
+        'gambar' => ['unggah.jpg'],
+        'status' => true,
+    ]);
+
+    expect($galeri->media_type)->toBe('image')
+        ->and($galeri->media_url)->toContain('publikasi/galeri/unggah.jpg')
+        ->and($galeri->media_embed_url)->toBeNull();
+});
+
+it('returns a no image placeholder when nothing can be displayed', function () {
+    $galeri = new Galeri();
+
+    expect($galeri->media_type)->toBe('unknown')
+        ->and($galeri->media_url)->toBeNull()
+        ->and($galeri->media_embed_url)->toBeNull()
+        ->and($galeri->gambar_path)->toContain('no-image.png');
+});
+
+it('keeps the original link intact for the detail page', function () {
+    $galeri = Galeri::create([
+        'album_id' => $this->album->id,
+        'judul' => 'Link Asli',
+        'jenis' => 'url',
+        'link' => 'https://drive.google.com/file/d/1AbCdEf123/view?usp=sharing',
+        'media_type' => 'video',
+        'status' => true,
+    ]);
+
+    expect($galeri->link)->toBe('https://drive.google.com/file/d/1AbCdEf123/view?usp=sharing');
+});
+
+it('serializes media fields for the api', function () {
+    $galeri = Galeri::create([
+        'album_id' => $this->album->id,
+        'judul' => 'Serialisasi',
+        'jenis' => 'url',
+        'link' => 'https://drive.google.com/file/d/1AbCdEf123/view',
+        'media_type' => 'video',
+        'status' => true,
+    ]);
+
+    $data = $galeri->toArray();
+
+    expect($data)->toHaveKeys(['media_type', 'media_url', 'media_embed_url', 'gambar_path'])
+        ->and($data['media_type'])->toBe('video')
+        ->and($data['media_embed_url'])->toBe('https://drive.google.com/file/d/1AbCdEf123/preview');
+});
diff --git a/tests/Unit/Services/MediaLinkServiceTest.php b/tests/Unit/Services/MediaLinkServiceTest.php
new file mode 100644
index 0000000000..02348896bd
--- /dev/null
+++ b/tests/Unit/Services/MediaLinkServiceTest.php
@@ -0,0 +1,248 @@
+<?php
+
+use App\Services\MediaLinkService;
+use Illuminate\Http\Client\Request;
+use Illuminate\Support\Facades\Http;
+
+/*
+|--------------------------------------------------------------------------
+| Media Link Service
+|--------------------------------------------------------------------------
+|
+| Menguji resolusi link media (Google Drive, YouTube, Vimeo, file langsung)
+| menjadi tipe media + URL yang bisa langsung ditampilkan di web/admin.
+|
+*/
+
+beforeEach(function () {
+    $this->service = new MediaLinkService();
+});
+
+describe('youtube', function () {
+    it('resolves a regular watch url', function () {
+        $media = $this->service->resolve('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
+
+        expect($media->type)->toBe('youtube')
+            ->and($media->id)->toBe('dQw4w9WgXcQ')
+            ->and($media->embedUrl)->toBe('https://www.youtube.com/embed/dQw4w9WgXcQ')
+            ->and($media->thumbnail)->toBe('https://img.youtube.com/vi/dQw4w9WgXcQ/hqdefault.jpg');
+    });
+
+    it('resolves short, embed, shorts and live urls', function (string $url, string $id) {
+        expect($this->service->resolve($url)->type)->toBe('youtube')
+            ->and($this->service->resolve($url)->id)->toBe($id);
+    })->with([
+        ['https://youtu.be/dQw4w9WgXcQ', 'dQw4w9WgXcQ'],
+        ['https://www.youtube.com/embed/dQw4w9WgXcQ', 'dQw4w9WgXcQ'],
+        ['https://www.youtube.com/shorts/dQw4w9WgXcQ', 'dQw4w9WgXcQ'],
+        ['https://www.youtube.com/live/dQw4w9WgXcQ', 'dQw4w9WgXcQ'],
+        ['https://m.youtube.com/watch?v=dQw4w9WgXcQ&t=30s', 'dQw4w9WgXcQ'],
+    ]);
+
+    it('ignores a non youtube url', function () {
+        expect($this->service->resolve('https://opendesa.id')->type)->not->toBe('youtube');
+    });
+});
+
+describe('google drive', function () {
+    it('resolves the file view url to a direct image url', function () {
+        $media = $this->service->resolve('https://drive.google.com/file/d/1AbCdEf123/view?usp=sharing');
+
+        expect($media->type)->toBe('image')
+            ->and($media->id)->toBe('1AbCdEf123')
+            ->and($media->url)->toBe('https://drive.google.com/uc?export=view&id=1AbCdEf123')
+            ->and($media->embedUrl)->toBeNull();
+    });
+
+    it('resolves the uc export url', function () {
+        $media = $this->service->resolve('https://drive.google.com/uc?export=view&id=1AbCdEf123');
+
+        expect($media->id)->toBe('1AbCdEf123')
+            ->and($media->url)->toBe('https://drive.google.com/uc?export=view&id=1AbCdEf123');
+    });
+
+    it('resolves the open id url', function () {
+        $media = $this->service->resolve('https://drive.google.com/open?id=1AbCdEf123');
+
+        expect($media->id)->toBe('1AbCdEf123')
+            ->and($media->url)->toBe('https://drive.google.com/uc?export=view&id=1AbCdEf123');
+    });
+
+    it('resolves a drive video to a playable preview embed', function () {
+        $media = $this->service->resolve('https://drive.google.com/file/d/1AbCdEf123/view', 'video');
+
+        expect($media->type)->toBe('video')
+            ->and($media->embedUrl)->toBe('https://drive.google.com/file/d/1AbCdEf123/preview')
+            ->and($media->url)->toBe('https://drive.google.com/uc?export=download&id=1AbCdEf123');
+    });
+
+    it('resolves the docs.google.com viewer url', function () {
+        expect($this->service->resolve('https://docs.google.com/file/d/1AbCdEf123/view')->id)->toBe('1AbCdEf123');
+    });
+
+    it('marks a drive folder as unknown', function () {
+        $media = $this->service->resolve('https://drive.google.com/drive/folders/1AbCdEf123');
+
+        expect($media->type)->toBe('unknown')
+            ->and($media->id)->toBeNull();
+    });
+});
+
+describe('direct files', function () {
+    it('detects image urls by extension', function (string $url) {
+        $media = $this->service->resolve($url);
+
+        expect($media->type)->toBe('image')
+            ->and($media->url)->toBe($url)
+            ->and($media->embedUrl)->toBeNull();
+    })->with([
+        ['https://contoh.sitim.go.id/foto/kegiatan.jpg'],
+        ['https://contoh.sitim.go.id/foto/kegiatan.JPEG'],
+        ['https://contoh.sitim.go.id/foto/kegiatan.png'],
+        ['https://contoh.sitim.go.id/foto/kegiatan.webp'],
+        ['https://contoh.sitim.go.id/foto/kegiatan.gif'],
+    ]);
+
+    it('detects video urls by extension', function (string $url) {
+        $media = $this->service->resolve($url);
+
+        expect($media->type)->toBe('video')
+            ->and($media->url)->toBe($url);
+    })->with([
+        ['https://contoh.sitim.go.id/video/kegiatan.mp4'],
+        ['https://contoh.sitim.go.id/video/kegiatan.webm'],
+        ['https://contoh.sitim.go.id/video/kegiatan.ogv'],
+        ['https://contoh.sitim.go.id/video/kegiatan.mov'],
+    ]);
+
+    it('resolves a vimeo url to an embed', function () {
+        $media = $this->service->resolve('https://vimeo.com/123456789');
+
+        expect($media->type)->toBe('video')
+            ->and($media->id)->toBe('123456789')
+            ->and($media->embedUrl)->toBe('https://player.vimeo.com/video/123456789');
+    });
+});
+
+describe('fallback', function () {
+    it('returns unknown for a plain url without media hints', function () {
+        $media = $this->service->resolve('https://opendesa.id');
+
+        expect($media->type)->toBe('unknown')
+            ->and($media->url)->toBe('https://opendesa.id')
+            ->and($media->embedUrl)->toBeNull()
+            ->and($media->thumbnail)->toBeNull();
+    });
+
+    it('returns unknown for empty or invalid values', function (?string $url) {
+        $media = $this->service->resolve($url);
+
+        expect($media->type)->toBe('unknown')
+            ->and($media->url)->toBeNull();
+    })->with([null, '', '   ', 'bukan-url']);
+
+    it('respects the manual type hint for unknown urls', function () {
+        expect($this->service->resolve('https://opendesa.id', 'image')->type)->toBe('image')
+            ->and($this->service->resolve('https://opendesa.id', 'video')->type)->toBe('video');
+    });
+
+    it('never trusts a type hint that contradicts the provider', function () {
+        expect($this->service->resolve('https://youtu.be/dQw4w9WgXcQ', 'image')->type)->toBe('youtube');
+    });
+});
+
+describe('probing', function () {
+    it('returns the media type from the content-type header', function (string $contentType, string $expected) {
+        Http::fake(['*' => Http::response('', 200, ['Content-Type' => $contentType])]);
+
+        expect($this->service->probe('https://contoh.sitim.go.id/media/berkas'))->toBe($expected);
+    })->with([
+        ['image/jpeg', 'image'],
+        ['image/png', 'image'],
+        ['video/mp4', 'video'],
+        ['application/octet-stream', 'unknown'],
+    ]);
+
+    it('falls back to the filename extension when content type is generic', function () {
+        Http::fake(['*' => Http::response('', 200, [
+            'Content-Type' => 'application/octet-stream',
+            'Content-Disposition' => 'attachment; filename="dokumentasi.mp4"',
+        ])]);
+
+        expect($this->service->probe('https://contoh.sitim.go.id/media/berkas'))->toBe('video');
+    });
+
+    it('resolves the drive download url before probing', function () {
+        Http::fake([
+            'drive.google.com/*' => Http::response('', 200, ['Content-Type' => 'video/mp4']),
+            '*' => Http::response('', 500),
+        ]);
+
+        expect($this->service->probe('https://drive.google.com/file/d/1AbCdEf123/view'))->toBe('video');
+
+        Http::assertSent(function (Request $request) {
+            return str_contains($request->url(), 'uc?export=download&id=1AbCdEf123');
+        });
+    });
+
+    it('returns null when the request fails', function () {
+        Http::fake(['*' => Http::response('', 500)]);
+
+        expect($this->service->probe('https://contoh.sitim.go.id/media/berkas'))->toBeNull();
+    });
+
+    it('does not probe empty urls', function () {
+        Http::preventStrayRequests();
+
+        expect($this->service->probe(null))->toBeNull()
+            ->and($this->service->probe('bukan-url'))->toBeNull();
+    });
+});
+
+describe('detectType', function () {
+    it('uses the resolved type without touching the network', function () {
+        Http::preventStrayRequests();
+
+        expect($this->service->detectType('https://youtu.be/dQw4w9WgXcQ'))->toBe('youtube')
+            ->and($this->service->detectType('https://contoh.sitim.go.id/foto.jpg'))->toBe('image')
+            ->and($this->service->detectType('https://contoh.sitim.go.id/video.mp4'))->toBe('video');
+    });
+
+    it('probes only when the url is inconclusive', function () {
+        Http::fake(['*' => Http::response('', 200, ['Content-Type' => 'video/mp4'])]);
+
+        expect($this->service->detectType('https://contoh.sitim.go.id/media/berkas'))->toBe('video');
+
+        Http::assertSentCount(1);
+    });
+
+    it('probes google drive links because they carry no file extension', function () {
+        Http::fake([
+            'drive.google.com/*' => Http::response('', 200, ['Content-Type' => 'video/mp4']),
+            '*' => Http::response('', 500),
+        ]);
+
+        expect($this->service->detectType('https://drive.google.com/file/d/1AbCdEf123/view'))->toBe('video');
+
+        Http::assertSentCount(1);
+    });
+
+    it('falls back to the default drive type when probing fails', function () {
+        Http::fake(['*' => Http::response('', 500)]);
+
+        expect($this->service->detectType('https://drive.google.com/file/d/1AbCdEf123/view'))->toBe('image');
+    });
+
+    it('never probes when the user picked the type manually', function () {
+        Http::preventStrayRequests();
+
+        expect($this->service->detectType('https://contoh.sitim.go.id/media/berkas', 'image'))->toBe('image')
+            ->and($this->service->detectType('https://drive.google.com/file/d/1AbCdEf123/view', 'video'))->toBe('video');
+    });
+
+    it('returns unknown for a missing link', function () {
+        Http::preventStrayRequests();
+
+        expect($this->service->detectType(null))->toBe('unknown');
+    });
+});
diff --git a/tests/Unit/Support/CspPolicyTest.php b/tests/Unit/Support/CspPolicyTest.php
new file mode 100644
index 0000000000..4bfc07fef9
--- /dev/null
+++ b/tests/Unit/Support/CspPolicyTest.php
@@ -0,0 +1,53 @@
+<?php
+
+use App\Support\CspPolicy;
+
+/*
+|--------------------------------------------------------------------------
+| Content Security Policy
+|--------------------------------------------------------------------------
+|
+| Galeri dapat menampilkan media dari luar (Google Drive, YouTube, Vimeo, dan
+| situs desa), sehingga CSP harus mengizinkan sumber tersebut.
+|
+*/
+
+it('allows youtube and vimeo frames for embedded videos', function () {
+    $policy = (new CspPolicy())->toHeader();
+
+    expect($policy)->toContain('*.youtube.com')
+        ->and($policy)->toContain('*.vimeo.com')
+        ->and($policy)->toContain('https://drive.google.com');
+});
+
+it('allows external media sources for gallery videos', function () {
+    $directive = (new CspPolicy())->directive('media-src');
+
+    expect($directive)->toContain("'self'")
+        ->and($directive)->toContain('https:')
+        ->and($directive)->toContain('blob:');
+});
+
+it('allows external images for gallery thumbnails', function () {
+    $directive = (new CspPolicy())->directive('img-src');
+
+    expect($directive)->toContain("'self'")
+        ->and($directive)->toContain('data:')
+        ->and($directive)->toContain('blob:');
+});
+
+it('includes the database gabungan api in connect-src', function () {
+    config(['setting.api_server_database_gabungan' => 'https://api.gabungan.test']);
+
+    expect((new CspPolicy())->toHeader())->toContain('connect-src')
+        ->toContain('https://api.gabungan.test');
+});
+
+it('keeps a restrictive baseline for scripts and objects', function () {
+    $policy = new CspPolicy();
+
+    expect($policy->directive('default-src'))->toBe("'self'")
+        ->and($policy->directive('object-src'))->toBe("'self' blob:")
+        ->and($policy->directive('frame-ancestors'))->toBe("'self'")
+        ->and($policy->directive('base-uri'))->toBe("'self'");
+});
diff --git a/themes/opendk/default/resources/views/pages/publikasi/galeri.blade.php b/themes/opendk/default/resources/views/pages/publikasi/galeri.blade.php
index a9f172bd6a..9a18d78b05 100644
--- a/themes/opendk/default/resources/views/pages/publikasi/galeri.blade.php
+++ b/themes/opendk/default/resources/views/pages/publikasi/galeri.blade.php
@@ -20,35 +20,25 @@ function renderGaleri(items) {
 
             return items.map(function(item) {
                 var galeri = item.attributes;
-                var galeriImage = galeri.gambar_path || '{{ asset("/img/no-image.png") }}';
-                
-                if (galeri.jenis === 'file') {
-                    return '<div class="post" style="margin-bottom: 5px; padding-top: 5px; padding-bottom: 5px;">' +
-                        '<div class="row">' +
-                            '<div class="col-sm-4">' +
-                                '<img class="img-responsive" src="' + galeriImage + '" alt="' + (galeri.slug || '') + '">' +
-                            '</div>' +
-                            '<div class="col-sm-8">' +
-                                '<h5 style="margin-top: 5px; text-align: justify;"><b><a href="{{ url("/publikasi/galeri/detail") }}/' + (galeri.slug || '') + '">' + (galeri.judul || '') + '</a></b></h5>' +
-                                '<p style="font-size:11px;"><i class="fa fa-calendar"></i>&ensp;' + formatDate(galeri.created_at) + '&ensp;|&ensp;<i class="fa fa-user"></i>&ensp;Administrator</p>' +
-                                '<a href="{{ url("/publikasi/galeri/detail") }}/' + (galeri.slug || '') + '" class="btn btn-sm btn-primary" target="_blank">Selengkapnya</a>' +
-                            '</div>' +
-                        '</div>' +
-                    '</div>';
-                } else {
-                    return '<div class="post" style="margin-bottom: 5px; padding-top: 5px; padding-bottom: 5px;">' +
-                        '<div class="row">' +
-                            '<div class="col-sm-4">' +
-                                '<img class="img-responsive" src="' + galeriImage + '" alt="' + (galeri.slug || '') + '">' +
-                            '</div>' +
-                            '<div class="col-sm-8">' +
-                                '<h5 style="margin-top: 5px; text-align: justify;"><b><a href="' + (galeri.link || '') + '">' + (galeri.judul || '') + '</a></b></h5>' +
-                                '<p style="font-size:11px;"><i class="fa fa-calendar"></i>&ensp;' + formatDate(galeri.created_at) + '&ensp;|&ensp;<i class="fa fa-user"></i>&ensp;Administrator</p>' +
-                                '<a href="' + (galeri.link || '') + '" class="btn btn-sm btn-primary" target="_blank">Selengkapnya</a>' +
-                            '</div>' +
+                var media = renderGaleriMedia(galeri, {
+                    imageStyle: 'width:100%;height:auto;max-height:220px;object-fit:contain;background:#f5f5f5;'
+                });
+                var detailUrl = '{{ url("/publikasi/galeri/detail") }}/' + (galeri.slug || '');
+                var targetUrl = (galeri.jenis === 'file') ? detailUrl : (galeri.link || detailUrl);
+                var badge = isGaleriPlayable(galeri)
+                    ? '<span class="label label-primary" style="position:absolute;top:8px;left:8px;z-index:2;"><i class="fa fa-play-circle"></i> ' + (galeri.media_type === 'youtube' ? 'YouTube' : 'Video') + '</span>'
+                    : '';
+
+                return '<div class="post" style="margin-bottom: 5px; padding-top: 5px; padding-bottom: 5px;">' +
+                    '<div class="row">' +
+                        '<div class="col-sm-4" style="position:relative;">' + badge + media + '</div>' +
+                        '<div class="col-sm-8">' +
+                            '<h5 style="margin-top: 5px; text-align: justify;"><b><a href="' + targetUrl + '">' + (galeri.judul || '') + '</a></b></h5>' +
+                            '<p style="font-size:11px;"><i class="fa fa-calendar"></i>&ensp;' + formatDate(galeri.created_at) + '&ensp;|&ensp;<i class="fa fa-user"></i>&ensp;Administrator</p>' +
+                            '<a href="' + detailUrl + '" class="btn btn-sm btn-primary" target="_blank">Selengkapnya</a>' +
                         '</div>' +
-                    '</div>';
-                }
+                    '</div>' +
+                '</div>';
             }).join('');
         }
 
diff --git a/themes/opendk/default/resources/views/pages/publikasi/galeri_detail.blade.php b/themes/opendk/default/resources/views/pages/publikasi/galeri_detail.blade.php
index ca87152d7f..78c7cd7580 100644
--- a/themes/opendk/default/resources/views/pages/publikasi/galeri_detail.blade.php
+++ b/themes/opendk/default/resources/views/pages/publikasi/galeri_detail.blade.php
@@ -21,6 +21,10 @@
         object-fit: cover;
         /* Menjaga proporsi gambar dengan crop jika perlu */
     }
+
+    .media-container {
+        margin-bottom: 15px;
+    }
 </style>
 @endpush
 
@@ -50,6 +54,10 @@
 @push('scripts')
 <script>
     $(function(){
+        // asset() membuang garis miring di akhir path, sehingga pemisah ke nama
+        // berkas ditambahkan eksplisit di JavaScript.
+        var storageBaseUrl = @json(asset('storage/publikasi/galeri'));
+
         // Function to load galeri detail from API
         function loadGaleriDetail() {
             // Make API call to get galeri by slug
@@ -63,11 +71,28 @@ function loadGaleriDetail() {
                         // Update the title
                         $('#galeri-judul').text(galeri.judul ? galeri.judul.toUpperCase() : '');
                         
+                        // Galeri berbasis link (Google Drive, YouTube, dll) tidak punya
+                        // array gambar, jadi media-nya dirender sesuai tipenya.
+                        if (galeri.jenis === 'url' && galeri.link) {
+                            var media = renderGaleriMedia(galeri, {
+                                imageStyle: 'width:100%;height:auto;border-radius:4px;'
+                            });
+
+                            $('#galeri-images-container').html(
+                                '<div class="col-12 media-container">' + media + '</div>' +
+                                '<div class="col-12"><p style="font-size:12px;">' +
+                                    'Sumber: <a href="' + galeri.link + '" target="_blank" rel="noopener">' + galeri.link + '</a>' +
+                                '</p></div>'
+                            );
+
+                            return;
+                        }
+
                         // Generate images HTML
                         var imagesHtml = '';
                         if (galeri.gambar && Array.isArray(galeri.gambar)) {
                             galeri.gambar.forEach(function(item) {
-                                var imagePath = '{{ asset("") }}storage/publikasi/galeri/' + item;
+                                var imagePath = storageBaseUrl + '/' + item;
                                 imagesHtml += '<div class="col-md-6 mt-2">' +
                                     '<div class="image-container">' +
                                         '<img id="myImg" class="img-fluid" src="' + imagePath + '" alt="Image">' +
@@ -75,7 +100,7 @@ function loadGaleriDetail() {
                                 '</div>';
                             });
                         } else {
-                            imagesHtml = '<div class="col-12"><p>Tidak ada gambar yang ditampilkan!</p></div>';
+                            imagesHtml = '<div class="col-12"><p>Tidak ada media yang ditampilkan!</p></div>';
                         }
                         
                         // Update the container with images

From 94af2b634f9b2eb062b8e8dfb289eb305a24b619 Mon Sep 17 00:00:00 2001
From: Abah Roland <v.rolanda92@gmail.com>
Date: Fri, 2 Oct 2026 08:07:31 +0700
Subject: [PATCH 2/2] [ci skip] memutahirkan catatan rilis

---
 catatan_rilis.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/catatan_rilis.md b/catatan_rilis.md
index 50cfef19ad..95607af530 100644
--- a/catatan_rilis.md
+++ b/catatan_rilis.md
@@ -22,6 +22,7 @@ Terimakasih [isi disini] yang telah berkontribusi langsung mengembangkan aplikas
 11. [#1736](http://github.com/OpenSID/OpenDK/issues/1736) Fix Penyesuaian Validasi NIK pada Pengiriman Keluhan untuk Database Gabungan (API Satu Data).
 12. [#1737](https://github.com/OpenSID/OpenDK/issues/1737) fungsi kirim pesan error 500.
 13. [#1761](https://github.com/OpenSID/OpenDK/issues/1761)Perbaikan validasi valid_file menolak PDF sah karena string generik "function".
+14. [#1764](https://github.com/OpenSID/OpenDK/issues/1764) Gagal Menampilkan data foto/video dari link pada web dan admin.
 
 #### TEKNIS