Looping video banner with rich text box

SOLVE
JonnyZOO
Contributor

Hi there

 

I'm trying to replace the banner image on this page with a looping video banner, found here: https://www.zoodigital.com/work-with-zoo-0?hs_preview=KhAaMcLT-5370415877 

 

Is there a way I can put a customisable rich text box over the top of the looping video?

 

Here's the code I'm using for the looping video:

 

 

<div> <video muted=”muted”preload="yes" autoplay="autoplay" loop="loop" width="100%" height="">
<source src="https://cdn2.hubspot.net/hubfs/2658690/Website%20Banner%20%E2%80%93%20Work%20with%20ZOO.mp4">
</video>
</div>

 

Any advice is appreciated.

 

 

Cheers, Jonny

 

0 Upvotes
2 Accepted solutions

Accepted Solutions
Jsum
Solution
Key Advisor

@JonnyZOO,

 

Yes, just give the wrapper for the video (like the custom HTML module or create a wrapper inside the custom html module around the video) and set it to position: relative.

 

Then under your video create a div for your rich text editor and give it a class. Here is some base css for it:

.misc_banner_text_content {
width: 500px; /* give it a width you'd like it to be */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

then place a rich text module inside the div using HubL, and set it to not have a wrapper:

{% widget_block rich_text "banner_text" overrideable=True, label='Banner Text', no_wrapper=True  %}
    {% widget_attribute "html" %}
            <p>banner Text</p>
    {% end_widget_attribute %}
{% end_widget_block %}

That should overlay the text on the video.

View solution in original post

0 Upvotes
Jsum
Solution
Key Advisor

That looks good.

 

I looked at it on mobile and the text does disapear behind bottom of the video but it's because either your text is to large, your video area becomes to small, or both. Actually I think you video area is a good size on mobile so all you really need to do is use media queries to make the text smaller on mobile. 

 

If you want across page consistency then I would suggest using specific classes on the elements in the text editor. Style those classes in your style sheet and make sure the the classes exist around the content on the rich text editor per page. 

 

I am not seeing a wrapper element around the video and richtext that is set to position: relative, but when I added that it didn't change anything.

View solution in original post

0 Upvotes
8 Replies 8
Jsum
Solution
Key Advisor

@JonnyZOO,

 

Yes, just give the wrapper for the video (like the custom HTML module or create a wrapper inside the custom html module around the video) and set it to position: relative.

 

Then under your video create a div for your rich text editor and give it a class. Here is some base css for it:

.misc_banner_text_content {
width: 500px; /* give it a width you'd like it to be */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

then place a rich text module inside the div using HubL, and set it to not have a wrapper:

{% widget_block rich_text "banner_text" overrideable=True, label='Banner Text', no_wrapper=True  %}
    {% widget_attribute "html" %}
            <p>banner Text</p>
    {% end_widget_attribute %}
{% end_widget_block %}

That should overlay the text on the video.

View solution in original post

0 Upvotes
JonnyZOO
Contributor

Hi @Jsum

 

Thanks for the reply.

 

Apologies but I'm not sure what code needs to go where? (HubSpot design novice here.)

 

Cheers, Jonny

0 Upvotes
JonnyZOO
Contributor

@Jsum,

 

I passed your advice onto one of our designers and we now have an editable 'Banner Text' overlay. 

 

Here's the code:

 

<div> <video muted=”muted”preload="yes" autoplay="autoplay" loop="loop" width="100%" height="">

 <source src="https://cdn2.hubspot.net/hubfs/2658690/Website%20Banner%20%E2%80%93%20Work%20with%20ZOO.mp4">

</video>

<div class="overlay">
    {% widget_block rich_text "banner_text" overrideable=True, label='Banner Text', no_wrapper=True  %}
    
{% end_widget_block %}

    </div>
    


</div>

<style>

.banner_text_content {
    width: 500px; /* give it a width you'd like it to be */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    color: #fff;
    text-align: center;
}

.overlay {
    width: 600px;
    position: absolute;
    top:40%;
    left: 50%;
    transform: translate(-50%, -50%);
}


</style>

https://www.zoodigital.com/work-with-zoo-video?hs_preview=KhAaMcLT-5370415877 

 

This appears almost exactly as I'd like, I'm just having two issues:

 

1) On mobile, the overlay doesn't remain over the video. Instead, the text runs onto the rest of the page.

 

2) If I copy text from another page (e.g. https://www.zoodigital.com/work-with-zoo) into the 'Banner Text' block, it appears much smaller. Is there any way to make this remain the same, for ease of consistency?

 

To access the editable text, I need to click on the banner then 'Banner Text' and 'Edit styles'To access the editable text, I need to click on the banner then 'Banner Text' and 'Edit styles'

Thanks for your help!

0 Upvotes
Jsum
Solution
Key Advisor

That looks good.

 

I looked at it on mobile and the text does disapear behind bottom of the video but it's because either your text is to large, your video area becomes to small, or both. Actually I think you video area is a good size on mobile so all you really need to do is use media queries to make the text smaller on mobile. 

 

If you want across page consistency then I would suggest using specific classes on the elements in the text editor. Style those classes in your style sheet and make sure the the classes exist around the content on the rich text editor per page. 

 

I am not seeing a wrapper element around the video and richtext that is set to position: relative, but when I added that it didn't change anything.

View solution in original post

0 Upvotes
JonnyZOO
Contributor

Hi @Jsum

 

Thanks again. I agree the size looks good for mobile. How would I go about using media queries?

 

Is there a way only some of the text, or the call-to-action button, could appear on mobile and the rest disappears?

 

Cheers, Jonny

0 Upvotes
JonnyZOO
Contributor

Hi @Jsum

 

Sorry to bump this, but how would I use media queries to make the text smaller on mobile?

 

Thanks for your help.

0 Upvotes
Jsum
Key Advisor

@JonnyZOO,

 

Sorry for the late response.

 

You can do a google search on media queries and get a pretty good idea of how they work but basically you can overwrite your css with new css based on a few triggers such as max-width and max-height or min-width and min-hieght:

 

div {
    color: blue;
}

@media (max-width: 800px) {

    div {
        color: red;
    }

}

The div's color is originally blue and always blue unless the viewport hits 800px or less, then it is red. 

0 Upvotes
JonnyZOO
Contributor

Thanks for your help @Jsum. I used HubSpot's Smart Content blocks for the mobile and tablet versions as a workaround.

0 Upvotes