diff --git a/bskyembed/assets/play_filled_corner0_rounded.svg b/bskyembed/assets/play_filled_corner0_rounded.svg
new file mode 100644
index 0000000000..19d951a1b2
--- /dev/null
+++ b/bskyembed/assets/play_filled_corner0_rounded.svg
@@ -0,0 +1 @@
+
diff --git a/bskyembed/src/components/embed.tsx b/bskyembed/src/components/embed.tsx
index 105c785820..a7c1d92156 100644
--- a/bskyembed/src/components/embed.tsx
+++ b/bskyembed/src/components/embed.tsx
@@ -14,7 +14,7 @@ import {ComponentChildren, h} from 'preact'
import {useMemo} from 'preact/hooks'
import infoIcon from '../../assets/circleInfo_stroke2_corner0_rounded.svg'
-import playIcon from '../../assets/play_filled_corner2_rounded.svg'
+import playIcon from '../../assets/play_filled_corner0_rounded.svg'
import starterPackIcon from '../../assets/starterPack.svg'
import {CONTENT_LABELS, labelsToInfo} from '../labels'
import * as bsky from '../types/bsky'
@@ -389,7 +389,6 @@ function GenericWithImageEmbed({
)
}
-// just the thumbnail and a play button
function VideoEmbed({content}: {content: AppBskyEmbedVideo.View}) {
let aspectRatio = 1
@@ -398,6 +397,28 @@ function VideoEmbed({content}: {content: AppBskyEmbedVideo.View}) {
aspectRatio = clamp(width / height, 1 / 1, 3 / 1)
}
+ const supportsHls = useMemo(() => {
+ const video = document.createElement('video')
+ return video.canPlayType('application/vnd.apple.mpegurl') !== ''
+ }, [])
+
+ if (supportsHls) {
+ return (
+