Make auto-play video optional config

app/soapbox/features/preferences/index.tsx

@@ -193,6 +193,10 @@ const Preferences = () => {
           <SettingToggle settings={settings} settingPath={['autoPlayGif']} onChange={onToggleChange} />
         </ListItem>
 
+        <ListItem label={<FormattedMessage id='preferences.fields.auto_play_video_label' defaultMessage='Auto-play videos' />}>
+          <SettingToggle settings={settings} settingPath={['autoPlayVideo']} onChange={onToggleChange} />
+        </ListItem>
+
         {features.spoilers && <ListItem label={<FormattedMessage id='preferences.fields.expand_spoilers_label' defaultMessage='Always expand posts marked with content warnings' />}>
           <SettingToggle settings={settings} settingPath={['expandSpoilers']} onChange={onToggleChange} />
         </ListItem>}

app/soapbox/features/status/components/card.tsx

@@ -5,6 +5,7 @@ import React, { useState, useEffect } from 'react';
 import Blurhash from 'soapbox/components/blurhash';
 import Icon from 'soapbox/components/icon';
 import { HStack, Stack, Text } from 'soapbox/components/ui';
+import { useSettings } from 'soapbox/hooks';
 import { normalizeAttachment } from 'soapbox/normalizers';
 import { addAutoPlay } from 'soapbox/utils/media';
 
@@ -41,6 +42,9 @@ const Card: React.FC<ICard> = ({
   onOpenMedia,
   horizontal,
 }): JSX.Element => {
+  const settings = useSettings();
+  const shouldAutoPlayVideo = settings.get('autoPlayVideo');
+
   const [width, setWidth] = useState(defaultWidth);
   const [embedded, setEmbedded] = useState(false);
 
@@ -88,7 +92,7 @@ const Card: React.FC<ICard> = ({
   };
 
   const renderVideo = () => {
-    const content = { __html: addAutoPlay(card.html) };
+    const content = { __html: shouldAutoPlayVideo ? addAutoPlay(card.html) : card.html };
     const ratio = getRatio(card);
     const height = width / ratio;