HTML5 Video Embed, Controls, Image, No Download, Loop, Autoplay

Updated June 10th, 2020
Updated June 10th, 2020
Share this post:
Share on facebook
Share on twitter
Share on reddit
Share on linkedin
Share on pinterest
Share on pocket
Share on email
Share on print

The code below will generate the HTML5 video player. In this example the video file will be loaded from Amazon S3. To do that we’ll just replace “PATH-TO-VIDEO” with the S3 URL.

Directly below we have the basic HTML5 video embed code. We can then add parameters to customize how it works.

<video width="300" height="150">
    <source src="PATH-TO-VIDEO" type="video/mp4"></video>

Add Height And Width

<video width="640" height="360">
    <source src="PATH-TO-VIDEO" type="video/mp4"></video>

Add Fullscreen

<video fullscreen width="640" height="360">
    <source src="PATH-TO-VIDEO" type="video/mp4"></video>

Add Video Player Controls

<video controls="controls" width="640" height="360">
    <source src="PATH-TO-VIDEO" type="video/mp4"></video>

Prevent video downloads

By default, the HTML5 player allows people to download the video. To remove that functionality I’ve added the controlsList=”nodownload” parameter. If you want to allow downloading of the video simply remove that parameter.

<video controls="controls" controlsList=”nodownload” width="640" height="360">
    <source src="PATH-TO-VIDEO" type="video/mp4"></video>

Add Image

If you want to have a custom still image at the beginning of the video use the “poster” attribute. Replace “PATH-TO-STILL-IMAGE” with the URL of the image.

<video poster="PATH-TO-STILL-IMAGE" autoplay="autoplay" controls="controls" width="640" height="360">
    <source src="PATH-TO-VIDEO" type="video/mp4"></video>

Add Video Looping

<video poster="PATH-TO-STILL-IMAGE" autoplay="autoplay" loop="loop" controls="controls" width="640" height="360">
    <source src="PATH-TO-VIDEO" type="video/mp4"></video>
Share this post:
Share on facebook
Share on twitter
Share on reddit
Share on linkedin
Share on pinterest
Share on pocket
Share on email
Share on print
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

Responses

Your email address will not be published. Required fields are marked *

  1. thank for share but i use i need background audio play code for mobile devices can you tell me

    1. Hi Satish,

      Autoplaying audio (and video) is going out of style with modern browsers now blocking that functionality. It’s not worth the time to figure it out because it may already be blocked on the browsers your visitors are using or it will be in the near future.

  2. Bjorn Allpas….Goodnight. I am looking for an html code to insert audio in a community of Ning poets, which I use to insert only the background music in the blogs of my poems.

    The last code that worked correctly for me is the following:

    I know that this is not in this space, you are not teaching about this topic. However I searched for weeks and for many hours information to respect, and I have not been successful.

    I found many articles where they explain that Google Chrome has disabled the autoplay function … so I entered from other browsers, and effectively in them I had no problems, however almost all members use Chrome …If you have idea, what

    If you have an idea, what can we do to make our code work … please, please, please … help us!

    If you can help me in this matter, all the people that belong to that community of poets, we will be eternally grateful.

    Receive a strong and warm hug, from Guatemala, messenger of all the good vibes of the world.

    Silvia Regina Cossío Cámara

    1. Hi Silvia,

      As you know, Google Chrome has disabled autoplay for audio and for video. The only option is to allow people to play audio instead of having it autoplay. That’s all you can do.

      Other browsers will probably follow Google’s lead eventually.

      1. I want auto play and no Download button and no border
        please tell me what willbe code.

        1. Hi Jauhar,

          you would use this:

          video width=”640″ height=”360″ autoplay controlsList=”nodownload”
          source src=”PATH-TO-VIDEO” type=”video/mp4″
          /video

          **I had to remove the greater than and less than symbols because the comment was executing the HTML, so make sure you add them back in.

          The border is not part of the video play in WordPress. Your theme probably has a CSS border that it’s adding to all your videos. You’ll have to find that CSS rule and change or add this rule to your stylesheet or in Appearance > Customize > Additional CSS:

          video {border:none !important;}

          I hope that helps and thanks for stopping by!

  3. Hello, I would like to ask you a question, I have a Videojs script, I would like to make the player play horizontally and be full screen when playing. It will be possible that. Thank you

    1. Hi John,

      It’s not possible to make videos play fullscreen automatically because browsers block that from happening. The viewer must choose to watch fullscreen.

  4. Hi,

    I thought this was going to be perfect code for me, but after I insert the code and click to update in wordpress 4.9.8, I view the video and everything is perfect. Then I go back in to view the code again, and the no download functions are completely gone. I start like this:

    And then I go back in to look at it, and it looks like this…

    all of this is gone! ” controlsList=”nodownload” webkitallowfullscreen mozallowfullscreen allowfullscreen ”

    Do you know why?!

    1. Hi Nate,

      I don’t know why. Are you entering the code using the “text” tab of the post/page editor? When you open the post/page in the editor does it open in the visual tab first and then you click on the text tab? I know it sounds irrelevant, but the visual tab is known to strip things out or convert things.

      1. I am using WP Bakery page builder. First I used text block, it didn’t work. Then WP text, didn’t work. Finally it worked when I used Raw HTML to insert the code. Thanks for the help man.

        1. Hi Charles,

          You can often get away with using a text block as long as you make sure you’re on the “HTML” tab of the text block, not the “Visual” tab.

          Either way, I’m happy you figured it out!

  5. Hi there
    I have embeded the video on sqyuaresace website , its working on desktop but not on mobile . Any solution ?

    1. Hi Ahsan,

      The code on this page will work on desktop and mobile without any problem. But it could be that squarespace is altering it or removing it from mobile. Can you see the video on mobile or is the entire video play missing? Or is the video there and not playable?

  6. I like the embeds, they do work, but they are not responsive. So they all are kinda useless. Is there anyway you can make them responsive?

    1. Hi Charles,

      There are two ways. First, where the width and height are defined:

      Change it to:

      The video will now fill 90% of its’ parent container. Change the percentage to whatever you need. That percentage will be applied to all device sizes (ie. the video will remain within its’ parent container and be resized on different devices).

      If you need more control you will have to move the width into CSS and use media queries.

      Change this:

      To this:

      And in your CSS define:

      video {width:90%}

      You may have to use additional selectors with “video” to target the videos on your site. It depends on the theme you’re using.

      Then you apply media queries. They allow you to set different styles depending on the size of a visitor’s viewport. For example, you can define the video to be 90% on desktop and 60% on tablet and 40% on mobile phones. Media queries a pretty complicated, but this post by Chris Coyier is very useful: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

      I hope that helps 🙂 Let me know if you have any further questions. Thanks for stopping by!

WPLearningLab

Warning: Use of undefined constant WPBF_CHILD_THEME_URI - assumed 'WPBF_CHILD_THEME_URI' (this will throw an Error in a future version of PHP) in /home/customer/www/wplearninglab.com/public_html/wp-content/themes/buddyboss-theme-child/functions.php on line 108

Warning: Use of undefined constant WPBF_CHILD_VERSION - assumed 'WPBF_CHILD_VERSION' (this will throw an Error in a future version of PHP) in /home/customer/www/wplearninglab.com/public_html/wp-content/themes/buddyboss-theme-child/functions.php on line 108