Embed with iFrame

An IFrame (Inline Frame) is an HTML document embedded inside another HTML document on a website. The IFrame HTML element is often used to insert content from another source, such as an advertisement, into a Web page.

Steps to Modify an Existing Embed Code

• Capture (select and copy) the embed code for any You Tube video, or use the code below.
  The highlighted part of the url is the unique identifier of the youtube video.

<iframe src="https://www.youtube.com/embed/sGF6bOi1NfA" width="560" height="315" allowfullscreen="allowfullscreen"></iframe>

• Replace the highlighted text with the URL of the web page you want to display in the iframe - below we are displaying a video from the vimeo service. https://player.vimeo.com/video/117221577?color=ffda39&title=0&byline=0&portrait=0 Links to an external site. 
• After you have done this, the code will now look like the example below:

<iframe src="https://player.vimeo.com/video/117221577?color=ffda39&title=0&byline=0&portrait=0" width="560" height="315" allowfullscreen="allowfullscreen"></iframe>

• Because we are displaying a web page, lets extend the iframe to fit the page.
  To do so, make the following revisions to the size (blue highlights):
  
  
• width="98%". By setting the width to 98%, you are just about filling up the entire width of the Canvas page, and by using a percentage instead of a specific pixel width, your iframe will correctly size in mobile devices.
• height="600". a 600 pixels high iframe will completely display display top-to-bottom in the space Canvas makes available for pages on your monitor.
  
  
• The final embed code will look like this:

<iframe src="https://player.vimeo.com/video/117221577?color=ffda39&title=0&byline=0&portrait=0" width="98%" height="600" allowfullscreen="allowfullscreen"></iframe>

• Copy your final revision of the code,
• Navigate to the page in which you want to embed the new iframe,
• Click "Edit", then toggle to the "HTML Editor", and paste your code Where you would like it to appear on your page. Most likely, you will simply scroll to the end of the code that describes everything you typed at the top of that page.
• Paste your revised code into the HTML Editor,
• Click Save and view the results.

Below you will see the resulting iframe with embedded web page. If necessary, you can fiddle with the height to better suit your needs.

- thats it!