diff --git a/apps/frontend/src/pages/news/article/[slug].vue b/apps/frontend/src/pages/news/article/[slug].vue index ffdd86c086..d7d78dcb63 100644 --- a/apps/frontend/src/pages/news/article/[slug].vue +++ b/apps/frontend/src/pages/news/article/[slug].vue @@ -4,7 +4,7 @@ import { articles as rawArticles } from '@modrinth/blog' import { Avatar, ButtonStyled } from '@modrinth/ui' import type { User } from '@modrinth/utils' import dayjs from 'dayjs' -import { computed } from 'vue' +import { computed, onMounted } from 'vue' import NewsletterButton from '~/components/ui/NewsletterButton.vue' import ShareArticleButtons from '~/components/ui/ShareArticleButtons.vue' @@ -74,6 +74,36 @@ useSeoMeta({ twitterCard: 'summary_large_image', twitterImage: () => thumbnailPath.value, }) + +onMounted(() => { + const videos = document.querySelectorAll('.markdown-body video') + + if ('IntersectionObserver' in window) { + const videoObserver = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + const video = entry.target as HTMLVideoElement + if (entry.isIntersecting) { + video.play().catch(() => {}) + } else { + video.pause() + } + }) + }, + { + threshold: 0.5, + }, + ) + + videos.forEach((video) => { + videoObserver.observe(video) + }) + } else { + videos.forEach((video) => { + ;(video as HTMLVideoElement).setAttribute('autoplay', '') + }) + } +})