No edit summary
No edit summary
Line 1: Line 1:
     <!-- Video Banner -->
<style>
    <section class="ocp-banner-section" id="ocpVideoSection">
  .ocp-banner-section {
      <div class="container ocp-banner-text-container">
    display: -webkit-box;
        <div class="row">
    display: -ms-flexbox;
          <div class="col-12">
    display: flex;
            <header>
    -webkit-box-align: center;
              <h2 class="ocp-banner-title">Pro Line Video</h2>
    -ms-flex-align: center;
              <p class="mx-auto ocp-banner-subtitle">
    align-items: center;
                The video background has a parallax effect. This is fluid and
    position: relative;
                full-width.
    overflow: hidden;
              </p>
    margin-top: 74px;
            </header>
  }
          </div>
 
        </div>
  .ocp-banner-section video {
     position: absolute;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -60%);
    min-width: 100%;
    min-height: 100%;
  }
 
  .ocp-banner-text-container {
    position: relative;
    z-index: 1000;
    color: white;
    text-align: center;
    max-width: 520px;
  }
 
  .ocp-banner-title {
    font-size: 3rem;
    font-weight: 300;
    margin-bottom: 40px;
  }
 
  .ocp-banner-subtitle {
    font-size: 1.5rem;
    font-weight: 300;
    max-width: 500px;
  }
</style>
 
<!-- Video Banner -->
<section class="ocp-banner-section" id="ocpVideoSection">
  <div class="container ocp-banner-text-container">
    <div class="row">
      <div class="col-12">
        <header>
          <h2 class="ocp-banner-title">Pro Line Video</h2>
          <p class="mx-auto ocp-banner-subtitle">
            The video background has a parallax effect. This is fluid and
            full-width.
          </p>
        </header>
       </div>
       </div>
    </div>
  </div>


      <!-- Video -->
  <!-- Video -->
      <video id="hero-vid" autoplay="" loop="" muted>
  <video id="hero-vid" autoplay="" loop="" muted>
        <source src="/opencsp_launch2.mp4" type="video/mp4" />
    <source src="/opencsp_launch2.mp4" type="video/mp4" />
        Your browser does not support the video tag.
    Your browser does not support the video tag.
      </video>
  </video>
    </section>
</section>

Revision as of 07:41, 30 June 2023

<style>

 .ocp-banner-section {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   position: relative;
   overflow: hidden;
   margin-top: 74px;
 }
 .ocp-banner-section video {
   position: absolute;
   left: 50%;
   top: 60%;
   transform: translate(-50%, -60%);
   min-width: 100%;
   min-height: 100%;
 }
 .ocp-banner-text-container {
   position: relative;
   z-index: 1000;
   color: white;
   text-align: center;
   max-width: 520px;
 }
 .ocp-banner-title {
   font-size: 3rem;
   font-weight: 300;
   margin-bottom: 40px;
 }
 .ocp-banner-subtitle {
   font-size: 1.5rem;
   font-weight: 300;
   max-width: 500px;
 }

</style>

       <header>

Pro Line Video

The video background has a parallax effect. This is fluid and full-width.

       </header>
 <video id="hero-vid" autoplay="" loop="" muted>
   Your browser does not support the video tag.
 </video>