diff --git a/frontend/src/i18n/locales/de.yaml b/frontend/src/i18n/locales/de.yaml
index f38ec9b0b..6891c5167 100644
--- a/frontend/src/i18n/locales/de.yaml
+++ b/frontend/src/i18n/locales/de.yaml
@@ -56,6 +56,7 @@ not-found:
   page-not-found: Seite nicht gefunden
   video-not-found: Video nicht gefunden
   series-not-found: Serie nicht gefunden
+  playlist-not-found: Playlist nicht gefunden
   page-explanation: >
     Die von Ihnen gewünschte Seite existiert nicht. Sie wurde möglicherweise
     gelöscht oder umbenannt.
@@ -65,6 +66,9 @@ not-found:
   series-explanation: >
     Die von Ihnen gewünschte Serie existiert nicht. Sie wurde möglicherweise
     gelöscht oder verschoben.
+  playlist-explanation: >
+    Die von Ihnen gewünschte Playlist existiert nicht. Sie wurde möglicherweise
+    gelöscht oder verschoben.
   url-typo: >
     Falls Sie die Adresse/URL manuell eingegeben haben, prüfen Sie diese auf
     Fehler.
@@ -176,8 +180,6 @@ series:
   series: Serie
   deleted: Gelöschte Serie
   deleted-series-block: Die hier referenzierte Serie wurde gelöscht.
-  no-events: Diese Serie enthält keine Videos oder Sie sind nicht berechtigt, diese zu sehen.
-  upcoming-live-streams: "Anstehende Livestreams ({{count}})"
   entry-of-series-thumbnail: "Vorschlaubild für Teil von „{{series}}“"
   videos:
     heading: Videos
@@ -186,9 +188,17 @@ series:
     text: >
       Die Daten der gewünschten Serie wurden leider noch nicht vollständig übertragen. Dies sollte
       in Kürze automatisch passieren. Versuchen Sie es in wenigen Minuten noch einmal!
+
+videolist-block:
+  upcoming-live-streams: "Anstehende Livestreams ({{count}})"
+  missing-video: Video nicht gefunden
+  unauthorized: Fehlende Berechtigung
+  hidden-items_one: 'Ein Video wurde nicht gefunden oder Sie haben keinen Zugriff darauf.'
+  hidden-items_other: '{{count}} Videos wurden nicht gefunden oder Sie haben keinen Zugriff darauf.'
   settings:
     order: Reihenfolge
     order-label: Video Reihenfolge auswählen
+    original: Wie Playlist
     new-to-old: Neueste zuerst
     old-to-new: Älteste zuerst
     a-z: A bis Z
@@ -580,6 +590,7 @@ manage:
 api-remote-errors:
   view:
     event: Sie sind nicht autorisiert, dieses Video zu sehen.
+    playlist: Sie sind nicht autorisiert, diese Playlist zu sehen.
   upload:
     not-logged-in: Sie müssen angemeldet sein, um Videos hochzuladen.
     not-authorized: $t(upload.not-authorized)
diff --git a/frontend/src/i18n/locales/en.yaml b/frontend/src/i18n/locales/en.yaml
index 1385cf14b..497c55849 100644
--- a/frontend/src/i18n/locales/en.yaml
+++ b/frontend/src/i18n/locales/en.yaml
@@ -55,6 +55,7 @@ not-found:
   page-not-found: Page not found
   video-not-found: Video not found
   series-not-found: Series not found
+  playlist-not-found: Playlist not found
   page-explanation: >
     The page you want to visit does not exist. It might have been removed or
     renamed.
@@ -64,6 +65,9 @@ not-found:
   series-explanation: >
     The series you want to view does not exist. It might have been removed or
     moved.
+  playlist-explanation: >
+    The playlist you want to view does not exist. It might have been removed or
+    moved.
   url-typo: >
     If you entered the address/URL manually, please double check it for
     spelling mistakes.
@@ -173,8 +177,6 @@ series:
   series: Series
   deleted: Deleted series
   deleted-series-block: The series referenced here was deleted.
-  no-events: This series does not contain any events, or you might not be authorized to see them.
-  upcoming-live-streams: "Upcoming live streams ({{count}})"
   entry-of-series-thumbnail: "Thumbnail for entry of “{{series}}”"
   videos:
     heading: Videos
@@ -183,9 +185,18 @@ series:
     text: >
       The data of the requested series has not been fully transferred yet. This should
       happen automatically soon. Try again in a few minutes.
+
+videolist-block:
+  upcoming-live-streams: "Upcoming live streams ({{count}})"
+  missing-video: Video not found
+  unauthorized: Missing permissions
+  hidden-items_one: 'One video is missing or requires additional permissions to view.'
+  hidden-items_other: '{{count}} videos are missing or require additional permissions to view.'
+  no-videos: No videos
   settings:
     order: Order
     order-label: Choose video order
