Embedding Videos in a Text Area

There will be times when you wish to embed a video directly into your webpage, rather than simply share a link to it. This guide explains the process.
Note: At this time only videos hosted on YouTube or Vimeo can be embedded. For other video platforms, and other types of embeds, please contact support.


Before You Start: Ensure Accessibility

In order to ensure all of your users can fully access your video content, you'll need proper captioning. Captions provide a text equivalent of the audio information of a video and are synchronized with the video presentation. Captions are an accessible alternative for individuals who cannot hear the content and includes the dialogue, speaker information, and any sound effects present in the video.

Tips for Captions

  • Include all spoken information as well as relevant parts of the soundtrack like background noises such as applause, sound effects, speaker identification, and any audio cues that help the viewer understand the video.
  • Captions should be in the same language as the primary audio content.
  • Use proper punctuation and grammar.
Please visit the Office of Digital Accessibility for  additional information about captions and audio descriptions .

Steps to Add a Video

To add an image through the Text Area, follow these steps.
    .1Place your cursor where you'd like to embed the video, then click on the Media icon.

https://slite.com/api/files/bFt0sNii93Kc_R/create%20flexible%20page%20_%20center%20for%20african%20studies%20(2).png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiNDBNa2tjWno4RFpMZDIiLCJpYXQiOjE3MzIxODE1NDgsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoidW5pVTc5YW85Y1N5YWQiLCJleHAiOjE3MzQ3NzM1NDh9.59sQKkxEJkQ-M6G4ugugaXNv2V9ssIRb72AtOMxEeeA
    .2A new window will appear where you can add a new video or even select an existing image/video/file. Select the Video tab to enter the URL for your video.

https://slite.com/api/files/vumBycri_NuPbU/copy%20of%20create%20flexible%20page%20_%20center%20for%20website%20studies.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiNDBNa2tjWno4RFpMZDIiLCJpYXQiOjE3MzIxODE1NDgsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoidW5pVTc5YW85Y1N5YWQiLCJleHAiOjE3MzQ3NzM1NDh9.59sQKkxEJkQ-M6G4ugugaXNv2V9ssIRb72AtOMxEeeA
    .3Paste the URL and click the "Add" button. Follow theses steps for  Finding the Correct URL to Use⁠ .
    .4After clicking the "Add" button, the window will change in appearance. You will have the option to rename the video if you wish.

https://slite.com/api/files/KR_3sOgZZMIDu3/create%20flexible%20page%20_%20center%20for%20website%20studies%20(5).png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiNDBNa2tjWno4RFpMZDIiLCJpYXQiOjE3MzIxODE1NDgsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoidW5pVTc5YW85Y1N5YWQiLCJleHAiOjE3MzQ3NzM1NDh9.59sQKkxEJkQ-M6G4ugugaXNv2V9ssIRb72AtOMxEeeA
    .5Click "Save and Insert" when you are done.

Adjusting the Alignment of a Video

Your video will default to left alignment. To change this, click on the video to pull up the editing toolbar.

https://slite.com/api/files/sJhkxTXRjjjXP1/copy%20of%20create%20flexible%20page%20_%20center%20for%20website%20studies%20(2).png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiNDBNa2tjWno4RFpMZDIiLCJpYXQiOjE3MzIxODE1NDgsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoidW5pVTc5YW85Y1N5YWQiLCJleHAiOjE3MzQ3NzM1NDh9.59sQKkxEJkQ-M6G4ugugaXNv2V9ssIRb72AtOMxEeeA
The toolbar will allow you to toggle the caption on/off, create a link, and adjust alignment. While the dropdown menu for sizing appears on a video, the only option at this time is full size.

Toolbar Functions

Toggle Caption On


https://slite.com/api/files/xmsDK65DmoGFIC/copy%20of%20copy%20of%20create%20flexible%20page%20_%20center%20for%20website%20studies.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiNDBNa2tjWno4RFpMZDIiLCJpYXQiOjE3MzIxODE1NDgsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoidW5pVTc5YW85Y1N5YWQiLCJleHAiOjE3MzQ3NzM1NDh9.59sQKkxEJkQ-M6G4ugugaXNv2V9ssIRb72AtOMxEeeA
Toggling captions allows you to choose whether or not the image caption is visible on the screen. The caption will always be visible to users when users hover over the video, but this tool provides the option to control whether or not it is displayed outright.


Link Media


https://slite.com/api/files/cE7zfaUqyrv0xo/copy%20of%20copy%20of%20create%20flexible%20page%20_%20center%20for%20website%20studies%20(1).png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiNDBNa2tjWno4RFpMZDIiLCJpYXQiOjE3MzIxODE1NDgsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoidW5pVTc5YW85Y1N5YWQiLCJleHAiOjE3MzQ3NzM1NDh9.59sQKkxEJkQ-M6G4ugugaXNv2V9ssIRb72AtOMxEeeA
This is the hyperlink button, where you can add internal/external links to the embedded video.


Adjust Image Size and Scale


