Full bleed video for my template

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

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;
}

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?

On 5/6/2022 at 5:45 AM, amychancreative said:

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

Each case needs a differnet code. Can you share link to your site?

@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/

@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?

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;
}

@tuanphan That did the trick! Thank you very much. 

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;
}

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;
}}}

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? 

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