Shopify themes, liquid, logos, and UX
Hello Community,
I'm making a website with the Sense theme.
I would like to make a page consisting of video tutorials (with youtube URLs). So, ideally to have like a multirow or image with text but with youtube videos.
I've tried a lot of solutions but none of them work properly for me.
As I can't modify the existing sections or create a video with text section that works, I've also tried resizing the video section that already exists (in desktop mode, the video takes up too much space and I'd like it to be small).
Just by adding some basic CSS, I've managed to change the width using ‘witdh: 50%’ but I can't change the height...
Would you have a way of getting videos from Youtube to be small?
Thank you so much in advance for helping me..
Hello @LauraLalire
can you please send Website URL.
Thanks
Hello @LauraLalire
I am making a new Section for you plz follow the steps
Go to online store ----> themes ----> actions ----> edit code ---->add new section ...name...> video-grid
remove the code and paste this whole code
<style>
.video-grid {
display: flex; /* Use flexbox to create a single row layout */
overflow-x: auto; /* Enable horizontal scrolling if the content overflows */
gap: 20px; /* Space between video blocks */
padding: 10px 0; /* Optional: Padding for better spacing */
white-space: nowrap; /* Prevent wrapping of video blocks */
}
.video-block {
background-color: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
width: 250px; /* Adjust width as needed */
flex-shrink: 0; /* Prevent flex items from shrinking */
}
.video-block iframe {
width: 100%;
height: 200px; /* Adjust height as needed */
border: none;
}
.video-info {
padding: 10px;
font-size: 16px;
color: #333;
background-color: #f9f9f9;
border-top: 1px solid #ddd;
}
.video-info h3 {
margin: 0;
font-size: 18px;
}
.video-placeholder {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 200px; /* Match the height of iframe */
background-color: #f0f0f0; /* Light background for the placeholder */
color: #888; /* Light gray text color */
font-size: 24px; /* Size of the icon or text */
}
.video-placeholder img {
max-width: 100px; /* Size of the placeholder image */
max-height: 100px; /* Maintain aspect ratio */
}
</style>
<div class="video-grid-wrapper">
{% if section.settings.heading %}
<div class="title-wrapper title-wrapper--no-top-margin">
<h2 class="title inline-richtext {{ section.settings.heading_size }}">{{ section.settings.heading }}</h2>
</div>
{% endif %}
<div class="video-grid">
{% for block in section.blocks %}
{%- assign video_id = block.settings.video_url -%}
{%- assign video_title = block.settings.video_title -%}
<div class="video-block">
{%- if video_id contains 'youtube.com' or video_id contains 'youtu.be' -%}
{%- capture video_id -%}
{%- if video_id contains 'watch?v=' -%}
{{ video_id | split: 'watch?v=' | last | split: '&' | first }}
{%- elsif video_id contains 'youtu.be/' -%}
{{ video_id | split: 'youtu.be/' | last | split: '?' | first }}
{%- endif -%}
{%- endcapture -%}
<iframe src="https://www.youtube.com/embed/{{ video_id }}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen title="{{ video_title }}"></iframe>
{%- elsif video_id contains 'vimeo.com' -%}
{%- capture video_id -%}
{{ video_id | split: 'vimeo.com/' | last | split: '?' | first }}
{%- endcapture -%}
<iframe src="https://player.vimeo.com/video/{{ video_id }}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen title="{{ video_title }}"></iframe>
{%- else -%}
<div class="video-placeholder">
<img src="https://www.youtube.com/img/desktop/yt_1200.png" alt="YouTube Placeholder">
</div>
{%- endif -%}
<div class="video-info">
<h3>{{ video_title }}</h3>
</div>
</div>
{% endfor %}
</div>
</div>
{% schema %}
{
"name": "Video Grid 1",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "inline_richtext",
"id": "heading",
"default": "Video Grid",
"label": "Heading"
},
{
"type": "select",
"id": "heading_size",
"options": [
{"value": "h2", "label": "H2"},
{"value": "h1", "label": "H1"},
{"value": "h0", "label": "H0"},
{"value": "hxl", "label": "HXL"},
{"value": "hxxl", "label": "HXXL"}
],
"default": "h1",
"label": "Heading Size"
},
{
"type": "header",
"content": "Video Settings"
},
{
"type": "header",
"content": "Video Grid Settings"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "Color Scheme",
"default": "scheme-1"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Padding Top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Padding Bottom",
"default": 36
}
],
"blocks": [
{
"type": "video",
"name": "Video Block",
"settings": [
{
"type": "text",
"id": "video_url",
"label": "Video URL",
"info": "Enter the YouTube or Vimeo video ID."
},
{
"type": "text",
"id": "video_title",
"label": "Video Title",
"info": "Enter the title or description of the video."
}
]
}
],
"presets": [
{
"name": "grid-video1"
}
]
}
{% endschema %}
and save the code
and go to customize and check the video
Buy me a Pizza
If this was helpful, hit the like button and accept the solution.
Thanks
Hi @Sangeetanahar ,
Thanks a lot for helping.
It looks like great but may I ask some changes?
1- Do you think we can have an option to see the video bigger or in full screen ?
2- Also, is it possible to have like a carrousel on mobile version (no slide bar)?
Do you have any solution for that please?
Thank you again in advance 🙂
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024