Embed videos on your website while making sure they look great on mobile and desktop.
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
-
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.
-
Copy and paste the code above
Look up - below the video is a code you can copy and paste into your page.
-
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