Integration of a full-screen video on the home page

[Olivier10]

Hi,
I'd like my video on my home page to be full-width and integrated into the background of my menu. How can I do this?
Here's the link: REVAHOME-MOBILIER
Thanks in advance to the community

[enumbin]

Some apps can let you do that. Or you need to add code to your theme to do that.  I am giving you code below for that section. But using an app will be much more easier. 

{% schema %}
{
  "name": "Full Width Video",
  "settings": [
    {
      "id": "video_url",
      "type": "text",
      "label": "Video URL (MP4 format)"
    }
  ],
  "presets": [
    {
      "name": "Full Width Video"
    }
  ]
}
{% endschema %}

<style>
  .fullwidth-video-container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
  }
  .fullwidth-video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>

<div class="fullwidth-video-container">
  <video autoplay loop muted playsinline>
    <source src="{{ section.settings.video_url }}" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>

If you want to use app you can try this one Slider Revolution Shopify It is a good app and has free version.

[Olivier10]

Thank you very much ! I would like to use your code but I don't know where I have to introduce it ? Could you help me ? Because, when I tried to introduce it at the end, i can't saved it

[enumbin]

Hello

I am describing the process step by step below. 

1. Go to online store -> Select the theme (...) -> Edit Code

2. Find the section tab -> Add a new section

3. Pase the code and save

4. Go to customiser and you will find the section

Let me know the results. If you want you can give me the collaborator access so that I can do it for you.

The easiest way to achieve that feature is to use an app like Slider Revolution Shopify 

Thank You

[Olivier10]

Hi Enumbin,
Thank you for your help.
So I well created the section. Nevertheless, I couldn't add a video because it asked me for a URL link even though I have my video locally (I even tried with a Youtube video and it didn't work). How can I integrate my video from my local space?
Also, when I was creating the section, I realized that it wasn't the whole screen and that there were still small margins on the side, so what can I do?
Thank you in advance !

 

[enumbin]

Hello @Olivier10  

Please find the whole code below. I have don't it and tested it. See the shot please.

{% schema %}
{
  "name": "Custom Full Width Video",
  "settings": [
    {
      "id": "custom_video",
      "type": "video",
      "label": "Video URL (MP4 format)"
    }
  ],
  "presets": [
    {
      "name": "Custom Full Width Video"
    }
  ]
}
{% endschema %}

<style>
  .fullwidth-video-container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
  }
  .fullwidth-video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>

<div class="fullwidth-video-container">
  {% if section.settings.custom_video %}
    <video autoplay loop muted playsinline>
      <source src="{{ section.settings.custom_video | video_tag }}" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  {% else %}
    <p>No video selected</p>
  {% endif %}
</div>

[Olivier10]

Hi Enumbin,

Sorry for my late answer.

I tried last week and I tried againthis morning with your new code and it doesn't work... There are also a space on the each part of the video. Do you you have any solution ? You could try yourself directly on my code because there is no password and it's for the firs video of the website on the home page.

I hope it will work.
Thank you again in advance

[enumbin]

Hello @Olivier10 

Extremely sorry for the late reply. I was not available on the forum because of some urgent work. I missed your email notification also. Is the issue solved? If not then if you can send me the collab access, I will try to fix it on your site.