HTML Iframe は、ネストされた Web ページ (Web ページ内の Web ページ) を表示するために使用されます。 HTML

HTML iframe は、現在の HTML ドキュメント内の長方形領域に別のドキュメントを埋め込みます。

Web ページのコンテンツと iframe コンテンツは、JavaScript を使用して相互に対話できます。

CSS太字テキスト

Iframe 構文

HTML iframe は次のように定義されます。

 <iframe src="URL"></iframe> 

ここで、「src」属性はインラインフレームページのWebアドレス(URL)を指定します。

iframe の幅と高さを設定する

「width」属性と「height」属性を使用して、iframe の幅と高さを設定できます。デフォルトでは、属性値はピクセル単位で指定されますが、パーセント単位で設定することもできます。つまり、50%、60%などです。

例: (ピクセル)

 <h2>HTML Iframes example</h2> <p>Use the height and width attributes to specify the size of the iframe:</p> <iframe src="https://www.javatpoint.com/"></iframe> 

例：（パーセンテージ）

 <h2>HTML Iframes</h2> <p>You can use the height and width attributes to specify the size of the iframe:</p> <iframe src="https://www.javatpoint.com/"></iframe> 

CSS を使用して iframe の高さと幅を設定することもできます。

例：

 <h2>HTML Iframes</h2> <p>Use the CSS height and width properties to specify the size of the iframe:</p> <iframe src="https://www.javatpoint.com/"></iframe> 

iframeの境界線を削除する

デフォルトでは、iframe の周囲に境界線が含まれます。属性とCSSのborderプロパティを使用して境界線を削除できます。

例：

 <h2>Remove the Iframe Border</h2> <p>This iframe example doesn&apos;t have any border</p> <iframe src="https://www.javatpoint.com/"></iframe> 

iframe の境界線のサイズ、色、スタイルを変更することもできます。

例：

 <h2>Custom Iframe Border</h2> <iframe src="https://www.javatpoint.com/"></iframe> 

リンクの iframe ターゲット

iframe を使用すると、リンクのターゲット フレームを設定できます。指定したリンクのターゲット属性は、iframe の name 属性を参照する必要があります。

Java文字列クラス

例：

 <h2>Iframe - Target for a Link</h2> <iframe src="new.html" name="iframe_a"></iframe> <p> <a href="https://www.javatpoint.com">JavaTpoint.com</a> </p> <p>The name of iframe and link target must have same value else link will not open as a frame. </p> 

出力

new.hmtl 出力コード:

 p{ font-size: 50px; color: red;} <p>This is a link below the ifarme click on link to open new iframe. </p> 

iframeを使用してYouTubeビデオを埋め込む

を使用して、Web ページに YouTube ビデオを追加することもできます。

Web ページに YouTube ビデオを追加する手順は次のとおりです。

• 埋め込みたい YouTube 動画に移動します。
• ビデオの下にある [共有] ➦ をクリックします。
• 「埋め込み」オプションをクリックします。
• HTMLコードをコピーします。
• HTML ファイルにコードを貼り付けます
• 高さ、幅、その他のプロパティを (要件に応じて) 変更します。

例：

 <iframe src="https://www.youtube.com/embed/JHq3pL4cdy4" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <iframe src="https://www.youtube.com/embed/O5hShUO6wxs" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture">></iframe> 

出力：

文字列Java

の属性