Add your own video to your website.

tags

There are several modules to integrate a video into your drupal website. You can also do this manually with html.

Make sure your video is available in 4 different formats. This is necessary in order to obtain a correct representation in the various browsers.

  • mp4
  • webm
  • ogg
  • ovg

The best way is to convert your mp4 file using a converter program or on a website online
You also need an image that will be displayed if for some reason the video does't start.

Method:
Rename the videos and the image to "video" and upload them to a folder in your drupal installation. (eg /sites/default/file/video-bestanden). The renaming is recommended because the video tag has some issues with long filenames.

Video formaten

Videos can be displayed in both blocks and nodes. The only requirement is that CkEditor is set to Full html.

We use the html video tag and set some parameters:

  • autoplay: to autoplay the video
  • loop: to loop the video
  • muted: setting to mute the sound
  • playsinline: (mind the "s" playsinline) this will make the video play on touch screen devices like iPhone and iPad
  • poster: loads the image if the video doen't start.

Leave all the values ​​blanc if they are to be active. If not active, set them to false. (eg: autoplay="false")

Set the 4 sources. Depending on the browser, the correct format will be loaded.

All these parameters must be entered in pure html. Klick on the CkEditor "Source code" button.

In this example we use a block:

Blok html code

Save the block and place it via Structuur -> block-layout.
If you work with a node, go to the node url to view the video.