Scroll to the top of the page

Article

Videos

Embed videos on your website while making sure they look great on mobile and desktop.

contentsports unionStrath Union

What it looks like

YouTube

 

<div class="video-wrapper"> <iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" src="https://www.youtube.com/embed/XXXXXX" title="YouTube video player"></iframe> </div>

 

Vimeo

 

<div class="video-wrapper"> <iframe src="https://player.vimeo.com/video/XXXXXX" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe> </div>

 

How to add a video to your page

  1. Upload to a video hosting site

    First upload your video to either YouTube or Vimeo. This will generate a URL for your video that we'll need soon.

  2. Copy and paste the code above

    Look up - below the video is a code you can copy and paste into your page.

  3. Update the video ID in the code

    In the code you'll see 'XXXXXX'. Just paste your video ID in place of this.

Not sure what your video ID is?

Easy - just look at the URL of your video and you'll be able to pick out the ID. Look at the highlighted characters in the examples below.

YouTube

https://www.youtube.com/watch?v=RWjnC8HSRdU

Vimeo

https://vimeo.com/529254176

Published: 01 Nov 2022 15:41 , Last updated: 01 Nov 2022 15:41
 

Related articles

Columns

Create engaging layouts using columns to spread out photography, text and buttons.

Changing page images

Page images appear at the top of each page and in the explore section.

Editing page descriptions

The page descriptions appear in the explore section as well as at the top of each page.

Changing page titles

Page titles show in the hero at the top of each page, the page tab, and in the 'explore this area' sections.

 

Website design by Elliot Parker.