https://slite.com/api/files/DSZrJYYM3VB5Me/copy%20of%20copy%20of%20create%20flexible%20page%20_%20center%20for%20website%20studies%20(2).png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiNDBNa2tjWno4RFpMZDIiLCJpYXQiOjE3MzIxODE1NDgsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoidW5pVTc5YW85Y1N5YWQiLCJleHAiOjE3MzQ3NzM1NDh9.59sQKkxEJkQ-M6G4ugugaXNv2V9ssIRb72AtOMxEeeA
Clicking here will pull up a dropdown menu, however at this time only "Full content" is allowed for embedded videos.


Break Text: Left or Center Aligned


https://slite.com/api/files/5LH_cQBxpsej8H/copy%20of%20copy%20of%20create%20flexible%20page%20_%20center%20for%20website%20studies%20(3).png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiNDBNa2tjWno4RFpMZDIiLCJpYXQiOjE3MzIxODE1NDgsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoidW5pVTc5YW85Y1N5YWQiLCJleHAiOjE3MzQ3NzM1NDh9.59sQKkxEJkQ-M6G4ugugaXNv2V9ssIRb72AtOMxEeeA
Select one of these options if you wish for your video to be shown on its own line, with text located above and below. With this option, you can align your media to the left or center, as displayed in the corresponding icons.


Align Left or Right and Wrap Text


https://slite.com/api/files/9NP7fkmaakrodZ/copy%20of%20copy%20of%20copy%20of%20create%20flexible%20page%20_%20center%20for%20website%20studies.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiNDBNa2tjWno4RFpMZDIiLCJpYXQiOjE3MzIxODE1NDgsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoidW5pVTc5YW85Y1N5YWQiLCJleHAiOjE3MzQ3NzM1NDh9.59sQKkxEJkQ-M6G4ugugaXNv2V9ssIRb72AtOMxEeeA
Select one of these options if you wish to have the nearby text wrap around your video. With this option, you can align your media to the left or right, as displayed in the corresponding icons.

Be sure to save your work before you leave the editing interface.


Finding the Correct URL to Use

You may notice that your video has several different links that can be copied. To find the correct link, first, click the "Share" button just below your video.

YouTube

In YouTube, the "Share" button is one of several just below the video.

https://slite.com/api/files/mxQ5rUlW2xMFUi/welcome%20to%20stanford%20-%20youtube%20(1).png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiNDBNa2tjWno4RFpMZDIiLCJpYXQiOjE3MzIxODE1NDgsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoidW5pVTc5YW85Y1N5YWQiLCJleHAiOjE3MzQ3NzM1NDh9.59sQKkxEJkQ-M6G4ugugaXNv2V9ssIRb72AtOMxEeeA

Clicking "Share" will pull up this screen, which has a URL ready to be copied. This is the correct URL to use.

https://slite.com/api/files/hmxdNEhZP0i8sq/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiNDBNa2tjWno4RFpMZDIiLCJpYXQiOjE3MzIxODE1NDgsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoidW5pVTc5YW85Y1N5YWQiLCJleHAiOjE3MzQ3NzM1NDh9.59sQKkxEJkQ-M6G4ugugaXNv2V9ssIRb72AtOMxEeeA

YouTube also provides the option for the video start somewhere other than the beginning. To use this feature, check the box that says "Start at" and select your desired starting point. Once you've selected the starting point, click the button for "Copy" to copy the URL.

https://slite.com/api/files/ysOyzaM84BlOJe/screenshot%202023-04-19%20143518.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiNDBNa2tjWno4RFpMZDIiLCJpYXQiOjE3MzIxODE1NDgsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoidW5pVTc5YW85Y1N5YWQiLCJleHAiOjE3MzQ3NzM1NDh9.59sQKkxEJkQ-M6G4ugugaXNv2V9ssIRb72AtOMxEeeA


Vimeo

In Vimeo, the "Share" button is below the video. Click this button to pull up another menu.

https://slite.com/api/files/SDRLCoMqjfq1u4/stanford%20campus%20on%20vimeo.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiNDBNa2tjWno4RFpMZDIiLCJpYXQiOjE3MzIxODE1NDgsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoidW5pVTc5YW85Y1N5YWQiLCJleHAiOjE3MzQ3NzM1NDh9.59sQKkxEJkQ-M6G4ugugaXNv2V9ssIRb72AtOMxEeeA

Copy the text in the "Link" box. This is the correct URL to use.

https://slite.com/api/files/C-1Y32dcR-5AXv/stanford%20campus%20on%20vimeo%20(1).png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiNDBNa2tjWno4RFpMZDIiLCJpYXQiOjE3MzIxODE1NDgsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoidW5pVTc5YW85Y1N5YWQiLCJleHAiOjE3MzQ3NzM1NDh9.59sQKkxEJkQ-M6G4ugugaXNv2V9ssIRb72AtOMxEeeA


Video Tutorial


https://youtu.be/XXsGweX2WNY?si=WOtpCVx1ahh2_Lyf&t=22