ネットワークカメラをホームページに埋め込む方法【HTML・WordPress対応】

2026年04月29日

ネットワークカメラ（IPカメラ）の映像をホームページに埋め込みたい方向けに、初心者でも簡単にできる方法を解説します。
HTML・WordPress両方に対応し、「表示されない原因」や「スマホ対応」まで網羅しています。

この記事でわかること

ネットワークカメラをホームページに埋め込む方法

方法①：iframeで埋め込む（最も簡単）

ネットワークカメラのURL（IPアドレス）を使えば、iframeで簡単に埋め込みできます。

ポイント

• 同一ネットワーク内でのみ表示される場合あり
• 機種によってはログインが必要

方法②：RTSPをWeb表示（中級者向け）

RTSP形式のカメラはそのままではブラウザ表示できないため以下のような変換が必要です。

• RTSP → HLS変換
• サーバー経由で配信
• VLCやFFmpegを使用

この方法は安定性が高く、外部公開にも向いています。

WordPressでネットワークカメラを埋め込む方法

① カスタムHTMLブロックを使う

WordPressの投稿画面で「カスタムHTML」を選択し、iframeタグを貼り付けます。

② プラグインを使う

• Advanced iFrame
• Embed Any Document

スマホ対応（レスポンシブ設定）

スマホでも見やすくするには以下のCSSを追加します

ネットワークカメラが表示されない原因

① ポート開放されていない

外部からアクセスする場合はポート開放設定（ルーター設定）が必要です

② HTTPSとHTTPの混在

サイトがHTTPSの場合、HTTPカメラはブロックされる場合があるので注意が必要です。

③ 認証エラー

「ユーザー名・パスワード」の設定が違っていることがよくあります。認証エラーが発生する場合はまずユーザー名とパスワードを確認しましょう。

セキュリティ対策

• パスワード設定は必須
• VPN経由でアクセス
• 公開範囲を制限する

まとめ

ネットワークカメラのホームページ埋め込みは、正しい手順を踏めば誰でも実装できますがポート開放の必要があるのでセキュリティ面での不安が残ります。カメラの乗っ取りなど不安な方は、ライブカメラホームページ埋め込みサービスなどを利用するのが安心かもしれません。