Video Tile Fragment for Plone, Mosaic + Theme Fragments

video-placeholder.svg

videobg.pt

<style>
section.videobg-fragment {
    overflow: hidden;
    background-size:cover;
    background-image:url('${portal_url}/++theme++praisetheme/img/video-placeholder.svg');
    }
.video-background {
/*  making the video fullscreen  */
  right: 0; 
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  width: auto; 
  height: auto;
  z-index: -100;
}
.videobg-fragment h1 {
    font-weight: 700;
    font-size: 300%;
    color: white;
    position: absolute;
    left: 32px;
    text-transform: uppercase;
    z-index: 1;
}
</style>
<!--  Content  -->
<section class="videobg-fragment">
<h1>${view/data/video_title}</h1>
<video autoplay loop class="video-background" muted plays-inline>
  <source src="${portal_url}/${view/data/video_url}">
</video>   
</section>

videobg.xml

<model xmlns:form="http://namespaces.plone.org/supermodel/form"
  xmlns:i18n="http://xml.zope.org/namespaces/i18n"
  xmlns:indexer="http://namespaces.plone.org/supermodel/indexer"
  xmlns:lingua="http://namespaces.plone.org/supermodel/lingua"
  xmlns:marshal="http://namespaces.plone.org/supermodel/marshal"
  xmlns:security="http://namespaces.plone.org/supermodel/security"
  xmlns:users="http://namespaces.plone.org/supermodel/users"
  xmlns="http://namespaces.plone.org/supermodel/schema">
<schema>
  <field name="video_title" type="zope.schema.TextLine">
    <description/>
    <required>False</required>
    <title>Video Title</title>
    <default>Video</default>
  </field>
  <field name="video_url" type="zope.schema.TextLine">
    <description/>
    <required>False</required>
    <title>Video URL</title>
    <default>video.mp4</default>
  </field>
</schema>
</model>