フレーム表示を許可するホストを選ぶ
ゲームホストや作者が提供する専用の埋め込みURLまたはウィジェットの手順を探します。例えばitch.ioは、対応形式でアップロードされた作品のHTML5埋め込み方法を説明しています。ゲームはホスト側から配信され、あなたのページにはそのプレイヤーが表示されます。どのゲームURLもiframeに置ける、またはページをダウンロードすれば再配布権が得られる、と考えないでください。
許可ドメイン、レスポンシブな寸法、全画面動作、クレジット、外部スクリプトやCookieの使用など、必要な設定をホストに確認します。許可が不明なら作者に連絡するか、リンクだけにしましょう。キーボードや支援技術を使う人がゲームを見つけられるよう、タイトルと直接起動リンクを表示します。
レスポンシブな枠を追加して試す
公式の埋め込みコードを出発点にします。iframeに内容がわかるタイトルを付け、適切なアスペクト比を定め、コンテンツ領域の幅に制限します。例えば16:9のゲーム枠をページ幅に合わせて伸縮するコンテナに入れ、1280ピクセル固定にはしません。ゲームが本当に必要としない限り、カメラやマイクの広範な権限を追加しないでください。
スマートフォンとデスクトップ、キーボード操作、ブラウザーコンソールを開いた状態でページを試します。枠が空白なら、ホストのContent Security Policy frame-ancestorsルールかブラウザー制限が原因かもしれません。自分のページを変えてもホスト側の拒否を上書きできません。ホストの状態を確認し、埋め込みに失敗した場合は通常の起動リンクを示しましょう。
ゲームの周りのページも使いやすくする
開始前に音声、キーボード、コントローラーが必要か伝えます。可能なら説明と退出手段を枠の外に置きましょう。埋め込み文書の内部操作を自分のページから見られない場合があります。
ウェブサイトにゲームを埋め込むについての質問
どのブラウザーゲームURLでもiframeに入れられますか？
いいえ。ホストがフレーム表示を拒否することがあり、作者のライセンスが埋め込みを許可しない場合もあります。公式機能を使うか許可を求めましょう。安全な代替はリンクです。
自分のページから埋め込みゲームを操作できますか？
通常、iframeの内部へ直接アクセスして操作することはできません。同一オリジン規則がサイト間アクセスを制限します。操作には両者が提供する文書化済みメッセージAPIが必要です。
関連情報
古い情報を見つけましたか？ 訂正を連絡