Video in paragraph

⚠️ Since the Summernote Editor creates only inline elements, you'll probably create the paragraph first and then put the video player in it.

<p class="col s12 m6">
  <video controls preload playsinline>
    <source src="http(s)://your-wonder-cms-website-address/data/files/your-audio-file.mp4" type="video/mp4" width="640" height="360">


⚠️ If you want to see how the grid reacts, grab the right edge of the browser window with your mouse and make the window narrower or wider to simulate a change in screen resolution.

Below you can see the table created using the code above.

Video file

To use the audio player, you must first upload an MP4 or OGG video file to your Wonder CMS website:

  1. Click "Settings" and then click the "Files" tab.
  2. Click the "Select file" button and select the file you want to upload
  3. Click "Upload".
  4. Click "Settings" again, and then click the "Files" tab.
  5. In the list of files you should find the file you uploaded.
  6. Use the link to video file to code the video player

CSS classes

Paragraph containing video can be given CSS classes:

  • Grid classes for the pragraph (as in the example above)

Summernote Editor (also Lite version)

Moreover, paragraphs containing audio can be given placement using the Paragraph tool. The video file can be placed on the page using the Video tool in the editor and the Grid CSS classes added using the Code View tool.