[BUG] Fix ExternalVideo render error in Gallery.client.jsx and update ExternalVideo to support embed compatible urls

[johncraigcole]

Describe the bug
If a given product resource has an external video the Gallery.client.jsx component causes a render error because an EXTERNAL_VIDEO_TYPE does not have an image attribute like that of MODEL_3D_TYPE and VIDEO_TYPE.

In Gallery.client.jsx Handling the external video type similar to MODEL_3D_TYPE prevents the render error from happening

const galleryMedia = media.filter((med) => {
    if (
      med.mediaContentType === MODEL_3D_TYPE ||
      med.mediaContentType === VIDEO_TYPE || 
      med.mediaContentType === EXTERNAL_VIDEO_TYPE
    ) {
      return true;
    }

    return !med.image.url.includes(featuredMediaSrc);
  });

but then uncovers that embeddedUrl returned from the Storefront API is not actually an embed compatible url that will properly render in an iFrame.

The ExternalVideoType of the Storefront API has been adjusted to deprecate embeddedUrl and introduce two new fields. embedUrl and originUrl. The embedUrl field represents an iFrame embed compatible URL and should be used instead of embeddedUrl.

To Reproduce

• The initial render error noted above can be seen here which is a product with an external video from this stackblitz instance.
• After observing the render error for the bach-c-trumpet you can adjust the Gallery.client.jsx component as illustrated above to further see the error in connecting to youtube.com. Manually adjusting the iFrame source with browser tools to a proper embed compatible url will correct the connection error.

Expected behaviour
External videos added to product resources in Shopify should render and properly connect via the iFrame to the supported external video services Youtube and Vimeo.