Jump to content

Full bleed video for my template

Recommended Posts

  • Replies 11
  • Views 3.1k
  • Created
  • Last Reply

Top Posters In This Topic

Posted
3 hours ago, nc1983 said:

Site URL: https://www.goldenllamaproductions.com/rhythms-of-peru-video

Like so many others, looking for a custom code to all the videos on pages like this be a full bleed video with sound. NOT a background banner video.

https://www.goldenllamaproductions.com/rhythms-of-peru-video

 

I want it to work like this: 

https://www.tylerkalberg.com/work-samsung-gear-anybody

 

Thank you for any help!!

 

Hi. Add to Design > Custom CSS

/* Fullbleed video */
body#collection-6100c27a2b76ec58be1f6285 section.Main-content {
    padding-left: 0px;
    padding-right: 0px;
}
div#block-ead08b269e4206f71f91 {
    padding-left: 10vw;
    padding-right: 10vw;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 9 months later...
Posted
On 7/28/2021 at 12:59 AM, tuanphan said:

Hi. Add to Design > Custom CSS

/* Fullbleed video */
body#collection-6100c27a2b76ec58be1f6285 section.Main-content {
    padding-left: 0px;
    padding-right: 0px;
}
div#block-ead08b269e4206f71f91 {
    padding-left: 10vw;
    padding-right: 10vw;
}

 

Hi, I tried this code and it didn't work. There video doesn't reach the edges of the screen?

  • 1 month later...
Posted

@tuanphan I'm struggling with the same thing. Using the following code, but I'm still getting a bit of space left and right. Tried moving to 0vw (from 10vw) but still the same result. Alterations from the code above are in RED. Where have I gone wrong, and how can I get this to full bleed? Thank you!

/* Fullbleed video */
body#collection-6061cd1dc2b0965023445946 section.Main-content {
    padding-left: 0px;
    padding-right: 0px;
}
div#block-yui_3_17_2_1_1617022196848_14515 {
    padding-left: 0vw;
    padding-right: 0vw;
}

7.1 URL: https://www.sbamatch.com/

Screen Shot 2022-06-10 at 1.28.10 PM.png

Posted

@tuanphan I could change site margins, but that would move everything. I suppose another workaround (since we don't really need sound) could be to turn this video into a background and use CSS to keep the aspect ratio. But I'm coming up blank on that too. Thoughts?

Posted
On 6/11/2022 at 1:33 AM, LUDLOW said:

@tuanphan I could change site margins, but that would move everything. I suppose another workaround (since we don't really need sound) could be to turn this video into a background and use CSS to keep the aspect ratio. But I'm coming up blank on that too. Thoughts?

Use this CSS

/* Video fullbleed */
[data-section-id="6061cd1dc2b0965023445946"] .content-wrapper {
    max-width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 4 months later...
Posted (edited)
On 6/12/2022 at 7:25 PM, tuanphan said:

Use this CSS

/* Video fullbleed */
[data-section-id="6061cd1dc2b0965023445946"] .content-wrapper {
    max-width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

 

@tuanphan not working also tried this (below) website is: https://amandabailly.com/home thanks!

 

/* Fullbleed video */
body#collection-6359a1c0f42bfd44d2def239 section.Main-content {
    padding-left: 0px;
    padding-right: 0px;
}
div#block-yui_3_17_2_1_1666874722234_1820 {
    padding-left: 0px;
    padding-right: 0px;
}

Edited by skcmarketing
Posted
On 10/27/2022 at 8:03 PM, skcmarketing said:

@tuanphan not working also tried this (below) website is: https://amandabailly.com/home thanks!

 

/* Fullbleed video */
body#collection-6359a1c0f42bfd44d2def239 section.Main-content {
    padding-left: 0px;
    padding-right: 0px;
}
div#block-yui_3_17_2_1_1666874722234_1820 {
    padding-left: 0px;
    padding-right: 0px;
}

Your site is more complicated than the case above

  • Site has 1200px width limit
  • All elements on the homepage have the same parent element, ie if you want fullwidth video, you will be forced to set all fullwidth

Try adding this to Design > Custom CSS

@media screen and (min-width:641px) {
body#collection-6359a1c0f42bfd44d2def239 {
 #canvas {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
& {
    overflow-x: hidden;
}
.columns-12>.row>.col>div:not(:first-child) {
    max-width: 1200px !important;
    margin-left: auto;
    margin-right: auto;
}}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 1 month later...
Posted

Hi, I'm trying to autoplay/loop/optimize video size for mobile on H2audio.net. Please help! I've been trying different codes but nothing working. Is there a way to make it appear full bleed on desktop, but optimized for mobile?

This is the YouTube embed code

<iframe width="560" height="315" src="https://www.youtube.com/embed/GAQKFy3rQzI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

I'd also like to get rid of the profile thumbnail/subscribers/play other video functions. Is this asking too much, lol? 

Posted
On 12/8/2022 at 12:03 PM, MediaMelanie said:

Hi, I'm trying to autoplay/loop/optimize video size for mobile on H2audio.net. Please help! I've been trying different codes but nothing working. Is there a way to make it appear full bleed on desktop, but optimized for mobile?

This is the YouTube embed code

<iframe width="560" height="315" src="https://www.youtube.com/embed/GAQKFy3rQzI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

I'd also like to get rid of the profile thumbnail/subscribers/play other video functions. Is this asking too much, lol? 

Can you share link to page where you added it? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.