API tools faq
paste
MrBoBo69

Shopify Video Banner slider

MrBoBo69
Jul 24th, 2024 (edited)
445
1
Never
3
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
Ruby 9.73 KB | Source Code | 1 0
raw download clone embed print report
  1. {%- if section.blocks.size > 0 -%}
  2.  
  3. {%- for block in section.blocks -%}
  4.  
  5. {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
  6.  
  7.  
  8. {% if block.type == 'video' %}
  9.  
  10. <div class="videoBox" style="{%- if block.settings.video_link == blank -%}background-image: url('{{ block.settings.video_image  | img_url: 'master' }}');{%- endif -%}">
  11.  
  12.  
  13. {%- if block.settings.video_link != blank -%}
  14.  
  15. <div class="fullscreen-video-wrap">
  16.  
  17. <video class="video-js" loop autoplay preload="none" muted playsinline
  18.  
  19. poster="https:{{ block.settings.video_image | img_url: 'master' }}">
  20.  
  21. <source src="{{ block.settings.video_link }}" type="video/mp4">
  22.  
  23. </video>
  24.  
  25. </div>
  26.  
  27. {% endif %}
  28.  
  29.  
  30. <div class="videoBoxInfo">
  31.  
  32. {% if block.settings.title != blank %}
  33.  
  34. <h1 class="videoBoxInfoTitle" style="color: {{ block.settings.color_text }}">
  35.  
  36. {{ block.settings.title | escape }}
  37.  
  38. </h1>
  39.  
  40. {% endif %}
  41.  
  42.  
  43. {%- style -%}
  44.  
  45. .videoBackground .imageBoxInfoDescription p {
  46.  
  47. color: {{ block.settings.color_text }}!important;
  48.  
  49. }
  50.  
  51. {%- endstyle -%}
  52.  
  53.  
  54. {% if block.settings.text != blank %}
  55.  
  56. <div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">
  57.  
  58. {{ block.settings.text }}
  59.  
  60. </div>
  61.  
  62. {% endif %}
  63.  
  64.  
  65. {% if block.settings.button_link != blank and block.settings.button_label != blank %}
  66.  
  67. <a href="{{ block.settings.button_link }}" class="videoBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">
  68.  
  69. {{ block.settings.button_label | escape }}
  70.  
  71. </a>
  72.  
  73. {% endif %}
  74.  
  75. </div>
  76.  
  77. </div>
  78.  
  79. {% else %}
  80.  
  81. <div class="imageBox" style="background-color: {{ block.settings.color_bg }}; {%- if block.settings.image_bg != blank -%}background-image: url('{{ block.settings.image_bg | img_url: 'master' }}');{%- endif -%}">
  82.  
  83.  
  84. <div class="imageBoxInfo">
  85.  
  86. {% if block.settings.title != blank %}
  87.  
  88. <h1 class="imageBoxInfoTitle" style="color: {{ block.settings.color_text }}">
  89.  
  90. {{ block.settings.title | escape }}
  91.  
  92. </h1>
  93.  
  94. {% endif %}
  95.  
  96.  
  97. {%- style -%}
  98.  
  99. .videoBackground .imageBoxInfoDescription p {
  100.  
  101. color: {{ block.settings.color_text }}!important;
  102.  
  103. }
  104.  
  105. {%- endstyle -%}
  106.  
  107.  
  108. {% if block.settings.text != blank %}
  109.  
  110. <div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">
  111.  
  112. {{ block.settings.text }}
  113.  
  114. </div>
  115.  
  116. {% endif %}
  117.  
  118.  
  119. {% if block.settings.button_link != blank and block.settings.button_label != blank %}
  120.  
  121. <a href="{{ block.settings.button_link }}" class="imageBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">
  122.  
  123. {{ block.settings.button_label | escape }}
  124.  
  125. </a>
  126.  
  127. {% endif %}
  128.  
  129. </div>
  130.  
  131. </div>
  132.  
  133. {% endif %}
  134.  
  135. {%- endfor -%}
  136.  
  137.  
  138. {% else %}
  139.  
  140. <div class="placeholderNoblocks">
  141.  
  142. This section doesn’t currently include any content. Add content to this section using the sidebar.
  143.  
  144.     </div>
  145.  
  146. {%- endif -%}
  147.  
  148.  
  149. <style>
  150.  
  151. .main-content .videoBackground {
  152.  
  153. margin-top: -55px;
  154.  
  155. }
  156. .videoBackground {
  157.  
  158. position: relative;
  159.  
  160. }
  161. .videoBackground .fullscreen-video-wrap {
  162.  
  163. position: absolute;
  164.  
  165. top: 0;
  166.  
  167. left: 0;
  168.  
  169. min-width: 100%;
  170.  
  171. width: 100%;
  172.  
  173. height: 100%;
  174.  
  175. overflow: hidden;
  176. }
  177.  
  178. .videoBackground .fullscreen-video-wrap .video-js {
  179.  
  180. position: absolute;
  181.  
  182. top: 0;
  183.  
  184. left: 0;
  185.  
  186. min-height: 100%;
  187.  
  188. min-width: 100%;
  189.  
  190. width: 100%;
  191.  
  192. height: 100%;
  193.  
  194. object-fit: cover;
  195.  
  196. }
  197.  
  198. .videoBackground .fullscreen-video-wrap video {
  199.  
  200. min-height: 100%;
  201.  
  202. min-width: 100%;
  203.  
  204. object-fit: cover;
  205.  
  206. }
  207.  
  208. .videoBackground .videoBox {
  209.  
  210. display: flex;
  211.  
  212. align-items: center;
  213.  
  214. justify-content: flex-end;
  215.  
  216. flex-direction: column;
  217.  
  218. padding: 100px 20px 80px;
  219.  
  220. background-size: cover;
  221.  
  222. background-position: center;
  223.  
  224. background-repeat: no-repeat;
  225.  
  226. min-height: 500px;
  227.  
  228. max-height: 800px;
  229.  
  230.         height: calc(100vh - 165px);
  231.  
  232. position: relative;
  233.  
  234. }
  235.  
  236. .videoBackground .imageBox {
  237.  
  238. display: flex;
  239.  
  240. align-items: center;
  241.  
  242. justify-content: flex-end;
  243.  
  244. flex-direction: column;
  245.  
  246. padding: 100px 20px 80px;
  247.  
  248. background-size: cover;
  249.  
  250. background-position: center;
  251.  
  252. background-repeat: no-repeat;
  253.  
  254. position: relative;
  255.  
  256. min-height: calc(100vh - 165px);
  257.  
  258. height: auto;
  259.  
  260. }
  261.  
  262. .videoBackground .videoBoxInfo, .videoBackground .imageBoxInfo {
  263.  
  264. z-index: 2;
  265.  
  266. margin: auto;
  267.  
  268. text-align: center;
  269.  
  270. }
  271.  
  272. .videoBackground .overlay {
  273.  
  274. content: "";
  275.  
  276. position: absolute;
  277.  
  278. top: 0;
  279.  
  280. right: 0;
  281.  
  282. bottom: 0;
  283.  
  284. left: 0;
  285.  
  286. background: #000;
  287.  
  288. z-index: 1;
  289.  
  290. }
  291.  
  292. .videoBackground .videoBoxInfoBtn, .videoBackground .imageBoxInfoBtn {
  293.  
  294. -moz-user-select: none;
  295.  
  296. -ms-user-select: none;
  297.  
  298. -webkit-user-select: none;
  299.  
  300. user-select: none;
  301.  
  302. -webkit-appearance: none;
  303.  
  304. -moz-appearance: none;
  305.  
  306. appearance: none;
  307.  
  308. display: inline-block;
  309.  
  310. width: auto;
  311.  
  312. text-decoration: none;
  313.  
  314. text-align: center;
  315.  
  316. vertical-align: middle;
  317.  
  318. cursor: pointer;
  319.  
  320. border: 1px solid transparent;
  321.  
  322. border-radius: 2px;
  323.  
  324. padding: 10px 30px;
  325.  
  326. font-style: normal;
  327.  
  328. font-weight: normal;
  329.  
  330. letter-spacing: 0.06em;
  331.  
  332. white-space: normal;
  333.  
  334. font-size: 16px;
  335.  
  336. margin-top: 20px;
  337.  
  338. }
  339.  
  340. .videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle {
  341.  
  342. color: #FFF;
  343.  
  344. font-size: 65px;
  345.  
  346. line-height: 40px;
  347.  
  348. }
  349.  
  350. .videoBackground .videoBoxInfoDescription, .videoBackground .imageBoxInfoDescription {
  351.  
  352. max-width: 500px;
  353.  
  354. margin: 0 auto;
  355.  
  356. }
  357.  
  358. .videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p {
  359.  
  360. font-size: 17px;
  361.  
  362. line-height: 28px;
  363.  
  364. }
  365.  
  366. .videoBackground .placeholderNoblocks {
  367.  
  368. text-align: center;
  369.  
  370. max-width: 500px;
  371.  
  372. margin: 0 auto;
  373.  
  374. }
  375.  
  376.     @media screen and (max-width: 767px) {
  377.  
  378. .main-content .videoBackground {
  379.  
  380. margin-top: -35px;
  381.  
  382. }
  383.  
  384. .videoBackground .fullscreen-video-wrap {
  385.  
  386. z-index: 3;
  387.  
  388. }
  389.  
  390. .videoBackground .videoBox {
  391.  
  392. min-height: 300px;
  393.  
  394. height: 100%;
  395.  
  396. position: relative;
  397.  
  398. padding: 0;
  399.  
  400. }
  401.  
  402. .videoBackground .fullscreen-video-wrap {
  403.  
  404. position: relative;
  405.  
  406. min-height: 300px;
  407.  
  408. z-index: -2;
  409.  
  410. }
  411.  
  412. .videoBackground .videoBoxInfo {
  413.  
  414. padding: 2px 20px;
  415.  
  416. width: 100%;
  417.  
  418. }
  419.  
  420. .videoBoxInfoTitle, .videoBackground .videoBoxInfoBtn {
  421. display: none;
  422.  
  423. }
  424.  
  425.     }
  426.  
  427. </style>
  428.  
  429.  
  430.  
  431. {% schema %}
  432.  
  433. {
  434.  
  435. "name": {
  436.  
  437. "en": "Video Background"
  438.  
  439. },
  440.  
  441. "class": "videoBackground",
  442.  
  443. "max_blocks": 1,
  444.  
  445. "blocks": [
  446.  
  447. {
  448.  
  449. "type": "video",
  450.  
  451. "name": "Video",
  452.  
  453. "settings": [
  454.  
  455. {
  456.  
  457. "type": "url",
  458.  
  459. "id": "video_link",
  460.  
  461. "label": {
  462.  
  463. "en": "Video link"
  464.  
  465. }
  466.  
  467. },
  468.  
  469. {
  470.  
  471. "type": "image_picker",
  472.  
  473. "id": "video_image",
  474.  
  475. "label": {
  476.  
  477. "en": "Cover image"
  478.  
  479. }
  480.  
  481. },
  482.  
  483. {
  484.  
  485.  
  486. "type": "header",
  487.  
  488. "content": {
  489.  
  490. "en": "Text"
  491.  
  492. }
  493.  
  494. },
  495.  
  496. {
  497.  
  498. "type": "text",
  499.  
  500. "id": "title",
  501.  
  502. "label": {
  503.  
  504. "en": "Heading"
  505.  
  506. },
  507.  
  508. "default": "Video slide"
  509.  
  510. },
  511.  
  512. {
  513.  
  514. "type": "richtext",
  515.  
  516. "id": "text",
  517.  
  518. "label": {
  519.  
  520. "en": "Description"
  521.  
  522. },
  523.  
  524. "default": {
  525.  
  526. "en": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
  527.  
  528. }
  529.  
  530. },
  531.  
  532. {
  533.  
  534. "type": "color",
  535.  
  536. "id": "color_text",
  537.  
  538. "label": {
  539.  
  540. "en": "Text color"
  541.  
  542. },
  543.  
  544. "default": "#ffffff"
  545.  
  546. },
  547.  
  548. {
  549.  
  550. "type": "text",
  551.  
  552. "id": "button_label",
  553.  
  554. "label": {
  555.  
  556. "en": "Button label"
  557.  
  558. }
  559.  
  560. },
  561.  
  562. {
  563.  
  564. "type": "url",
  565.  
  566. "id": "button_link",
  567.  
  568. "label": {
  569.  
  570. "en": "Button link"
  571.  
  572. }
  573.  
  574. },
  575.  
  576. {
  577.  
  578. "type": "color",
  579.  
  580. "id": "color_btn_bg",
  581.  
  582. "label": {
  583.  
  584. "en": "Background button color"
  585.  
  586. },
  587.  
  588. "default": "#ffffff"
  589.  
  590. },
  591.  
  592. {
  593.  
  594. "type": "color",
  595.  
  596. "id": "color_btn_text",
  597.  
  598. "label": {
  599.  
  600. "en": "Button text color"
  601.  
  602. },
  603.  
  604. "default": "#ffffff"
  605.  
  606. }
  607.  
  608. ]
  609.  
  610. },
  611.  
  612. {
  613.  
  614. "type": "image",
  615.  
  616. "name": "Image",
  617.  
  618. "settings": [
  619.  
  620. {
  621.  
  622. "type": "color",
  623.  
  624. "id": "color_bg",
  625.  
  626. "label": {
  627.  
  628. "en": "Background color (optional)"
  629.  
  630. },
  631.  
  632. "default": "#16165b"
  633.  
  634. },
  635.  
  636. {
  637.  
  638. "type": "image_picker",
  639.  
  640. "id": "image_bg",
  641.  
  642. "label": {
  643.  
  644. "en": "or use an image (required)"
  645.  
  646. }
  647.  
  648. },
  649.  
  650. {
  651.  
  652. "type": "range",
  653.  
  654. "id": "overlay_opacity",
  655.  
  656. "label": {
  657.  
  658. "en": "Overlay opacity"
  659.  
  660. },
  661.  
  662. "min": 0,
  663.  
  664. "max": 99,
  665.  
  666. "step": 1,
  667.  
  668. "unit": {
  669.  
  670. "en": "%"
  671.  
  672. },
  673.  
  674. "default": 0
  675.  
  676. },
  677.  
  678. {
  679.  
  680. "type": "header",
  681.  
  682. "content": {
  683.  
  684. "en": "Text"
  685.  
  686. }
  687.  
  688. },
  689.  
  690. {
  691.  
  692. "type": "text",
  693.  
  694. "id": "title",
  695.  
  696. "default": "Image slide",
  697.  
  698. "label": {
  699.  
  700. "en": "Heading"
  701.  
  702. }
  703.  
  704. },
  705.  
  706. {
  707.  
  708. "type": "richtext",
  709.  
  710. "id": "text",
  711.  
  712. "label": {
  713.  
  714. "en": "Description"
  715.  
  716. },
  717.  
  718. "default": {
  719.  
  720. "en": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
  721.  
  722. }
  723.  
  724. },
  725.  
  726. {
  727.  
  728. "type": "color",
  729.  
  730. "id": "color_text",
  731.  
  732. "label": {
  733.  
  734. "en": "Text color"
  735.  
  736. },
  737.  
  738. "default": "#ffffff"
  739.  
  740. },
  741.  
  742. {
  743.  
  744. "type": "text",
  745.  
  746. "id": "button_label",
  747.  
  748. "label": {
  749.  
  750. "en": "Button label"
  751.  
  752. }
  753.  
  754. },
  755.  
  756. {
  757.  
  758. "type": "url",
  759.  
  760. "id": "button_link",
  761.  
  762. "label": {
  763.  
  764. "en": "Button link"
  765.  
  766. }
  767.  
  768. },
  769.  
  770. {
  771.  
  772. "type": "color",
  773.  
  774. "id": "color_btn_bg",
  775.  
  776. "label": {
  777.  
  778. "en": "Background button color"
  779.  
  780. },
  781.  
  782. "default": "#ffffff"
  783.  
  784. },
  785.  
  786. {
  787.  
  788. "type": "color",
  789.  
  790. "id": "color_btn_text",
  791.  
  792. "label": {
  793.  
  794. "en": "Button text color"
  795.  
  796. },
  797.  
  798. "default": "#ffffff"
  799.  
  800. }
  801.  
  802. ]
  803.  
  804. }
  805.  
  806. ],
  807.  
  808. "presets": [
  809.  
  810. {
  811.  
  812. "name": {
  813.  
  814. "en": "Video Background"
  815.  
  816. },
  817.  
  818. "category": {
  819.  
  820. "en": "Main"
  821.  
  822. },
  823.  
  824. "blocks": [
  825.  
  826. {
  827.  
  828. "type": "video"
  829.  
  830. }
  831.  
  832. ]
  833.  
  834. }
  835.  
  836. ]
  837.  
  838. }
  839.  
  840. {% endschema %}
Tags: Video Banner - Liquid code
Advertisement
Comments
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!