How to Embed Videos from Youtube or Vimeo to a Sandbox?

Using BSD Online
1

Embedding a Video

To get ready, log in to BSD Online and open a blank sandbox. If you want, you can also add titles and texts to an existing sandbox. Once your sandbox is ready, follow the steps below:

Embedding a Video from YouTube:

  1. Go to YouTube and select a video to embed.

  2. Click the Share icon to bring up the sharing options.

  3. Click the Embed from the list.

  4. Click the Copy button to copy the code.

  5. Paste the code to your sandbox.

Embedding a Video from Vimeo:

  1. Go to Vimeo and select the video that you want to embed.

  2. Click the Share icon.

  3. Copy the code from the Embed textbox.

  4. Paste the code to your HTML file and remove unnecessary tags or elements. You’ll only need the <iframe> element and its attributes so you can delete the <p> and the <a> tags.

The <iframe> Element

Now that we have the videos embedded, let’s learn about the <iframe> element.

An <frame> element is used to display a web page within a web page. It can also be used to embed videos on a web page. Unlike the <video> tag, the <iframe> element supports most of existing browsers.

You can define the height and the width of an <iframe> element using CSS. In the picture below, you’ll learn how to use CSS to define the element’s width, height, and border.

Aside from the styling, some attributes can be added to the <iframe> element. Here are some of the most used attributes:

  1. The frameborder is another way to add or remove an <iframe> element’s border. By default, an <iframe> element has a border. To remove the border, set the value of the frameborder attribute to zero (0). For example, <iframe frameborder="0" src=""></iframe>.

  2. The allow="fullscreen" atrribute and value gives control to set the <iframe> content to fullscreen mode.

  3. If allow="autoplay" is added, the video will play automatically.

Here’s how you can use fullscreen and autoplay:
<frame allow=“fullscreen; autoplay;” src=“app.bsd.education”></iframe>

Here’s an example sandbox so you can see how it works: Embedding a YouTube or Vimeo to a Sandbox

If you have some questions regarding this. You can reach us through chat on BSD Online.