diff --git a/components/status/StatusAttachment.vue b/components/status/StatusAttachment.vue index 721b3d43..3a23625d 100644 --- a/components/status/StatusAttachment.vue +++ b/components/status/StatusAttachment.vue @@ -65,14 +65,23 @@ const video = ref() const prefersReducedMotion = usePreferredReducedMotion() useIntersectionObserver(video, (entries) => { - if (prefersReducedMotion.value === 'reduce') + const ready = video.value?.dataset.ready === 'true' + if (prefersReducedMotion.value === 'reduce') { + if (ready && !video.value?.paused) + video.value?.pause() + return + } entries.forEach((entry) => { - if (entry.intersectionRatio <= 0.75) - !video.value!.paused && video.value!.pause() - else - video.value!.play() + if (entry.intersectionRatio <= 0.75) { + ready && !video.value?.paused && video.value?.pause() + } + else { + video.value?.play().then(() => { + video.value!.dataset.ready = 'true' + }).catch(noop) + } }) }, { threshold: 0.75 })