Integrate YouTube video using Iframe
×
Home Courses Community Support
Integrate YouTube video using Iframe

<iframe>

iframe is a tag used to display a webpage within another webpage. OR we can use display a audio or video file given on another webpage. This tag create a rectangular region and content from another webpage display within rectangular region. All the attributes for iframe work on that region only.

See below code:

<!DOCTYPE html>
<html>
<head><title>Using iframe</title></head>
<body>
<h3>Below iframe is showing the page list.html - </h3>
<iframe src="list.html" height="300px;" width="400px;" scrolling="auto"></iframe>
</body>
</html>

 

Above code will display the list.html page within iframe.html like below image -
 

Some important Iframe attributes to set properties:

  • Height: It is used to manage the height of iframe.
  • Width: It is used to manage the width of iframe.
  • Scrolling: By using this attribute with NO value, we can stop the iframe content from scrolling.
  • SRC: This attribute give a path of webpage/document, which will be displayed in iframe.
     

Integrate YouTube Video

Now to integrate YouTube video in your webpage you just need URL of that video. Put that URL in src attribute and you have done.

See below example-

<!DOCTYPE html>
<html>
<head><title>Integrate YouTube Video using iframe</title></head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/vCfX8JiuW84"></iframe>
</body>
</html>

 

Above code will display the video as given in below image-

 

Iframe example in gray matter

 

 

enlightenedClick to play the video given from YouTube using iframe.

 

 

← Preview

Adding Audio and Video in HTML

Next →

Basics of HTML Form

NOTES

Our mission is to provide highly effective and quality education via innovative solutions. Geeksdemy look forward to bridge the gap between in-demand technology and academics in order to deliver innovative, easy, interesting and affordable learning across the Globe.

Courses

  • Python
  • Game Development with Unity 3D
  • Arduino
  • PCB & Circuit Designing
  • Robotics and Embedded C
  • 8051/8052 Embedded Systems
  • QuadCopter & UAV
  • MATLAB with Robotics
  • Raspberry Pi
Learn On the Go!
Get the Android App
Get the iOS App