API tools faq
paste
crescenthu

video banner

crescenthu
Aug 26th, 2025
30
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.33 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2. #video-container-{{section.id}}{
  3. height: {{section.settings.desktop_height}}px;
  4. }
  5. .video-container {
  6. position: relative;
  7. overflow: hidden;
  8. display: flex;
  9. align-items: center;
  10. justify-content: center;
  11. text-align: center;
  12. flex-direction: column;
  13. }
  14. .video-container .mobile-video{
  15. display: none;
  16. }
  17. @media only screen and (max-width: 768px){
  18. #video-container-{{section.id}}{
  19. height: {{section.settings.mobile_height}}px;
  20. }
  21. .video-container .desktop-video{
  22. display: none;
  23. }
  24. .video-container .mobile-video{
  25. display: block;
  26. }
  27. }
  28.  
  29. .video-container video{
  30. position: absolute;
  31. top: 0;
  32. left: 0;
  33. width: 100%;
  34. height: 100%;
  35. padding: 0;
  36. object-fit: cover;
  37. pointer-events: none;
  38. }
  39. .video-container .text-overlay{
  40. z-index: 2;
  41. padding: 50px;
  42. }
  43. .video-container:after {
  44. content: "";
  45. position: absolute;
  46. z-index: 1;
  47. top: 0;
  48. left: 0;
  49. width: 100%;
  50. height: 100%;
  51. transition: opacity .35s;
  52. background: rgba(0, 0, 0, 0.12);
  53. pointer-events: none;
  54. }
  55. .iframe-holder{
  56. position: absolute;
  57. overflow: hidden;
  58. top: 50%;
  59. width: 100%;
  60. height: 100%;
  61. padding-top: 56.3%;
  62. transform: translateY(-50%);
  63. pointer-events: none;
  64. }
  65. .iframe-container{
  66. position: absolute;
  67. top: 0;
  68. left: 0;
  69. width: 100%;
  70. height: 100%;
  71. }
  72. .video-container .iframevideo{
  73. position: absolute;
  74. top: -60px;
  75. left: 50%;
  76. width: 100%;
  77. height: calc(100% + 120px);
  78. transform: translate(-50%);
  79. }
  80. .video-container iframe{
  81. position: absolute;
  82. top: 0;
  83. left: 0;
  84. width: 100%;
  85. height: 100%;
  86. pointer-events: none;
  87. }
  88. .placeholder-video{
  89. position: absolute;
  90. top: 0;
  91. left: 0;
  92. width: 100%;
  93. height: 100%;
  94. padding: 0;
  95. transition: opacity .3s;
  96. max-width: 100%;
  97. object-fit: cover;
  98. vertical-align: baseline;
  99. display: block;
  100. margin-right: auto;
  101. margin-left: auto;
  102. }
  103. .placeholder-video.video-played-hidden{
  104. opacity: 0;
  105. pointer-events: none;
  106. }
  107. .text-overlay p,
  108. .text-overlay h2,
  109. .text-overlay h1,
  110. .text-overlay div{
  111. color: white;
  112. text-align: center;
  113. }
  114. .text-overlay a{
  115.  
  116. }
  117. .text-overlay h2,
  118. .text-overlay h1{
  119. margin: 0;
  120. margin-bottom: 1.25rem;
  121. margin-left: auto;
  122. margin-right: auto;
  123. }
  124. .text-overlay div.subheading{
  125. font-size: .8em;
  126. font-weight: 500;
  127. letter-spacing: .1em;
  128. line-height: 1.3em;
  129. }
  130. .text-overlay p{
  131. margin-top: 0;
  132. font-size: 1.35em;
  133. margin-bottom: 1em;
  134. max-width: 780px;
  135. text-align: center;
  136. margin-left: auto;
  137. margin-right: auto;
  138. }
  139. @media only screen and (max-width: 768px){
  140. .text-overlay p{
  141. font-size: 1.2em;
  142. }
  143. }
  144. .text-overlay a{
  145. text-decoration: none;
  146. font-size: 1rem;
  147. letter-spacing: 0.1rem;
  148. padding: 14px 20px;
  149. margin: 10px .5em 0;
  150. vertical-align: middle;
  151. color: white;
  152. background-color: black;
  153. display: inline-block;
  154. height: auto;
  155. line-height: 18px;
  156. transition: background-color .1s;
  157. }
  158. .video-container.top-left {
  159. justify-content: flex-start;
  160. align-items: flex-start;
  161. }
  162. .video-container.top-center {
  163. justify-content: flex-start;
  164. align-items: center;
  165. text-align: center;
  166. }
  167. .video-container.top-right {
  168. justify-content: flex-start;
  169. align-items: flex-end;
  170. }
  171. .video-container.middle-left {
  172. justify-content: center;
  173. align-items: flex-start;
  174. }
  175.  
  176. .video-container.middle-center {
  177. justify-content: center;
  178. align-items: center;
  179. text-align: center;
  180. }
  181. .video-container.middle-right {
  182. justify-content: center;
  183. align-items: flex-end;
  184. }
  185. .video-container.bottom-left {
  186. justify-content: flex-end;
  187. align-items: flex-start;
  188. }
  189. .video-container.bottom-center {
  190. justify-content: flex-end;
  191. align-items: center;
  192. text-align: center;
  193. }
  194. .video-container.bottom-right {
  195. justify-content: flex-end;
  196. align-items: flex-end;
  197. }
  198. .video-container svg{
  199. width: 100%;
  200. height: 100%;
  201. position: absolute;
  202. fill: #9f9f9f;
  203. background: #c6c7c8;
  204. }
  205.  
  206. .bottom-left .video-text,
  207. .bottom-left p,
  208. .top-left .video-text,
  209. .top-left p,
  210. .middle-left .video-text,
  211. .middle-left p{
  212. text-align: left;
  213. }
  214. .bottom-right .video-text,
  215. .bottom-right p,
  216. .top-right .video-text,
  217. .top-right p,
  218. .middle-right .video-text,
  219. .middle-right p{
  220. text-align: right;
  221. }
  222. </style>
  223. <div id="video-container-{{section.id}}" class="video-container {{ section.settings.content_position }}">
  224. {%- if section.settings.video_url != blank -%}
  225. {% assign youtube_url = section.settings.video_url %}
  226. <div class="iframe-holder">
  227. <div class="iframe-container">
  228. <div id="iframevideo-{{section.id}}" class="iframevideo">
  229. <div id="iframe-player-{{section.id}}" videoLink="{{youtube_url}}"></div>
  230. </div>
  231. </div>
  232. {%- if section.settings.image_placeholder != blank -%}
  233. {{ section.settings.image_placeholder | image_url: width: 3200 | image_tag: class: 'placeholder-video', widths: '340, 480, 740, 980, 1200, 1400, 1600, 1920, 2560, 3200', sizes:"100vw" }}
  234. {%- endif -%}
  235. </div>
  236. {%- elsif section.settings.video != blank and section.settings.video_mobile == blank -%}
  237. {{ section.settings.video | video_tag: autoplay: true, loop: true, muted: true, controls: false }}
  238. {%- elsif section.settings.video_mobile != blank and section.settings.video_mobile == blank -%}
  239. {{ section.settings.video_mobile | video_tag: autoplay: true, loop: true, muted: true, controls: false }}
  240. {%- elsif section.settings.video != blank and section.settings.video_mobile != blank -%}
  241. {{ section.settings.video | video_tag: autoplay: true, loop: true, muted: true, controls: false, class:'desktop-video' }}
  242. {{ section.settings.video_mobile | video_tag: autoplay: true, loop: true, muted: true, controls: false, class:'mobile-video' }}
  243. {%- else -%}
  244. {{ 'lifestyle-1' | placeholder_svg_tag }}
  245. {%- endif -%}
  246. <div class="text-overlay">
  247. {%- for block in section.blocks -%}
  248. {% case block.type %}
  249. {%- when 'subheading' -%}
  250. <div class="subheading video-text">{{ block.settings.subheading_text }}</div>
  251. {%- when 'heading' -%}
  252. <style>
  253. #video-container-{{section.id}} .text-overlay h2,
  254. #video-container-{{section.id}} .text-overlay h1{
  255. font-size: {{ block.settings.desktop_heading_size }}px;
  256. max-width: {{ block.settings.desktop_width }}px;
  257. }
  258. @media only screen and (max-width: 768px){
  259. #video-container-{{section.id}} .text-overlay h2,
  260. #video-container-{{section.id}} .text-overlay h1{
  261. font-size: {{block.settings.mobile_heading_size}}px;
  262. max-width: {{ block.settings.mobile_width }}px;
  263. }
  264. }
  265. </style>
  266. {%- if block.settings.h1_heading -%}
  267. <h1 class="video-text">{{ block.settings.heading_text }}</h1>
  268. {%- else -%}
  269. <h2 class="video-text">{{ block.settings.heading_text }}</h2>
  270. {%- endif -%}
  271. {%- when 'text' -%}
  272. {{ block.settings.text_content }}
  273. {%- else -%}
  274. <style>
  275. #video-container-{{section.id}} .text-overlay a{
  276. color: {{ block.settings.button_text_color }};
  277. background-color: {{ block.settings.button_bg_color }};
  278. border-radius: {{ block.settings.button_radius }}px;
  279. font-size: {{ block.settings.font_size }}px;
  280. {% if block.settings.font_weight %}font-weight: bold;{% endif %}
  281. }
  282. #video-container-{{section.id}} .text-overlay a:hover{
  283. background-color: {{ block.settings.button_bg_hover }};
  284. }
  285. </style>
  286. <div class="video-text">
  287. <a href="{{ block.settings.button_link }}">{{ block.settings.button_text }}</a>
  288. </div>
  289. {% endcase %}
  290. {%- endfor -%}
  291. </div>
  292. </div>
  293. <script>
  294. function youtube_parser(url){
  295. var regExp = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
  296. var match = url.match(regExp);
  297. if (match && match[2].length == 11) {
  298. return match[2];
  299. } else{
  300. return false
  301. }
  302. }
  303. let videoLink = document.querySelector('#iframe-player-{{section.id}}').getAttribute('videoLink')
  304. videoLink = youtube_parser(videoLink)
  305. if(videoLink){
  306. var tag = document.createElement('script');
  307. tag.src = "https://www.youtube.com/iframe_api";
  308. var firstScriptTag = document.getElementsByTagName('script')[0];
  309. firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  310. var player;
  311. function onYouTubeIframeAPIReady() {
  312. player = new YT.Player('iframe-player-{{section.id}}', {
  313. height: '1280',
  314. width: '720',
  315. videoId: videoLink,
  316. playerVars: {
  317. 'playsinline': 1,
  318. 'controls': 0,
  319. 'disablekb': 1,
  320. 'iv_load_policy': 3,
  321. 'modestbranding': 1,
  322. 'playsinline': 1,
  323. 'rel': 0,
  324. },
  325. events: {
  326. 'onReady': onPlayerReady,
  327. 'onStateChange': onPlayerStateChange
  328. }
  329. });
  330. }
  331. function onPlayerReady(event) {
  332. event.target.playVideo();
  333. event.target.mute();
  334. const container = document.querySelector('#iframevideo-{{section.id}}')
  335. container.style.width = `${container.clientHeight * 1.7778}px`;
  336. window.addEventListener('resize', window.debounce(() => {
  337. container.style.width = `${container.clientHeight * 1.7778}px`;
  338. }, 200));
  339. event.target.getIframe().title = "{{ section.settings.video-alt }}"
  340. }
  341. function onPlayerStateChange(event){
  342. if (event.data === YT.PlayerState.ENDED) {
  343. this.player.playVideo()
  344. }
  345. else if (event.data === YT.PlayerState.PLAYING) {
  346. document.querySelector('#video-container-{{section.id}} .placeholder-video')?.classList.add('video-played-hidden')
  347. }
  348. }
  349. }
  350. </script>
  351. {%- schema -%}
  352. {
  353. "name":"Video Banner",
  354. "settings":[
  355. {
  356. "type":"video",
  357. "id":"video",
  358. "label":"Desktop video"
  359. },
  360. {
  361. "type":"video",
  362. "id":"video_mobile",
  363. "label":"Mobile video"
  364. },
  365. {
  366. "type":"header",
  367. "content":"Youtube video"
  368. },
  369. {
  370. "type":"text",
  371. "id":"video_url",
  372. "label":"Video URL",
  373. "info":"Enter the URL of a YouTube video."
  374. },
  375. {
  376. "type":"image_picker",
  377. "id":"image_placeholder",
  378. "label":"Place holder image"
  379. },
  380. {
  381. "type":"text",
  382. "id":"video-alt",
  383. "label":"Video description"
  384. },
  385. {
  386. "type":"header",
  387. "content":"Position and dimensions"
  388. },
  389. {
  390. "type":"select",
  391. "id":"content_position",
  392. "options":[
  393. {
  394. "value":"top-left",
  395. "label":"Top Left"
  396. },
  397. {
  398. "value":"top-center",
  399. "label":"Top Center"
  400. },
  401. {
  402. "value":"top-right",
  403. "label":"Top Right"
  404. },
  405. {
  406. "value":"middle-left",
  407. "label":"Middle Left"
  408. },
  409. {
  410. "value":"middle-center",
  411. "label":"Middle Center"
  412. },
  413. {
  414. "value":"middle-right",
  415. "label":"Middle Right"
  416. },
  417. {
  418. "value":"bottom-left",
  419. "label":"Bottom Left"
  420. },
  421. {
  422. "value":"bottom-center",
  423. "label":"Bottom Center"
  424. },
  425. {
  426. "value":"bottom-right",
  427. "label":"Bottom Right"
  428. }
  429. ],
  430. "default":"middle-center",
  431. "label":"Text Position"
  432. },
  433. {
  434. "type":"range",
  435. "id":"desktop_height",
  436. "min":200,
  437. "max":1000,
  438. "step":20,
  439. "unit":"px",
  440. "label":"Desktop Height",
  441. "default":600
  442. },
  443. {
  444. "type":"range",
  445. "id":"mobile_height",
  446. "min":100,
  447. "max":1000,
  448. "step":20,
  449. "unit":"px",
  450. "label":"Mobile Height",
  451. "default":500
  452. }
  453. ],
  454. "blocks":[
  455. {
  456. "type":"heading",
  457. "name":"Heading",
  458. "settings":[
  459. {
  460. "type":"text",
  461. "id":"heading_text",
  462. "label":"Heading Text",
  463. "default":"Banner Video"
  464. },
  465. {
  466. "type":"range",
  467. "id":"desktop_width",
  468. "min":100,
  469. "max":1000,
  470. "step":10,
  471. "unit":"px",
  472. "label":"Maximum desktop width",
  473. "default":1000
  474. },
  475. {
  476. "type":"range",
  477. "id":"mobile_width",
  478. "min":100,
  479. "max":1000,
  480. "step":10,
  481. "unit":"px",
  482. "label":"Maximum mobile width",
  483. "default":400
  484. },
  485. {
  486. "type":"range",
  487. "id":"desktop_heading_size",
  488. "min":20,
  489. "max":150,
  490. "step":2,
  491. "unit":"px",
  492. "label":"Desktop heading size",
  493. "default":84
  494. },
  495. {
  496. "type":"range",
  497. "id":"mobile_heading_size",
  498. "min":20,
  499. "max":150,
  500. "step":2,
  501. "unit":"px",
  502. "label":"Mobile heading size",
  503. "default":32
  504. },
  505. {
  506. "type": "checkbox",
  507. "id": "h1_heading",
  508. "label": "Set as an h1 heading",
  509. "default": false
  510. }
  511. ]
  512. },
  513. {
  514. "type":"subheading",
  515. "name":"Subheading",
  516. "settings":[
  517. {
  518. "type":"text",
  519. "id":"subheading_text",
  520. "label":"Subheading Text",
  521. "default":"YOUR SUBHEADING"
  522. }
  523. ]
  524. },
  525. {
  526. "type":"text",
  527. "name":"Text",
  528. "settings":[
  529. {
  530. "type":"richtext",
  531. "id":"text_content",
  532. "label":"Text Content",
  533. "default":"<p>Your text goes here</p>"
  534. }
  535. ]
  536. },
  537. {
  538. "type":"button",
  539. "name":"Button",
  540. "settings":[
  541. {
  542. "type":"text",
  543. "id":"button_text",
  544. "label":"Button Text",
  545. "default":"CLICK HERE"
  546. },
  547. {
  548. "type": "url",
  549. "id": "button_link",
  550. "label": "Button link",
  551. "default":"/"
  552. },
  553. {
  554. "type":"color",
  555. "id":"button_text_color",
  556. "label":"Button Text Color",
  557. "default":"#ffffff"
  558. },
  559. {
  560. "type":"color",
  561. "id":"button_bg_color",
  562. "label":"Button background color",
  563. "default":"#000000"
  564. },
  565. {
  566. "type":"color",
  567. "id":"button_bg_hover",
  568. "label":"Button hover color",
  569. "default":"#232323"
  570. },
  571. {
  572. "type":"range",
  573. "id":"button_radius",
  574. "min":0,
  575. "max":60,
  576. "step":2,
  577. "unit":"px",
  578. "label":"Corner radius",
  579. "default":0
  580. },
  581. {
  582. "type": "checkbox",
  583. "id": "font_weight",
  584. "label": "Make button text bold",
  585. "default": false
  586. },
  587. {
  588. "type":"range",
  589. "id":"font_size",
  590. "min":0,
  591. "max":30,
  592. "step":1,
  593. "unit":"px",
  594. "label":"Button text size",
  595. "default":15
  596. }
  597. ]
  598. }
  599. ],
  600. "presets":[
  601. {
  602. "name":"Video Banner",
  603. "category":"Media",
  604. "blocks": [
  605. {
  606. "type": "subheading"
  607. },
  608. {
  609. "type": "heading"
  610. },
  611. {
  612. "type": "text"
  613. },
  614. {
  615. "type": "button"
  616. }
  617. ]
  618. }
  619. ]
  620. }
  621. {%- endschema -%}
Advertisement
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!