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:
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.
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:
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'
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.
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.