0
Welcome Guest! Login
0 items Join Now

SOLVED Fullwidth Background Video - Widget, Particle or Atom?

    • jwwicks's Avatar
    • jwwicks
    • Rocketeer
    • Posts: 80
    • Thanks: 4
    • Developer II

    SOLVED Fullwidth Background Video - Widget, Particle or Atom?

    Posted 6 years 3 months ago
    • Hello All,

      Wondering if anyone can guide me as to which of the elements, Widget, Particle or Atom is best suited for a video background. I have access to all the current themes for Wordpress and I've seen other background videos done with Widgets and atoms. I've seen RT video Particles but haven't seen them used as backgrounds, g-flushed doesn't work like it does in galleries.

      I have no problem modifying the Video particle from any of the RT themes and making it custom background Video particle, since that seems to supply most of functionality I'd need. But is that the best way to go in this instance or is there an already available solution that I'm missing in a RT theme.

      I've tried using the video and the videocarousel particles out of the box but they don't appear to support fullwidth like the images do. Basically where you see the OWLCarousel image now is where I'd like the video to display.

      Gantry 5.x
      Helium Child Theme
      Wordpress 4.x
      Vimeo

      Thanks,
      Jw
    • A person who never made a mistake never tried anything new. - Albert Einstein

      Joomla 3.x, Gantry 5.x
      WordPress 4.x, Gantry 5.x
      Drupal 8.x
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 21506
    • Thanks: 3082
    • messin' with stuff

    Re: SOLVED Fullwidth Background Video - Widget, Particle or Atom?

    Posted 6 years 3 months ago
    • I guess Particle would be my answer...

      You could just stick a <video> tag in a Custom HTML particle, set it to Width 100%, and on the Section settings set it to either Fullwidth or Remove Container + g-flushed

      Then, use additional Grids in the same Section to render Nav and any text/buttons, all of which you'll need to absolutely position so that they sit on top of your Video.
    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:
    • jwwicks's Avatar
    • jwwicks
    • Rocketeer
    • Posts: 80
    • Thanks: 4
    • Developer II

    Re: SOLVED Fullwidth Background Video - Widget, Particle or Atom?

    Posted 6 years 1 month ago
    • So for my solution, in case anyone wants to follow it, I used the videocarousel particle available in one of the RT themes and modified it. I added a simple field I called asBackground to the particle settings in videocarousel.yaml
          asBackground:
            type: input.checkbox
            label: As Background
            description: Globally enable video as background.
            default: false
      
          overlayColor:
            type: input.colorpicker
            label: Overlay color
            description: Sets the overlay color for the background video

      Then in the videocarousel.html.yaml I added the following, (in my case I only need this for Vimeo sources)

      Added a stylesheets block...
      {% block stylesheets %}
          {% if particle.enabled %}
              {% if particle.asBackground %}
                  {{ parent() }}
                  <link rel="stylesheet" href="{{ url(gantry.theme.css('backgroundvideo')) }}" type="text/css"/>
              {% endif %}
          {% endif %}
      {% endblock %}
      ...Modified the particle div to add a class
      {% block particle %}
      <div class="{{ particle.class|e }} g-owlcarousel-video-carousel {% if particle.asBackground %}bgvideo{% endif %}">
      
      .. Modified Vimeo section
      {# Begin Vimeo #}
          {% if item.source == 'vimeo' %}
              <iframe width="100%" height="auto" src="https://player.vimeo.com/video/{{ item.video|replace({'https://vimeo.com/': '', 'https://vimeo.com/ondemand/': ''}) }}?autoplay={% if particle.autoplay == 'enabled' %}1{% else %}0{% endif %}&amp;loop={% if item.loop == 'enabled' %}1{% else %}0{% endif %}{% if particle.asBackground %}&amp;background=1&amp;autopause=0{% endif %}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
          {% endif %}
      {# End Vimeo #}
      
      ... Add the following after End Caption comment inside div.g-video-carousel-inner
      {# Begin Overlay #}
          {% if particle.overlayColor %} <div class="g-video-carousel-video-overlay" style="z-index: 5; background: {{ particle.overlayColor }}"/>{% endif %}
      {# End Overlay #}
                              
                              

      And then in _backgroundvideo.scss I put the following

      /* Background video carousel */
      .g-owlcarousel-video-carousel.bgvideo{
          position: relative;
          .g-owlcarousel-video-carousel-header{
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              z-index: 10;
              text-align: center;
          }
          .owl-stage{
              .owl-item.active{
                  .g-video-carousel-video-overlay{
                      position: absolute;
                      top: 0;
                      left: 0;
                      width: 100%;
                      height: 100%;
                  }
                  .g-video-carousel-video{
                      pointer-events: none;
                      overflow: hidden;
                      margin: 0;
                      padding: 0;
                      z-index: 4;
                      top: 0;
                      left: 0;
                      /* If you need to constrain the height
                      max-height: 50.75rem;
                      */
                      iframe{
                            border: 0;
                            width: 100vw;
                            height: 56.25vw;
                            min-height: 100vh;
                            min-width: 177.77vh;
                      }
                  }
              }
          }
      }        
      
    • The following users have thanked you: Matt

    • A person who never made a mistake never tried anything new. - Albert Einstein

      Joomla 3.x, Gantry 5.x
      WordPress 4.x, Gantry 5.x
      Drupal 8.x

Time to create page: 0.046 seconds