@shopify/hydrogen-react/dist/node-prod/ExternalVideo.mjs

React components, hooks, and utilities for creating custom Shopify storefronts

import { jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
const ExternalVideo = forwardRef(
  (props, ref) => {
    const {
      data,
      options,
      id = data.id,
      frameBorder = "0",
      allow = "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
      allowFullScreen = true,
      loading = "lazy",
      ...passthroughProps
    } = props;
    if (!data.embedUrl) {
      throw new Error(`<ExternalVideo/> requires the 'embedUrl' property`);
    }
    let finalUrl = data.embedUrl;
    if (options) {
      const urlObject = new URL(data.embedUrl);
      for (const [key, value] of Object.entries(options)) {
        if (typeof value === "undefined") {
          continue;
        }
        urlObject.searchParams.set(key, value.toString());
      }
      finalUrl = urlObject.toString();
    }
    return /* @__PURE__ */ jsx(
      "iframe",
      {
        ...passthroughProps,
        id: id ?? data.embedUrl,
        title: data.alt ?? data.id ?? "external video",
        frameBorder,
        allow,
        allowFullScreen,
        src: finalUrl,
        loading,
        ref
      }
    );
  }
);
export {
  ExternalVideo
};
//# sourceMappingURL=ExternalVideo.mjs.map