diff --git a/app/soapbox/utils/__tests__/media.test.ts b/app/soapbox/utils/__tests__/media.test.ts
index 815b123212..56a02aebc5 100644
--- a/app/soapbox/utils/__tests__/media.test.ts
+++ b/app/soapbox/utils/__tests__/media.test.ts
@@ -6,6 +6,13 @@ describe('addAutoPlay()', () => {
const html = '';
expect(addAutoPlay(html)).toEqual('');
});
+
+ describe('when the iframe src already has params', () => {
+ it('adds the correct query parameters to the src', () => {
+ const html = '';
+ expect(addAutoPlay(html)).toEqual('');
+ });
+ });
});
describe('when the provider is not Rumble', () => {
@@ -13,5 +20,12 @@ describe('addAutoPlay()', () => {
const html = '';
expect(addAutoPlay(html)).toEqual('');
});
+
+ describe('when the iframe src already has params', () => {
+ it('adds the correct query parameters to the src', () => {
+ const html = '';
+ expect(addAutoPlay(html)).toEqual('');
+ });
+ });
});
});
diff --git a/app/soapbox/utils/media.ts b/app/soapbox/utils/media.ts
index 27a1f6ba07..ff0bf502e1 100644
--- a/app/soapbox/utils/media.ts
+++ b/app/soapbox/utils/media.ts
@@ -53,24 +53,29 @@ const getVideoDuration = (file: File): Promise => {
const domParser = new DOMParser();
+enum VideoProviders {
+ RUMBLE = 'rumble.com'
+}
+
const addAutoPlay = (html: string): string => {
const document = domParser.parseFromString(html, 'text/html').documentElement;
const iframe = document.querySelector('iframe');
if (iframe) {
- if (iframe.src.includes('?')) {
- iframe.src += '&';
- } else {
- iframe.src += '?';
- }
+ const url = new URL(iframe.src);
+ const provider = new URL(iframe.src).host;
- if (new URL(iframe.src).host === 'rumble.com') {
- iframe.src += 'pub=7a20&autoplay=2';
+ if (provider === VideoProviders.RUMBLE) {
+ url.searchParams.append('pub', '7a20');
+ url.searchParams.append('autoplay', '2');
} else {
- iframe.src += 'autoplay=1&auto_play=1';
+ url.searchParams.append('autoplay', '1');
+ url.searchParams.append('auto_play', '1');
iframe.allow = 'autoplay';
}
+ iframe.src = url.toString();
+
// DOM parser creates html/body elements around original HTML fragment,
// so we need to get innerHTML out of the body and not the entire document
return (document.querySelector('body') as HTMLBodyElement).innerHTML;