Hi guys, I want to make my video to divided the three-part
The left is 「about us」content, the middle is 「video」, the right is 「product advantage」and I want to make a button under the 「about us」and「product advantage」such as below picture.
There is no picture in the file
@NinescapeLand Hope you are doing well.
Could you please share your store URL? Also, share the screenshot or reference website which you would like to implement in your store
Hello your image is broken, but by your description I created a draft section is this something similar you need. if yes then DM me
yes! This is i wanted!
Can you tell me how can i create it in this?
I need a few queries before handing over the code to you. If it’s fine can you DM me?
1 Like
what in where?
Hi Deepak Sharma,
Hope this message can find you! Regarding the code you wrote last time, I found another place that needs to be optimized and I need your help.
I found two black slides on the video, can you tell me how can I make them disappear?
Have a good day!
NinescapeLand
Hi Deepaksharma,
Hope this message can find you.
I think this table is too wide. I want to shrink both the left and right sides inward a little so that they are consistent with the top and bottom. How should I do this?
Just make the width the same as the size I framed
Best regard,
NinescapeLand
hi there can you resend me the code I sent you I will remodify the code and add some more settings to adjust.
Please do also mention what more type of settings you need so I will implement that.
The code:
.cust-video-container-{{ section.id }} { display: flex; justify-content: space-between; align-items: stretch; margin: 20px; border: 1px solid {{ section.settings.border_clr }}; border-radius: {{ section.settings.border_rds }}px; background: {{ section.settings.background }}!important; color: {{ section.settings.text_color }}!important; font-family: {{ section.settings.font_family }}!important; } .cust-video-{{ section.id }} { width: 100%; height: auto; margin-top: 10%; border-radius: 20px; } @media screen and (max-width: 767px) { .cust-video-container-{{ section.id }} { flex-direction: column; } .cust-video-{{ section.id }} { margin-top: 2%; } } .cust-video-section-{{ section.id }} { flex: 1; margin: 10px; display: flex; flex-direction: column; justify-content: start; } .cust-title-{{ section.id }}{ font-size: clamp(18px, 4vw, {{ section.settings.title_size }}px); margin: 0; } .cust-button-container-{{ section.id }} { text-align: center; margin-top: 10px; } .cust-text-{{ section.id }} { overflow: hidden!important; font-size: clamp(12px, 4vw, {{ section.settings.text_size }}px); text-overflow: ellipsis!important; text-align: {{ section.settings.txt_align }}!important; display: -webkit-box!important; -webkit-box-orient: vertical!important; -webkit-line-clamp: {{ section.settings.lines }}!important; margin: 0; } .cust-button-{{ section.id }} { display: inline-block; padding: 10px; background-color: {{ section.settings.btn_color }}!important; margin: 0; color: {{ section.settings.btn_txt_color }}!important; text-decoration: none; border-radius: 15px; letter-spacing: 4px; font-size: clamp(15px, 4vw, 18px); transition: 0.3s ease-in-out; } .cust-button-{{ section.id }}:hover { filter: drop-shadow(0px 0px 10px {{ section.settings.btn_color }}); border-radius: 0; } .video-cust-new-{{ section.id }}{ width:100%; height: {{ section.settings.video_height | times: 10 }}px; }{{ section.settings.left_title }}
{{ section.settings.left_detail }}
{{ section.settings.right_title }}
{{ section.settings.right_detail }}
My demands:
I want the distance between the left and right sides to be adjustable, and I want its width to be the same as the other two panels above and below.
In addition, I also found a problem. The video in the middle is displayed without black borders on my computer, but it is displayed with black borders on my colleague’s computer. Can this be solved?
Hi Deepaksharma,
Have you received the source code I sent?
Have a good day
NinescapeLand
Here I have added settings to adjust the gap for left and right.
## {{ section.settings.left_title }}
{{ section.settings.left_detail }}
{{- section.settings.left_button -}}
<iframe class="video-cust-new-{{ section.id }}" width="100%" height="auto" src="https://www.youtube.com/embed/{{ section.settings.external_video_url.id }}?playsinline=1&autoplay=1&controls=0&mute=1&loop=1&playlist={{ section.settings.external_video_url.id }}&enablejsapi=1&rel=0&modestbranding=1&origin={{ 'https://' | append: request.host | url_encode }}" allow="autoplay; encrypted-media" allowfullscreen="allowfullscreen"></iframe>
## {{ section.settings.video_title }}
## {{ section.settings.right_title }}
{{ section.settings.right_detail }}
{{- section.settings.right_button -}}
{% schema %}
{
"name": "About Us With Video",
"settings": [
{
"type": "text",
"id": "font_family",
"label": "Name of Font",
"info": "Leave empty if this is good"
},
{
"type": "paragraph",
"content": "Customize Left section from here"
},
{
"type": "inline_richtext",
"id": "left_title",
"label": "Left Title",
"default": "About Us"
},
{
"type": "richtext",
"id": "left_detail",
"label": "Left Detail",
"info": "I have applied a setting to show how much line you want to show"
},
{
"type": "inline_richtext",
"id": "left_button",
"label": "Left Button Text",
"default": "Explore More"
},
{
"type": "url",
"id": "left_url",
"label": "Link for the Button"
},
{
"type": "paragraph",
"content": "Customize Video section from here"
},
{
"type": "video_url",
"id": "external_video_url",
"accept": ["vimeo", "youtube"],
"label": "Video URL"
},
{
"type": "checkbox",
"id": "enable",
"label": "Enable Dynamic Video Height/width Adaption",
"default": false,
"info": "Please do disable if you are not satisfied with the video auto adapting the height and width to hide the black border on different screen"
},
{
"type": "range",
"min": 10,
"max": 100,
"id": "video_height",
"label": "Video Height",
"default": 30
},
{
"type": "inline_richtext",
"id": "video_title",
"label": "Video Title",
"default": "Video by"
},
{
"type": "paragraph",
"content": "Customize Right section from here"
},
{
"type": "inline_richtext",
"id": "right_title",
"label": "Right Title",
"default": "Product Importance"
},
{
"type": "richtext",
"id": "right_detail",
"label": "right Detail",
"info": "I have applied a setting to show how much line you want to show"
},
{
"type": "inline_richtext",
"id": "right_button",
"label": "Right Button Text",
"default": "Explore More"
},
{
"type": "url",
"id": "right_url",
"label": "Link for the Button"
},
{
"type": "paragraph",
"content": "Customize all type of colors from here"
},
{
"type": "color_background",
"id": "background",
"label": "Background Color",
"default": "#fff"
},
{
"type": "color",
"id": "border_clr",
"label": "Section Border Color",
"default": "#ddd"
},
{
"type": "color",
"id": "text_color",
"label": "Text Color",
"default": "#000"
},
{
"type": "color",
"id": "btn_color",
"label": "Button Color",
"default": "#000"
},
{
"type": "color",
"id": "btn_txt_color",
"label": "Button Text Color",
"default": "#fff"
},
{
"type": "paragraph",
"content": "Customize all sizes from here"
},
{
"type": "range",
"min": 3,
"max": 20,
"id": "lines",
"label": "Paragraph Lines",
"default": 9
},
{
"type": "range",
"min": 3,
"max": 50,
"id": "title_size",
"label": "Title Size",
"default": 25
},
{
"type": "range",
"min": 3,
"max": 50,
"id": "text_size",
"label": "Content Text Size",
"default": 15
},
{
"type": "range",
"min": 3,
"max": 50,
"id": "border_rds",
"label": "Section Border Radius",
"default": 10
},
{
"type": "range",
"min": 3,
"max": 50,
"id": "right_gap",
"label": "Content Right gap",
"default": 10
},
{
"type": "range",
"min": 3,
"max": 50,
"id": "left_gap",
"label": "Content left Gap",
"default": 10
},
{
"type": "select",
"id": "txt_align",
"label": "Text Alignment",
"default": "left",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "right",
"label": "Right"
},
{
"value": "justify",
"label": "Streched"
}
]
}
],
"presets": [
{
"name": "About Us With Video"
}
]
}
{% endschema %}
And about the video having the black borders I have tried my best to provide the end result you need. it’s quite easy to customise the height and width of the video file but it’s quite hard when it is coming from youtube share link.
Please inform me if still facing any issue.