Motion Design for Web

Last Updated: 4/15/2025

Video

Add Youtube Video

  • Go to youtube video page > share > embed > copy script and paste html code

Custom Video

<video src="video1.mp4" width="640" height="320" autoplay
controls muted poster="images/video-poster.jpg">
Your browser doesn't support video
</video>
  • For autoplay to work, muted must be added

Style Video Element

  • You can use poster image for video thumbnail
video {
 border: 1px solid yellow;
 object-fit: cover;
 border-radius: 10px;
}

 <video
          src="videos/video-1@c.mp4"
          width="500"
          height="500"
          poster="images/video-poster.jpg"
        ></video>

Video as background

video {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 z-index: -2
}
  • For background video, you can use 1080p resolution instead of 4k

Videojs

  • Library to customize videos (videojs.com)

Formats

  • mp4: standard video format, bigger size, supported in old browser
  • webm: open source by google, small size, not supported in old browser
  • Use handbrake app (handbrake.fr) to convert mp4 to webm
<video>
<source src="videos/video1.mp4" type="video/mp4" />
<source src="videos/video1.webm"  type="video/webm" />
</video>
Previous