Video go to the edges of the screen

Solved
RaptorPowerGear
Tourist
5 0 1

Hi, Im using the Venture theme and have 2 videos that I added to my homepage but I want them to be the full width of the screen and not in the white container.  Can someone help me do that? Thank you! 

KetanKumar
Shopify Partner
23208 2340 8589

@RaptorPowerGear 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes

Hi @RaptorPowerGear,

You want it to show up at the content home page instead of popup? Please change the code at sections/video.liquid file :
https://i.imgur.com/sBiRsVc.png => https://i.imgur.com/kHJoMii.png

Code:

<div class="video-section__cover-background">
{% if section.settings.video_url.type == "youtube" %}
<iframe src="//www.youtube.com/embed/{{ section.settings.video_url.id }}?rel=0&showinfo=0&vq=720" width="100%" height="480" frameborder="0" allowfullscreen></iframe>
{% endif %}
{% if section.settings.video_url.type == "vimeo" %}
<iframe src="//player.vimeo.com/video/{{ section.settings.video_url.id }}?color={{ settings.color_button | remove: "#" }}&byline=0&portrait=0&badge=0" width="100%" height="480" frameborder="0" allowfullscreen></iframe>
{% endif %}
</div>

Hope it helps.

If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
RaptorPowerGear
Tourist
5 0 1

https://vnfle2m54n2tcvi7-31960170632.shopifypreview.com

Here is the link.  I tried replacing the code with the other suggestion but it didnt work.  

0 Likes
Nick
Community Moderator
Community Moderator
4117 397 838

Hi @RaptorPowerGear,

If this isn't something you're comfortable doing, you could be eligible for 60 minutes free design time if you are on a paid Shopify plan. Because you're using the Venture you would qualify for the theme as it is a free Shopify developed theme. 

If you qualify then you can log in and speak to one of our advisors here. They will conenct you with the next steps with our theme team to look into this! 

Nick | Community Moderator @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
RaptorPowerGear
Tourist
5 0 1

Hi, Im trying to do that but every time I click on get support, it brings me back to the same page.  I tried following the instructions to get the help but it circles me back.  

0 Likes
made4Uo
Trailblazer
262 10 59

Hi, 

I am not sure if I understand what you want. Do you want the white container to be gone? It is just a padding. You have a padding: 40px on the section-block and padding left: 20px on the grid item. Find this section-block--padding. I don't know if something is benefiting the padding but other way to do this is to add "style="padding: 0 !important;" before the ">". Let me know if it works

code should look like below

<div class="section-block--padding grid_item one-whole align--top-middle" style="padding: 0 !important;">

 

<div class="section-block--padding grid__item one-whole align--top-middle">
<div class="grid__item-inner grid__item-inner--html">
<div class="rte">
<style>
.custom-html .container{
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
</style>
<video style="max-width: 100%; height: auto;" muted="" playsinline="" autoplay="" loop="">
<source src="https://cdn.shopify.com/s/files/1/0319/6017/0632/files/RPG_Exterior.mp4?v=1632095875" type="video/mp4">
</video>
</div>
</div>
</div>

made4Uo_1-1632237890593.png

 

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes
KetanKumar
Shopify Partner
23208 2340 8589

This is an accepted solution.

@RaptorPowerGear 

thanks for details can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

#shopify-section-1632089107148296f5 {
    margin-top: -60px;
}
#shopify-section-1632089107148296f5 .page-width {
    padding: 0;
    max-width: 100%;
}
#shopify-section-1632089107148296f5 .section-block--padding {
    padding: 0;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
RaptorPowerGear
Tourist
5 0 1

Thank you for your help! That worked perfectly for the first video but not the second.  How can I get it to work for the other one as well? 

0 Likes