external_video_id: render card html instead of hardcoding the provider

app/soapbox/components/status.js

@@ -439,8 +439,7 @@ class Status extends ImmutablePureComponent {
       } else if (size === 1 && status.getIn(['media_attachments', 0, 'type']) === 'video') {
         const video = status.getIn(['media_attachments', 0]);
 
-        const external_id = (video.get('external_video_id'));
+        if (video.external_video_id) {
-        if (external_id) {
           const { mediaWrapperWidth } = this.state;
           const height = mediaWrapperWidth / (video.getIn(['meta', 'original', 'width']) / video.getIn(['meta', 'original', 'height']));
           media = (
@@ -449,16 +448,8 @@ class Status extends ImmutablePureComponent {
                 ref={this.setRef}
                 className='status-card__image status-card-video'
                 style={height ? { height } : {}}
-              >
+                dangerouslySetInnerHTML={{ __html: status.card.html }}
-                <iframe
+              />
-                  src={`https://rumble.com/embed/${external_id}/`}
-                  frameBorder='0'
-                  allowFullScreen
-                  webkitallowfullscreen='true'
-                  mozallowfullscreen='true'
-                  title=''
-                />
-              </div>
             </div>
           );
         } else {

app/soapbox/features/status/components/detailed_status.js

@@ -110,8 +110,7 @@ class DetailedStatus extends ImmutablePureComponent {
     if (size > 0) {
       if (size === 1 && status.getIn(['media_attachments', 0, 'type']) === 'video') {
         const video = status.getIn(['media_attachments', 0]);
-        const external_id = (video.get('external_video_id'));
+        if (video.external_video_id) {
-        if (external_id) {
           const { mediaWrapperWidth } = this.state;
           const height = mediaWrapperWidth / (video.getIn(['meta', 'original', 'width']) / video.getIn(['meta', 'original', 'height']));
           media = (
@@ -120,16 +119,8 @@ class DetailedStatus extends ImmutablePureComponent {
                 ref={this.setRef}
                 className='status-card-video'
                 style={{ height }}
-              >
+                dangerouslySetInnerHTML={{ __html: status.card.html }}
-                <iframe
+              />
-                  src={`https://rumble.com/embed/${external_id}/`}
-                  frameborder='0'
-                  allowFullScreen='true'
-                  webkitallowfullscreen='true'
-                  mozallowfullscreen='true'
-                  title='Video'
-                />
-              </div>
             </div>
           );
         } else {