Sense theme _ Video section

[LauraLalire]

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.. 

[Sangeetanahar]

Hello @LauraLalire 

can you please send Website URL.

Thanks

[Sangeetanahar]

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

[LauraLalire]

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 🙂