Video Cover and Large Offset Heading

[onuro]

Category: Editorial Tag: Pattern

Pattern Meta: is_web

Screenshot:

Markup:

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group alignfull" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:cover {"url":"https://dotcompatterns.files.wordpress.com/2022/12/pexels-roman-odintsov-7592099-02.mp4","id":9126,"backgroundType":"video","focalPoint":{"x":0.5,"y":0.28},"minHeight":90,"minHeightUnit":"vh","customGradient":"linear-gradient(180deg,rgb(255,255,255) 14%,rgba(255,255,255,0) 14%)","contentPosition":"top center","className":"is-style-default","style":{"spacing":{"margin":{"top":"0","bottom":"0"},"padding":{"top":"78px"}},"color":{"duotone":"unset"}}} -->
<div class="wp-block-cover has-custom-content-position is-position-top-center is-style-default" style="margin-top:0;margin-bottom:0;padding-top:78px;min-height:90vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim wp-block-cover__gradient-background has-background-gradient" style="background:linear-gradient(180deg,rgb(255,255,255) 14%,rgba(255,255,255,0) 14%)"></span><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="https://dotcompatterns.files.wordpress.com/2022/12/pexels-roman-odintsov-7592099-02.mp4" style="object-position:50% 28%" data-object-fit="cover" data-object-position="50% 28%"></video><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|70","padding":{"top":"0","right":"var:preset|spacing|60","bottom":"var:preset|spacing|40","left":"var:preset|spacing|60"}}},"layout":{"type":"constrained","contentSize":""}} -->
<div class="wp-block-group" style="padding-top:0;padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--60)"><!-- wp:heading {"textAlign":"left","level":1,"align":"wide","style":{"typography":{"fontStyle":"normal","fontWeight":"700","fontSize":"64px"}},"textColor":"black"} -->
<h1 class="wp-block-heading alignwide has-text-align-left has-black-color has-text-color" style="font-size:64px;font-style:normal;font-weight:700">Majestic Peaks: A Journey Through the Mountains</h1>
<!-- /wp:heading -->

<!-- wp:group {"align":"wide","layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-group alignwide"><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"width":50,"style":{"typography":{"fontStyle":"normal","fontWeight":"700"},"spacing":{"padding":{"right":"var:preset|spacing|50","left":"var:preset|spacing|50"}},"border":{"radius":"0px"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-50" style="font-style:normal;font-weight:700"><a class="wp-block-button__link wp-element-button" style="border-radius:0px;padding-right:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)"><strong>Learn More →</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:group -->

Preview: https://dotcompatterns.wordpress.com/?p=9121&preview=true

@iamtakashi @alaczek

[onuro]

Having second thoughts on the white background, I wonder if it'd work better as a pattern if it had dark background like in here as this pattern is derived from it.

What do you think?

[onuro]

Instead updated it with the overlay being a gradient pass:

I also have another idea for the original take, without having to use gradient cover bg hack.

Let me know what you think

[iamtakashi]

The one with the gradient is better. The one without the gradient doesn't look like it was on purpose. I think that treatment would work better with a much shorter and larger heading with only a few words.