HTML content editor

For editing pages, blogs and articles it is possible to use a markup (HTML) editor. This can be especially useful when creating landing pages or when including custom elements or interactivity.

Markup editor
Markup editor in Cradle admin

Toolbar

Toolbar in markup editor

The toolbar contains buttons to upload media, video and audio, as well as, download media and preview.

Button Description
Upload media Upload images
Upload video Upload video file, .mp4 format
Upload audio Upload audio file
Download media
Preview Preview the content in the browser
Toolbar content in markup editor

Upload Video

There is a button for uploading videos in the markup editor this will add the video in a video tag.

<video controls>
		<source src="<path to file>" type="video/mp4">
		Your browser does not support the video tag
</video>
Example of inserted HTML when uploading an video

Tools for video editing and creation: Open broadcaster software - video recording, OpenShot - video editing and Blender - 3D Creation Suite

Uploading a video and adding CSS

How to add a section with a video and text overlay with the markup editor.

Uploading and image and adding CSS to style

Steps in video

  1. Changing to the markup editor on a page.
  2. Uploading a video through the toolbar.
  3. Publishing the page and viewing it in a separate window.
  4. Modifying and adding the correct markup.
  5. Adding the CSS
  6. Using the browser inspector
  7. Adding markup and CSS for the overlay text content
<div class="video-container">
    <video autoplay loop muted>
        <source src="<file path>" type="video/mp4">
        Your browser does not support the video tag
    </video>   
    <div class='video-content'>
      <h1>Overlay content</h1>
      <p>Video by Taryn Elliot found on Pexels</p>
    </div>
</div>
<style>
.video-container {
  position: relative;
  width: 64rem;
  height: 400px; 
  max-width: 100%;
  overflow: hidden;
  display: flex;
  place-content: center;
}
.video-container video {
  position: absolute;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  object-fit:cover;
}
.video-content {
  background-color: rgba(255,255,255,0.8);
  padding: 2rem;
  padding-top: 3rem;
  border-radius: 5px;
  z-index:10;
  margin: auto;
} 
.video-content h1,
.video-content p {
    margin: 0;
}
</style>
Code in example