# Spaceを別のウェブサイトに埋め込む

Spaceが正常に動作するようになったら、ウェブサイトやブログに埋め込みたい場合があるでしょう。Spaceを埋め込む、または共有することは、視聴者がセットアップなしであなたの作品やデモと対話できるようにする優れた方法です。Spaceを埋め込むには、その表示設定が**public**または**protected**である必要があります。protectedのSpaceは、Hub上ではソースコードを非公開に保ちつつ、埋め込みURL（設定されている場合は[カスタムドメイン](./spaces-custom-domain)）を通じて公開アクセス可能になります。詳細は[Spaceの表示設定](./spaces-overview#space-visibility)を参照してください。

## 直接URL

Spaceには、そのSpaceを共有したりウェブサイトに埋め込んだりするために使用できる一意のURLが割り当てられます。

このURLは、`"https://<space-subdomain>.hf.space"` という形式です。例えば、Space [NimaBoscarino/hotdog-gradio](https://huggingface.co/spaces/NimaBoscarino/hotdog-gradio) に対応するURLは `"https://nimaboscarino-hotdog-gradio.hf.space"` です。サブドメインは一意であり、Spaceを移動または名前を変更した場合にのみ変更されます。

スペースは常にこのサブドメインのルートから配信されます。

オプションメニューから、SpaceのURLと、それを埋め込むためのサンプルスニペットを直接確認できます:

## IFrames による埋め込み

Spaceのデフォルトの埋め込み方法はIFramesを使用することです。Spaceを埋め込みたいHTMLの位置に、以下の要素を追加してください:

```html
<iframe
    src="https://<space-subdomain>.hf.space"
    frameborder="0"
    width="850"
    height="450"
></iframe>
```

例えば、[NimaBoscarino/hotdog-gradio](https://huggingface.co/spaces/NimaBoscarino/hotdog-gradio) Space を使用する場合:

## WebComponents による埋め込み

埋め込みたい Space が Gradio ベースの場合、Web Components を使用して Space を埋め込むことができます。WebComponents は IFrames よりも高速で、Web ページに自動的に調整されるため、要素の `width` や `height` を設定する必要はありません。まず、Space の Gradio バージョンに対応する Gradio JS ライブラリを、HTML に以下のスクリプトを追加してインポートする必要があります。

次に、Space を埋め込みたい場所に `gradio-app` 要素を追加します。
```html
<gradio-app src="https://<space-subdomain>.hf.space"></gradio-app>
```

詳細については、[Gradioのドキュメント](https://www.gradio.app/guides/sharing-your-app#embedding-hosted-spaces)を参照してください。