RocketTheme - TOPIC: [solved] Fullwidth Background Video

Welcome Guest! Login

0 items Join Now

- jwwicks
- Rocketeer
- Posts: 80
- Thanks: 4
- Developer II
SOLVED Fullwidth Background Video - Widget, Particle or Atom?

Posted 7 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
#1371486
- Matt
- Preeminent Rocketeer
- Posts: 22265
- Thanks: 3224
- messin' with stuff
Re: SOLVED Fullwidth Background Video - Widget, Particle or Atom?

Posted 7 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
#1371496

jwwicks
Rocketeer
Posts: 80
Thanks: 4
Developer II

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

Posted 7 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

#1378340

Time to create page: 0.065 seconds