background-video.php 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <?php
  2. /**
  3. * Background Video
  4. *
  5. * @package Videomaker
  6. */
  7. return array(
  8. 'title' => __( 'Background video', 'videomaker' ),
  9. 'categories' => array( 'videomaker' ),
  10. 'blockTypes' => array( 'core/template-part/header' ),
  11. 'content' => '<!-- wp:cover {"url":"' . get_stylesheet_directory_uri() . '/assets/videos/fish.mp4","dimRatio":40,"backgroundType":"video","minHeight":100,"minHeightUnit":"vh","align":"full","style":{"spacing":{"padding":{"top":"60px","right":"60px","bottom":"60px","left":"60px"}}}} -->
  12. <div class="wp-block-cover alignfull has-background-dim-40 has-background-dim" style="padding-top:60px;padding-right:60px;padding-bottom:60px;padding-left:60px;min-height:100vh"><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="' . get_stylesheet_directory_uri() . '/assets/videos/fish.mp4" data-object-fit="cover"></video><div class="wp-block-cover__inner-container"><!-- wp:columns {"verticalAlignment":"center","align":"wide"} -->
  13. <div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center"} -->
  14. <div class="wp-block-column is-vertically-aligned-center"><!-- wp:site-title /--></div>
  15. <!-- /wp:column -->
  16. <!-- wp:column {"verticalAlignment":"center"} -->
  17. <div class="wp-block-column is-vertically-aligned-center">
  18. <!-- wp:navigation {"__unstableLocation":"primary","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"},"style":{"typography":{"textTransform":"uppercase"}}} /-->
  19. </div>
  20. <!-- /wp:column --></div>
  21. <!-- /wp:columns -->
  22. <!-- wp:spacer -->
  23. <div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
  24. <!-- /wp:spacer -->
  25. <!-- wp:columns {"align":"wide"} -->
  26. <div class="wp-block-columns alignwide"><!-- wp:column {"width":"90%"} -->
  27. <div class="wp-block-column" style="flex-basis:90%">
  28. <!-- wp:post-title /-->
  29. <!-- wp:group {"className":"post-meta","layout":{"type":"flex"},"style":{"spacing":{"padding":{"top":"var(--wp--style--block-gap,1em)","bottom":"var(--wp--style--block-gap,1em)"}}}} -->
  30. <div class="wp-block-group post-meta" style="padding-top:var(--wp--style--block-gap,1em);padding-bottom:var(--wp--style--block-gap,1em)">
  31. <!-- wp:post-date {"isLink":true,"style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
  32. <!-- wp:post-terms {"term":"category","style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
  33. </div>
  34. <!-- /wp:group -->
  35. </div>
  36. <!-- /wp:column -->
  37. <!-- wp:column {"verticalAlignment":"center","width":"50%"} -->
  38. <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:spacer -->
  39. <div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
  40. <!-- /wp:spacer --></div>
  41. <!-- /wp:column --></div>
  42. <!-- /wp:columns --></div></div>
  43. <!-- /wp:cover -->',
  44. );