+    original: Playlist order
     new-to-old: Newest first
     old-to-new: Oldest first
     a-z: A to Z
@@ -554,6 +565,7 @@ manage:
 api-remote-errors:
   view:
     event: You are not authorized to view this video.
+    playlist: You are not authorized to view this playlist.
   upload:
     not-logged-in: You have to be logged in to upload videos.
     not-authorized: $t(upload.not-authorized)
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
index 28dd2e609..bb469d993 100644
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -18,6 +18,7 @@ import { ManageVideoDetailsRoute } from "./routes/manage/Video/Details";
 import { ManageVideoTechnicalDetailsRoute } from "./routes/manage/Video/TechnicalDetails";
 import React from "react";
 import { ManageVideoAccessRoute } from "./routes/manage/Video/Access";
+import { DirectPlaylistOCRoute, DirectPlaylistRoute } from "./routes/Playlist";
 
 
 
@@ -42,6 +43,8 @@ const {
         DirectOpencastVideoRoute,
         DirectSeriesRoute,
         DirectSeriesOCRoute,
+        DirectPlaylistRoute,
+        DirectPlaylistOCRoute,
         ManageRoute,
         ManageVideosRoute,
         ManageVideoAccessRoute,
diff --git a/frontend/src/routes/NotFound.tsx b/frontend/src/routes/NotFound.tsx
index 0711554f9..b1d199523 100644
--- a/frontend/src/routes/NotFound.tsx
+++ b/frontend/src/routes/NotFound.tsx
@@ -32,7 +32,7 @@ const query = graphql`
 `;
 
 type Props = {
-    kind: "page" | "video" | "series";
+    kind: "page" | "video" | "series" | "playlist";
 };
 
 export const NotFound: React.FC<Props> = ({ kind }) => {
@@ -41,6 +41,7 @@ export const NotFound: React.FC<Props> = ({ kind }) => {
         "page": () => t("not-found.page-not-found"),
         "video": () => t("not-found.video-not-found"),
         "series": () => t("not-found.series-not-found"),
+        "playlist": () => t("not-found.playlist-not-found"),
     });
 
     // Ideally our backend would respond with 404 here, but that's not
@@ -64,6 +65,7 @@ export const NotFound: React.FC<Props> = ({ kind }) => {
                     "page": () => t("not-found.page-explanation"),
                     "video": () => t("not-found.video-explanation"),
                     "series": () => t("not-found.series-explanation"),
+                    "playlist": () => t("not-found.playlist-explanation"),
                 })}
                 {t("not-found.url-typo")}
             </p>
