HTML5 Video Player Elements Updated on August 16, 2021 by Brad Markle 1 Minutes, 29 Seconds to Read A new element in HTML5 is the video element. The video element can be used to display a video in the browser, and it is intended to replace the object element. Example Usage of the HTML5 Video Element The following example code can be used to play a video on your webpage using the HTML5 video element: <video src='https://domain.com/video.mp4' controls> Your browser does not support the HTML5 Video Element. </video> For more information on getting the HTML5 video to work in all browsers, please see the previous tutorial on Using HTML5 to add videos. Optional HTML5 Video Attributes AttributeDescription and Example Usageautoplay Determines if the video will play automatically <video src='https://domain.com/video.mp4' controls autoplay> controls Determines if controls should be displayed (such as play/pause and volume) <video src='https://domain.com/video.mp4' controls> width / height Sets the width and height of the element <video src='https://domain.com/video.mp4' controls width='320' height='240'> loop Determines if the video should loop automatically when it is finished playing <video src='https://domain.com/video.mp4' controls loop> mute Determines if the video’s sound should be muted by default <video src='https://domain.com/video.mp4' controls muted> poster Allows you to set an image to load. This will show while the video is downloading and before the user presses play. <video src='https://domain.com/video.mp4' controls poster='/url/to/image.gif'> preload Specifies if the video should begin to download automatically when the page is loaded <video src='https://domain.com/video.mp4' controls preload="none"> Share this Article Related Articles How to Run and Read a Traceroute: Troubleshooting Website Connectivity What Are Meta Tags? Guide to SEO Meta Tags & Best Practices Meta Descriptions and SEO Install Let’s Encrypt Free SSL Certificate on Ubuntu with Certbot How to Set Up a 301 Permanent Redirect via .htaccess & cPanel BlaB! AX Maintenance Mode How to Log in to BlaB! AX 6 Ways to Improve Website Accessibility How to Create HTML Pages with the CherryTree Note-Taking Application Connecting with Google Analytics in Jetpack