Bulma: hero-video documentation

Created on 4 Nov 2016 · 10Comments · Source: jgthms/bulma

This is about the Bulma Docs

Currently fiddling with the hero-video class. Trying to figure out how to properly use it, and cant find any documentation on it. Is it maybe not implemented fully yet?

Source

JorgenSolli

👍9

Most helpful comment

This worked fine for me :)

<section class="hero is-fullheight video">
    <div class="hero-video">
        <video poster="img/bgimg.jpg" id="bgvid" playsinline autoplay muted loop>
            <source src="vid/BGvid.webm" type="video/webm">
            <source src="vid/BGvid.mp4" type="video/mp4">
        </video>
    </div>
    <div class="hero-body">
        <div class="container">
            // Text content goes here (h1 and call to action etc...)
        </div>
    </div>
    <div class="hero-foot">
        <div class="has-text-centered">
            // Scroll down arrow here?
        </div>
    </div>
</section>

JorgenSolli on 30 Dec 2016

👍14 ❤6

All 10 comments

I would love a bit more resources around this issue as well.

Currently working with Bulma for a project. Having trouble implementing a full screen hero-video on mobile. Anything in the roadmap as far as documentation?

jocures on 29 Dec 2016

This worked fine for me :)

<section class="hero is-fullheight video">
    <div class="hero-video">
        <video poster="img/bgimg.jpg" id="bgvid" playsinline autoplay muted loop>
            <source src="vid/BGvid.webm" type="video/webm">
            <source src="vid/BGvid.mp4" type="video/mp4">
        </video>
    </div>
    <div class="hero-body">
        <div class="container">
            // Text content goes here (h1 and call to action etc...)
        </div>
    </div>
    <div class="hero-foot">
        <div class="has-text-centered">
            // Scroll down arrow here?
        </div>
    </div>
</section>

JorgenSolli on 30 Dec 2016

👍14 ❤6

is this work for Youtube?

infacq on 14 Apr 2017

I notice when you make the window smaller, then the video shrinks and maintains the same ratio creating padding between the header and the video. Is there a method native to bulma for fixing this?

dagumak on 22 Jun 2018

👍3

I notice when you make the window smaller, then the video shrinks and maintains the same ratio creating padding between the header and the video. Is there a method native to bulma for fixing this?

I'd also like to know this not much information about keeping it locked to the top simular to how bootstrap and foundation do it

northcreativedesign on 21 Nov 2018

Anyone solve @dagumak padding issue?

Ok, I think I solve this.

.hero-video video shouldn't be placed as position absolute. Transforms also are unnecessary. I added object-fit: cover and video seems to fit as it should.

.hero-video video { position: relative; left: auto; top: auto; transform: none; object-fit: cover; }

RichForever on 6 Mar 2019

👍2

Anyone solve @dagumak padding issue?

Ok, I think I solve this.

.hero-video video shouldn't be placed as position absolute. Transforms also are unnecessary. I added object-fit: cover and video seems to fit as it should.

.hero-video video { position: relative; left: auto; top: auto; transform: none; object-fit: cover; }

I used object-fit: cover;

dagumak on 8 Mar 2019

👍2

Currently working with Bulma for a project. Having trouble implementing a full screen hero-video on mobile. Anything in the roadmap as far as documentation?

hi @jocures did you made the video works on mobile?