diff --git a/frontend/src/routes/Playlist.tsx b/frontend/src/routes/Playlist.tsx
new file mode 100644
index 000000000..3ec078728
--- /dev/null
+++ b/frontend/src/routes/Playlist.tsx
@@ -0,0 +1,153 @@
+import { graphql, readInlineData, useFragment } from "react-relay";
+import { useTranslation } from "react-i18next";
+import { unreachable } from "@opencast/appkit";
+
+import { loadQuery } from "../relay";
+import { makeRoute } from "../rauta";
+import { RootLoader } from "../layout/Root";
+import { Nav } from "../layout/Navigation";
+import { PageTitle } from "../layout/header/ui";
+import { keyOfId, playlistId } from "../util";
+import { NotFound } from "./NotFound";
+import { b64regex } from "./util";
+import { Breadcrumbs } from "../ui/Breadcrumbs";
+import { PlaylistByOpencastIdQuery } from "./__generated__/PlaylistByOpencastIdQuery.graphql";
+import { PlaylistRouteData$key } from "./__generated__/PlaylistRouteData.graphql";
+import { PlaylistByIdQuery } from "./__generated__/PlaylistByIdQuery.graphql";
+import { ErrorPage } from "../ui/error";
+import { VideoListBlock, videoListEventFragment } from "../ui/Blocks/VideoList";
+import { VideoListEventData$key } from "../ui/Blocks/__generated__/VideoListEventData.graphql";
+
+
+export const DirectPlaylistOCRoute = makeRoute({
+    url: ({ ocID }: { ocID: string }) => `/!s/:${ocID}`,
+    match: url => {
+        const regex = new RegExp("^/!p/:([^/]+)$", "u");
+        const matches = regex.exec(url.pathname);
+
+        if (!matches) {
+            return null;
+        }
+
+
+        const opencastId = decodeURIComponent(matches[1]);
+        const query = graphql`
+            query PlaylistByOpencastIdQuery($id: String!) {
+                ... UserData
+                playlist: playlistByOpencastId(id: $id) { ...PlaylistRouteData }
+                rootRealm { ... NavigationData }
+            }
+        `;
+        const queryRef = loadQuery<PlaylistByOpencastIdQuery>(query, { id: opencastId });
+
+
+        return {
+            render: () => <RootLoader
+                {...{ query, queryRef }}
+                noindex
+                nav={data => <Nav fragRef={data.rootRealm} />}
+                render={result => <PlaylistPage playlistFrag={result.playlist} />}
+            />,
+            dispose: () => queryRef.dispose(),
+        };
+    },
+});
+
+export const DirectPlaylistRoute = makeRoute({
+    url: ({ seriesId }: { seriesId: string }) => `/!s/${keyOfId(seriesId)}`,
+    match: url => {
+        const regex = new RegExp(`^/!s/(${b64regex}+)$`, "u");
+        const matches = regex.exec(url.pathname);
+
+        if (!matches) {
+            return null;
+        }
+
+
+        const id = decodeURIComponent(matches[1]);
+        const query = graphql`
+            query PlaylistByIdQuery($id: ID!) {
+                ... UserData
+                playlist: playlistById(id: $id) { ...PlaylistRouteData }
+                rootRealm { ... NavigationData }
+            }
+        `;
+        const queryRef = loadQuery<PlaylistByIdQuery>(query, { id: playlistId(id) });
+
+
+        return {
+            render: () => <RootLoader
+                {...{ query, queryRef }}
+                noindex
+                nav={data => <Nav fragRef={data.rootRealm} />}
+                render={result => <PlaylistPage playlistFrag={result.playlist} />}
+            />,
+            dispose: () => queryRef.dispose(),
+        };
+    },
+});
+
+const fragment = graphql`
+    fragment PlaylistRouteData on Playlist {
+        __typename
+        ... on NotAllowed { dummy } # workaround
+        ... on AuthorizedPlaylist {
+            title
+            description
+            entries {
+                __typename
+                ...on AuthorizedEvent { id, ...VideoListEventData }
+                ...on Missing { dummy }
+                ...on NotAllowed { dummy }
+            }
+        }
+    }
+`;
+
+type PlaylistPageProps = {
+    playlistFrag?: PlaylistRouteData$key | null;
+};
+
+const PlaylistPage: React.FC<PlaylistPageProps> = ({ playlistFrag }) => {
+    const { t } = useTranslation();
+    const playlist = useFragment(fragment, playlistFrag ?? null);
+
+    if (!playlist) {
+        return <NotFound kind="playlist" />;
+    }
+
+    if (playlist.__typename === "NotAllowed") {
+        return <ErrorPage title={t("api-remote-errors.view.playlist")} />;
+    }
+    if (playlist.__typename !== "AuthorizedPlaylist") {
+        return unreachable();
+    }
+
+    const items = playlist.entries.map(entry => {
+        if (entry.__typename === "AuthorizedEvent") {
+            const out = readInlineData<VideoListEventData$key>(videoListEventFragment, entry);
+            return out;
+        } else if (entry.__typename === "Missing") {
+            return "missing";
+        } else if (entry.__typename === "NotAllowed") {
+            return "unauthorized";
+        } else {
+            return unreachable();
+        }
+    });
+
+    return <div css={{ display: "flex", flexDirection: "column" }}>
+        <Breadcrumbs path={[]} tail={playlist.title} />
+        <PageTitle title={playlist.title} />
+        <p css={{ maxWidth: "90ch" }}>{playlist.description}</p>
+        <div css={{ marginTop: 12 }}>
+            <VideoListBlock
+                allowOriginalOrder={true}
+                initialOrder="ORIGINAL"
+                title={t("series.videos.heading")}
+                basePath="/!v"
+                items={items}
+            />
+        </div>
+    </div>;
+};
diff --git a/frontend/src/ui/Blocks/Series.tsx b/frontend/src/ui/Blocks/Series.tsx
index fc23a6b43..a8ef271ad 100644
--- a/frontend/src/ui/Blocks/Series.tsx
+++ b/frontend/src/ui/Blocks/Series.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import { graphql, useFragment } from "react-relay";
+import { graphql, readInlineData, useFragment } from "react-relay";
 
 import { isSynced } from "../../util";
 import type { Fields } from "../../relay";
@@ -11,7 +11,8 @@ import {
     SeriesBlockSeriesData$key,
 } from "./__generated__/SeriesBlockSeriesData.graphql";
 import { Card } from "../Card";
-import { VideoListBlock, VideoListBlockContainer } from "./VideoList";
+import { VideoListBlock, VideoListBlockContainer, videoListEventFragment } from "./VideoList";
+import { VideoListEventData$key } from "./__generated__/VideoListEventData.graphql";
 
 
 // ==============================================================================================
@@ -79,6 +80,9 @@ type Props = SharedFromSeriesProps & {
 
 const SeriesBlock: React.FC<Props> = ({ series, ...props }) => {
     const { t } = useTranslation();
+    const events = series.events.map(event => (
+        readInlineData<VideoListEventData$key>(videoListEventFragment, event)
+    ));
 
     if (!isSynced(series)) {
         const { title, layout } = props;
@@ -89,11 +93,14 @@ const SeriesBlock: React.FC<Props> = ({ series, ...props }) => {
 
     return <VideoListBlock
         initialLayout={props.layout}
-        initialOrder={props.order}
+        initialOrder={
+            (props.order === "%future added value" ? undefined : props.order) ?? "NEW_TO_OLD"
+        }
+        allowOriginalOrder={false}
         title={props.title ?? (props.showTitle ? series.title : undefined)}
         description={(props.showMetadata && series.syncedData.description) || undefined}
         activeEventId={props.activeEventId}
         basePath={props.basePath}
-        eventsFrag={series.events}
+        items={events}
     />;
 };
diff --git a/frontend/src/ui/Blocks/VideoList.tsx b/frontend/src/ui/Blocks/VideoList.tsx
index e48493fd9..e27c1f674 100644
--- a/frontend/src/ui/Blocks/VideoList.tsx
+++ b/frontend/src/ui/Blocks/VideoList.tsx
@@ -8,37 +8,39 @@ import React, {
     useState,
 } from "react";
 import { useTranslation } from "react-i18next";
+import type { i18n } from "i18next";
 import {
     match, unreachable, ProtoButton, screenWidthAtMost, screenWidthAbove,
-    useColorScheme, Floating, FloatingHandle, useFloatingItemProps,
+    useColorScheme, Floating, FloatingHandle, useFloatingItemProps, bug,
 } from "@opencast/appkit";
 import { keyframes } from "@emotion/react";
 import { IconType } from "react-icons";
 import {
-    LuColumns, LuList, LuChevronLeft, LuChevronRight, LuPlay, LuLayoutGrid,
+    LuColumns, LuList, LuChevronLeft, LuChevronRight, LuPlay, LuLayoutGrid, LuAlertCircle, LuInfo,
 } from "react-icons/lu";
-import { graphql, useFragment } from "react-relay";
+import { graphql } from "react-relay";
 
 import { keyOfId } from "../../util";
 import { Link } from "../../router";
-import { VideoListOrder, VideoListLayout } from "./__generated__/SeriesBlockData.graphql";
-import { isPastLiveEvent, isUpcomingLiveEvent, Thumbnail } from "../Video";
+import { VideoListLayout } from "./__generated__/SeriesBlockData.graphql";
+import {
+    BaseThumbnailReplacement, isPastLiveEvent, isUpcomingLiveEvent, Thumbnail,
+    ThumbnailOverlayContainer,
+} from "../Video";
 import { RelativeDate } from "../time";
 import { CollapsibleDescription, SmallDescription } from "../metadata";
 import { darkModeBoxShadow, ellipsisOverflowCss, focusStyle } from "..";
 import { COLORS } from "../../color";
 import { FloatingBaseMenu } from "../FloatingBaseMenu";
-import {
-    VideoListEventData$data,
-    VideoListEventData$key,
-} from "./__generated__/VideoListEventData.graphql";
-
+import { VideoListEventData$data } from "./__generated__/VideoListEventData.graphql";
 
 
 
 
-const eventFragment = graphql`
-    fragment VideoListEventData on AuthorizedEvent @relay(plural: true) {
+// This uses `@inline` because the fragment is used in different situations,
+// where using `useFragment` is very tricky (or maybe even impossible).
+export const videoListEventFragment = graphql`
+    fragment VideoListEventData on AuthorizedEvent @inline {
         id
         title
         created
@@ -54,7 +56,7 @@ const eventFragment = graphql`
         }
     }
 `;
-type Event = VideoListEventData$data[0];
+type Event = VideoListEventData$data;
 
 
 // ==============================================================================================
@@ -62,55 +64,134 @@ type Event = VideoListEventData$data[0];
 // ==============================================================================================
 
 type OrderContext = {
-    eventOrder: VideoListOrder;
-    setEventOrder: (newOrder: VideoListOrder) => void;
+    eventOrder: Order;
+    setEventOrder: (newOrder: Order) => void;
+    allowOriginalOrder: boolean;
 };
 
-const OrderContext = createContext<OrderContext>({
-    eventOrder: "NEW_TO_OLD",
-    setEventOrder: () => {},
-});
+const OrderContext = createContext<OrderContext | null>(null);
 
 const VIDEO_GRID_BREAKPOINT = 600;
 
+type VideoListItem = Event | "missing" | "unauthorized";
+
+type Order = "ORIGINAL" | "AZ" | "ZA" | "NEW_TO_OLD" | "OLD_TO_NEW";
+
 export type VideoListBlockProps = {
     basePath: string;
     activeEventId?: string;
-    initialOrder?: VideoListOrder;
+    allowOriginalOrder: boolean;
+    initialOrder: Order;
     initialLayout?: VideoListLayout;
     title?: string;
     description?: string;
-    eventsFrag: VideoListEventData$key;
+    items: ReadonlyArray<VideoListItem>;
 }
 
 export const VideoListBlock: React.FC<VideoListBlockProps> = ({
     basePath,
     activeEventId,
-    initialOrder = "NEW_TO_OLD",
+    allowOriginalOrder,
+    initialOrder,
     initialLayout = "GALLERY",
     title,
     description,
-    eventsFrag,
+    items,
 }) => {
     const { t, i18n } = useTranslation();
-    const collator = new Intl.Collator(i18n.language);
-    const [eventOrder, setEventOrder] = useState<VideoListOrder>(initialOrder);
+    const [eventOrder, setEventOrder] = useState<Order>(initialOrder);
+    const { mainItems, upcomingLiveEvents, hiddenItems } = orderItems(items, eventOrder, i18n);
+
+    const renderEvents = (events: readonly VideoListItem[]) => (
+        <Items
+            basePath={basePath}
+            items={events.map(item => ({
+                item,
+                active: item !== "missing"
+                    && item !== "unauthorized"
+                    && item.id === activeEventId,
+            }))}
+        />
+    );
 
-    const events = useFragment(eventFragment, eventsFrag);
+    const eventsNotEmpty = items.length > 0;
+
+    return <OrderContext.Provider value={{ eventOrder, setEventOrder, allowOriginalOrder }}>
+        <VideoListBlockContainer
+            showViewOptions={eventsNotEmpty}
+            {...{ title, description, initialLayout }}
+        >
+            {(mainItems.length === 0 && upcomingLiveEvents.length === 0)
+                ? <div css={{ padding: 14 }}>{t("videolist-block.no-videos")}</div>
+                : <>
+                    {upcomingLiveEvents.length > 1 && (
+                        <UpcomingEventsGrid count={upcomingLiveEvents.length}>
+                            {renderEvents(upcomingLiveEvents)}
+                        </UpcomingEventsGrid>
+                    )}
+                    {renderEvents(mainItems)}
+                </>
+            }
+            {hiddenItems > 0 && (
+                <div css={{
+                    fontSize: 14,
+                    marginTop: 24,
+                    backgroundColor: COLORS.neutral15,
+                    padding: "8px 16px",
+                    borderRadius: 4,
+                    display: "flex",
+                    gap: 16,
+                    alignItems: "center",
+                }}>
+                    <LuInfo size={18} />
+                    {t("videolist-block.hidden-items", { count: hiddenItems })}
+                </div>
+            )}
+        </VideoListBlockContainer>
+    </OrderContext.Provider>;
+};
+
+type OrderedItems = {
+    mainItems: readonly VideoListItem[];
+    upcomingLiveEvents: Event[];
+    hiddenItems: number;
+};
+
+const orderItems = (
+    items: readonly VideoListItem[],
+    eventOrder: Order,
+    i18n: i18n,
+): OrderedItems => {
+    if (eventOrder === "ORIGINAL") {
+        return {
+            mainItems: items,
+            upcomingLiveEvents: [],
+            hiddenItems: 0,
+        };
+    }
+
+    const upcomingLiveEvents: Event[] = [];
+    const mainItems: VideoListItem[] = [];
+    let hiddenItems = 0;
+    for (const event of items) {
+        // When the order isn't "original", then we don't show special items
+        // inline, but as a separate note at the bottom.
+        if (event === "missing" || event === "unauthorized") {
+            hiddenItems += 1;
+            continue;
+        }
 
-    const upcomingLiveEvents = [];
-    const mainEvents = [];
-    for (const event of events) {
         if (isUpcomingLiveEvent(event.syncedData?.startTime ?? null, event.isLive)) {
             upcomingLiveEvents.push(event);
         } else if (!isPastLiveEvent(event.syncedData?.endTime ?? null, event.isLive)) {
-            mainEvents.push(event);
+            mainItems.push(event);
         }
     }
 
     const timeMs = (event: Event) =>
         new Date(event.syncedData?.startTime ?? event.created).getTime();
 
+    const collator = new Intl.Collator(i18n.language);
     const compareEvents = (a: Event, b: Event, reverseTime = false) =>
         match(eventOrder, {
             "NEW_TO_OLD": () => reverseTime ? timeMs(a) - timeMs(b) : timeMs(b) - timeMs(a),
@@ -119,7 +200,17 @@ export const VideoListBlock: React.FC<VideoListBlockProps> = ({
             "ZA": () => collator.compare(b.title, a.title),
         }, unreachable);
 
-    mainEvents.sort((a, b) => {
+
+    mainItems.sort((a, b) => {
+        // Sort all missing and unauthorized items last. The `return` is
+        // basically unreachable code, so it could also be replaced by
+        // `unreachable`.
+        const aSpecial = a === "missing" || a === "unauthorized";
+        const bSpecial = b === "missing" || b === "unauthorized";
+        if (aSpecial || bSpecial) {
+            return +aSpecial - +bSpecial;
+        }
+
         // Sort all live events before non-live events.
         if (a.isLive !== b.isLive) {
             return +b.isLive - +a.isLive;
@@ -130,39 +221,12 @@ export const VideoListBlock: React.FC<VideoListBlockProps> = ({
 
     // If there is only one upcoming event, it doesn't need an extra box or ordering.
     if (upcomingLiveEvents.length === 1) {
-        mainEvents.unshift(upcomingLiveEvents[0]);
+        mainItems.unshift(upcomingLiveEvents[0]);
     } else {
         upcomingLiveEvents.sort((a, b) => compareEvents(a, b, true));
     }
 
-    const renderEvents = (events: Event[]) => (
-        <Videos
-            basePath={basePath}
-            items={events.map(event => ({ event, active: event.id === activeEventId }))}
-        />
-    );
-
-
-    const eventsNotEmpty = events.length > 0;
-
-    return <OrderContext.Provider value={{ eventOrder, setEventOrder }}>
-        <VideoListBlockContainer
-            showViewOptions={eventsNotEmpty}
-            {...{ title, description, initialLayout }}
-        >
-            {!eventsNotEmpty
-                ? <div css={{ padding: 14 }}>{t("series.no-events")}</div>
-                : <>
-                    {upcomingLiveEvents.length > 1 && (
-                        <UpcomingEventsGrid count={upcomingLiveEvents.length}>
-                            {renderEvents(upcomingLiveEvents)}
-                        </UpcomingEventsGrid>
-                    )}
-                    {renderEvents(mainEvents)}
-                </>
-            }
-        </VideoListBlockContainer>
-    </OrderContext.Provider>;
+    return { mainItems, upcomingLiveEvents, hiddenItems };
 };
 
 
@@ -258,14 +322,14 @@ export const VideoListBlockContainer: React.FC<VideoListBlockContainerProps> = (
 const OrderMenu: React.FC = () => {
     const { t } = useTranslation();
     const ref = useRef<FloatingHandle>(null);
-    const order = useContext(OrderContext);
+    const order = useContext(OrderContext) ?? bug("order context not defined for videolist block");
 
     const triggerContent = match(order.eventOrder, {
+        "ORIGINAL": () => t("videolist-block.settings.original"),
         "NEW_TO_OLD": () => t("videolist-block.settings.new-to-old"),
         "OLD_TO_NEW": () => t("videolist-block.settings.old-to-new"),
         "AZ": () => t("videolist-block.settings.a-z"),
         "ZA": () => t("videolist-block.settings.z-a"),
-        "%future added value": () => unreachable(),
     });
 
     return <FloatingBaseMenu
@@ -313,7 +377,8 @@ const List: React.FC<ListProps> = ({ type, close }) => {
     const { t } = useTranslation();
     const isDark = useColorScheme().scheme === "dark";
     const { layoutState, setLayoutState } = useContext(LayoutContext);
-    const { eventOrder, setEventOrder } = useContext(OrderContext);
+    const { eventOrder, setEventOrder, allowOriginalOrder }
+        = useContext(OrderContext) ?? bug("missing order context");
     const itemProps = useFloatingItemProps();
     const itemId = useId();
 
@@ -349,13 +414,16 @@ const List: React.FC<ListProps> = ({ type, close }) => {
         ["LIST", "list", LuList],
     ];
 
-    type OrderTranslationKey = "new-to-old" | "old-to-new" | "a-z" | "z-a";
-    const orderItems: [VideoListOrder, OrderTranslationKey][] = [
+    type OrderTranslationKey = "original" | "new-to-old" | "old-to-new" | "a-z" | "z-a";
+    const orderItems: [Order, OrderTranslationKey][] = [
         ["NEW_TO_OLD", "new-to-old"],
         ["OLD_TO_NEW", "old-to-new"],
         ["AZ", "a-z"],
         ["ZA", "z-a"],
     ];
+    if (allowOriginalOrder) {
+        orderItems.unshift(["ORIGINAL", "original"]);
+    }
 
     const sharedProps = (key: LayoutTranslationKey | OrderTranslationKey) => ({
         close: close,
@@ -466,12 +534,12 @@ const MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({
 type ViewProps = {
     basePath: string;
     items: {
-        event: Event;
+        item: VideoListItem;
         active: boolean;
     }[];
 };
 
-const Videos: React.FC<ViewProps> = ({ basePath, items }) => {
+const Items: React.FC<ViewProps> = ({ basePath, items }) => {
     const { layoutState } = useContext(LayoutContext);
     return match(layoutState, {
         SLIDER: () => <SliderView {...{ basePath, items }} />,
@@ -559,10 +627,10 @@ const GalleryView: React.FC<ViewProps> = ({ basePath, items }) => (
             gridTemplateColumns: `repeat(auto-fill, minmax(${ITEM_MIN_SIZE_SMALL_SCREENS}px, 1fr))`,
         },
     }}>
-        {items.map(({ event, active }) => (
+        {items.map(({ item, active }, idx) => (
             <Item
-                key={event.id}
-                {...{ event, active, basePath }}
+                key={idx}
+                {...{ item, active, basePath }}
                 css={{
                     width: "100%",
                     maxWidth: ITEM_MAX_SIZE,
@@ -589,10 +657,10 @@ const ListView: React.FC<ViewProps> = ({ basePath, items }) => (
         flexDirection: "column",
         alignItems: "center",
     }}>
-        {items.map(({ event, active }) => (
+        {items.map(({ item, active }, idx) => (
             <Item
-                key={event.id}
-                {...{ event, active, basePath }}
+                key={idx}
+                {...{ item, active, basePath }}
                 showDescription
                 css={{
                     width: "100%",
@@ -671,10 +739,10 @@ const SliderView: React.FC<ViewProps> = ({ basePath, items }) => {
                 scrollMargin: 6,
             },
         }}>
-            {items.map(({ event, active }) => (
+            {items.map(({ item, active }, idx) => (
                 <Item
-                    key={event.id}
-                    {...{ event, active, basePath }}
+                    key={idx}
+                    {...{ item, active, basePath }}
                     css={{
                         scrollSnapAlign: "start",
                         flex: "0 0 270px",
@@ -740,26 +808,37 @@ const UpcomingEventsGrid: React.FC<UpcomingEventsGridProps> = ({ count, children
 
 type ItemProps = {
     basePath: string;
-    event: Event;
+    item: VideoListItem;
     active: boolean;
     showDescription?: boolean;
     className?: string;
 };
 
 const Item: React.FC<ItemProps> = ({
-    event,
+    item,
     basePath,
     active,
     showDescription = false,
     className,
 }) => {
+    const { t } = useTranslation();
+    const isPlaceholder = item === "missing" || item === "unauthorized";
+
     const TRANSITION_IN_DURATION = "0.15s";
     const TRANSITION_OUT_DURATION = "0.3s";
-    const date = event.syncedData?.startTime ?? event.created;
 
-    const inner = <>
-        <div css={{ borderRadius: 8, position: "relative" }}>
-            <Thumbnail event={event} active={active} />
+    const thumbnail = isPlaceholder
+        ? <ThumbnailOverlayContainer>
+            <BaseThumbnailReplacement css={{
+                background: "repeating-linear-gradient(115deg, "
+                    + "#2e2e2e, #2e2e2e 30px, #292929 30px, #292929 60px)",
+                color: "#dbdbdb",
+            }}>
+                <LuAlertCircle />
+            </BaseThumbnailReplacement>
+        </ThumbnailOverlayContainer>
+        : <>
+            <Thumbnail event={item} active={active} />
             <div css={{
                 position: "absolute",
                 top: 0,
@@ -779,7 +858,23 @@ const Item: React.FC<ItemProps> = ({
                     transform: "translateY(-60px) rotate(30deg)",
                 }} />
             </div>
-        </div>
+        </>;
+    const title = (() => {
+        const placeholderStyle = {
+            fontWeight: "normal",
+            color: COLORS.neutral80,
+        } as const;
+        if (item === "missing") {
+            return <i css={placeholderStyle}>{t("videolist-block.missing-video")}</i>;
+        } else if (item === "unauthorized") {
+            return <i css={placeholderStyle}>{t("videolist-block.unauthorized")}</i>;
+        } else {
+            return item.title;
+        }
+    })();
+
+    const inner = <>
+        <div css={{ position: "relative" }}>{thumbnail}</div>
         <div css={{
             margin: "0px 4px",
             marginTop: 12,
@@ -805,31 +900,36 @@ const Item: React.FC<ItemProps> = ({
                     fontSize: "inherit",
                     lineHeight: 1.3,
                     ...ellipsisOverflowCss(2),
-                }}>{event.title}</div>
+                }}>{title}</div>
             </h3>
-            <div css={{
-                color: COLORS.neutral80,
-                fontSize: 14,
-                display: "flex",
-                flexWrap: "wrap",
-                "& > span": {
-                    display: "inline-block",
-                    whiteSpace: "nowrap",
-                },
-            }}>
-                {event.creators.length > 0 && <span css={{
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    "&:after": {
-                        content: "'•'",
-                        padding: "0 8px",
+            {!isPlaceholder && <>
+                <div css={{
+                    color: COLORS.neutral80,
+                    fontSize: 14,
+                    display: "flex",
+                    flexWrap: "wrap",
+                    "& > span": {
+                        display: "inline-block",
+                        whiteSpace: "nowrap",
                     },
-                    // TODO: maybe find something better than `join`
-                }}>{event.creators.join(", ")}</span>}
-                {/* `new Date` is well defined for our ISO Date strings */}
-                <RelativeDate date={new Date(date)} isLive={event.isLive} />
-            </div>
-            {showDescription && <SmallDescription lines={3} text={event.description} />}
+                }}>
+                    {item.creators.length > 0 && <span css={{
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        "&:after": {
+                            content: "'•'",
+                            padding: "0 8px",
+                        },
+                        // TODO: maybe find something better than `join`
+                    }}>{item.creators.join(", ")}</span>}
+                    {/* `new Date` is well defined for our ISO Date strings */}
+                    <RelativeDate
+                        date={new Date(item.syncedData?.startTime ?? item.created)}
+                        isLive={item.isLive}
+                    />
+                </div>
+                {showDescription && <SmallDescription lines={3} text={item.description} />}
+            </>}
         </div>
     </>;
 
@@ -841,7 +941,7 @@ const Item: React.FC<ItemProps> = ({
         textDecoration: "none",
         "& a": { color: COLORS.neutral90, textDecoration: "none" },
         ...active && { backgroundColor: COLORS.neutral20 },
-        ...!active && {
+        ...!active && !isPlaceholder && {
             "& > div:first-child": {
                 transition: `transform ${TRANSITION_OUT_DURATION}, `
                     + `box-shadow ${TRANSITION_OUT_DURATION},`
@@ -864,10 +964,10 @@ const Item: React.FC<ItemProps> = ({
         },
     } as const;
 
-    return active
+    return (active || isPlaceholder)
         ? <div css={containerStyle} {...{ className }}>{inner}</div>
         : <Link
-            to={`${basePath}/${keyOfId(event.id)}`}
+            to={`${basePath}/${keyOfId(item.id)}`}
             css={containerStyle}
             {...{ className }}
         >{inner}</Link>;
diff --git a/frontend/src/ui/Video.tsx b/frontend/src/ui/Video.tsx
index 19727601d..3e7ee9b9a 100644
--- a/frontend/src/ui/Video.tsx
+++ b/frontend/src/ui/Video.tsx
@@ -110,12 +110,7 @@ export const ThumbnailReplacement: React.FC<ThumbnailReplacementProps> = (
     // Otherwise we use a generic icon.
     const icon = audioOnly ? <LuVolume2 /> : <LuFilm />;
 
-    return <div css={{
-        display: "flex",
-        height: "100%",
-        alignItems: "center",
-        justifyContent: "center",
-        fontSize: 40,
+    return <BaseThumbnailReplacement css={{
         background: "linear-gradient(135deg, #33333380 50%, transparent 0),"
             + "linear-gradient(-135deg, #33333380 50%, transparent 0)",
         backgroundSize: "17px 17px",
@@ -129,9 +124,25 @@ export const ThumbnailReplacement: React.FC<ThumbnailReplacementProps> = (
                 : "linear-gradient(135deg, #3e3e3e80 50%, transparent 0),"
                     + "linear-gradient(-135deg, #3e3e3e80 50%, transparent 0)",
         },
-    }}>{icon}</div>;
+    }}>{icon}</BaseThumbnailReplacement>;
 };
 
+type BaseThumbnailReplacementProps = PropsWithChildren<{
+    className?: string;
+}>;
+export const BaseThumbnailReplacement: React.FC<BaseThumbnailReplacementProps> = ({
+    children,
+    className,
+}) => (
+    <div {...{ className }} css={{
+        display: "flex",
+        height: "100%",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: 40,
+    }}>{children}</div>
+);
+
 type ThumbnailOverlayProps = PropsWithChildren<{
     backgroundColor: string;
 }>;
diff --git a/frontend/src/util/index.ts b/frontend/src/util/index.ts
index b12fd2614..e700c9e0a 100644
--- a/frontend/src/util/index.ts
+++ b/frontend/src/util/index.ts
@@ -26,6 +26,9 @@ export const eventId = (key: string) => `ev${key}`;
 /** Constructs series ID for graphQL by adding the "sr" prefix. */
 export const seriesId = (key: string) => `sr${key}`;
 
+/** Constructs series ID for graphQL by adding the "sr" prefix. */
+export const playlistId = (key: string) => `pl${key}`;
+
 /**
  * Create a comparison function for `Array.prototype.sort` comparing whatever
  * the given key function returns as numbers.