WP + ACF hero section with background select -img -video file -youtube -vimeo

WP + ACF hero section with background select -img -video file -youtube -vimeo

PHP
===

<!-- section-hero -->
<?php
$select_value = get_field('hero_section_background_setting');
$opacity = get_field('hero_section_shadow_gradient_opacity');
if($opacity < 0 || $opacity == NULL) {
    $opacity = 0.75;
}
if($opacity > 1) {
    $opacity = 1;
} ?>

<?php if( $select_value == 'Image' ): ?>
    <section class="section-hero" style="background-image: url(<?php the_field('hero_section_background_image'); ?>)">
        <div class="section-hero__decoration-start" style="opacity: <?php echo $opacity; ?>"></div>
        <div class="section-hero__decoration-end" style="opacity: <?php echo $opacity; ?>"></div>

        <div class="hero-content">
            <div class="hero-content__info hero-content__info-left">
                <?php the_field('hero_section_left_text'); ?>

                <?php
                $social = get_field('hero_section_add_socials');
                if($social) : ?>
                    <div class="social-nav_hero">
                        <?php get_template_part('template-parts/sections/template-elements/social'); ?>
                    </div>
                <?php endif; ?>
            </div>

            <div class="hero-content__info hero-content__info-right">
                <?php the_field('hero_section_right_text'); ?>
            </div>
        </div>
    </section>

<?php elseif( $select_value == 'Video' ) : ?>
    <section class="section-hero">
        <div class="section-hero__decoration-start" style="opacity: <?php echo $opacity; ?>"></div>
        <div class="section-hero__decoration-end" style="opacity: <?php echo $opacity; ?>"></div>

        <video class="video-background video-background__file" id="video-download" autoplay loop muted playsinline>
            <?php
            $mp4 = get_field('hero_section_background_video_file_mp4');
            if($mp4) : ?>
                <source src="<?php echo $mp4; ?>" type="video/mp4" class="video-file">
            <?php endif; ?>

            <?php
            $webm = get_field('hero_section_background_video_file_mp4');
            if($webm) : ?>
                <source src="<?php echo $webm; ?>" type="video/mp4" class="video-file">
            <?php endif; ?>
        </video>

        <div class="hero-content">
            <div class="hero-content__info hero-content__info-left">
                <?php the_field('hero_section_left_text'); ?>

                <?php
                $social = get_field('hero_section_add_socials');
                if($social) : ?>
                    <div class="social-nav_hero">
                        <?php get_template_part('template-parts/sections/template-elements/social'); ?>
                    </div>
                <?php endif; ?>
            </div>

            <div class="hero-content__info hero-content__info-right">
                <?php the_field('hero_section_right_text'); ?>
            </div>
        </div>
    </section>

<?php elseif( $select_value == 'Youtube_link' ) : ?>
    <section class="section-hero">
        <div class="section-hero__decoration-start" style="opacity: <?php echo $opacity; ?>"></div>
        <div class="section-hero__decoration-end" style="opacity: <?php echo $opacity; ?>"></div>

        <div class="video-background">
            <div class="video-foreground">
                <?php
                $url = get_field('hero_section_background_youtube_video_link');
                $list_id = array_pop(explode('/', $url));
                $autoplay = '?autoplay=1';
                $controls = '&controls=0';
                $loop = '&loop=1';
                $rel = '&rel=0';
                $mute = '&mute=1';
                $playlist = '&playlist='.$list_id.'';
                $src = $url . $autoplay . $controls . $loop . $rel . $mute . $playlist; ?>

                <?php if($url) : ?>
                    <iframe src="<?php echo $src; ?>" frameborder="0" allow="accelerometer; autoplay; loop; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                <?php endif; ?>
            </div>
        </div>

        <div class="hero-content">
            <div class="hero-content__info hero-content__info-left">
                <?php the_field('hero_section_left_text'); ?>

                <?php
                $social = get_field('hero_section_add_socials');
                if($social) : ?>
                    <div class="social-nav_hero">
                        <?php get_template_part('template-parts/sections/template-elements/social'); ?>
                    </div>
                <?php endif; ?>
            </div>

            <div class="hero-content__info hero-content__info-right">
                <?php the_field('hero_section_right_text'); ?>
            </div>
        </div>
    </section>

<?php elseif( $select_value == 'Vimeo_link' ) : ?>
    <section class="section-hero">
        <div class="section-hero__decoration-start" style="opacity: <?php echo $opacity; ?>"></div>
        <div class="section-hero__decoration-end" style="opacity: <?php echo $opacity; ?>"></div>

        <div class="video-background">
            <div class="video-foreground">
                <?php
                $url = get_field('hero_section_background_vimeo_video_link');
                $autoplay = '?autoplay=1';
                $controls = '&controls=0';
                $loop = '&loop=1';
                $mute = '&muted=1';
                $playlist = '&playsinline=1';
                $autopause = '&autopause=0';
                $src = $url . $autoplay . $controls . $loop . $mute . $playlist . $autopause; ?>

                <?php if($url) : ?>
                    <iframe src="<?php echo $src; ?>" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
                <?php endif; ?>
            </div>
        </div>

        <div class="hero-content">
            <div class="hero-content__info hero-content__info-left">
                <?php the_field('hero_section_left_text'); ?>

                <?php
                $social = get_field('hero_section_add_socials');
                if($social) : ?>
                    <div class="social-nav_hero">
                        <?php get_template_part('template-parts/sections/template-elements/social'); ?>
                    </div>
                <?php endif; ?>
            </div>

            <div class="hero-content__info hero-content__info-right">
                <?php the_field('hero_section_right_text'); ?>
            </div>
        </div>
    </section>
<?php endif; ?>



STYLES
======

//section-hero
.section-hero {
    width: 100%;
    height: 100vh;
    min-height: 660px;
    max-height: 1000px;
    position: relative;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    overflow: hidden;

    &_archive {
        min-height: 500px;
        height: auto;

        .hero-content {
            padding: 40px 15px;
        }

        .hero-content__info {
            h1, h2, h3, h4, h5, h6 {
                font-weight: 300;
                font-size: 48px;
                line-height: 57px;
                text-transform: capitalize;
                margin-bottom: 10px;
            }
        }
    }

    .section-hero__decoration-start {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .001) 69.66%);
        mix-blend-mode: normal;
        opacity: .75;
        z-index: 2;
        left: 0;
        top: 0;
        pointer-events: none;
    }

    .section-hero__decoration-end {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .001) 29.9%);
        mix-blend-mode: normal;
        opacity: .75;
        transform: rotate(-180deg);
        z-index: 2;
        left: 0;
        top: 0;
        pointer-events: none;
    }

    .archive-hero__decoration {
        width: 100%;
        height: 100%;
        background-color: $black;
        mix-blend-mode: normal;
        position: absolute;
        opacity: .5;
        z-index: 2;
        left: 0;
        top: 0;
    }
}

.hero-content {
    @extend .page-container;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    color: $white;
    padding: 60px 15px;
    z-index: 3;
}

.hero-content__info-left {
    max-width: 420px;
    min-height: 170px;
    width: 100%;
    border-right: 1px solid rgb(110, 108, 108);
    padding: 30px 50px 0 0;
}

.hero-content__info-right {
    max-width: 550px;
    width: 100%;
    padding: 20px 0 0 25px;
}

.hero-content__info {
    h1, h2, h3, h4, h5, h6 {
        font-size: 30px;
        font-weight: 300;
        text-transform: capitalize;
        line-height: 35px;
        margin-bottom: 22px;
    }

    p, span:not(.social-nav__item-icon), ul:not(.social-nav), ol, li:not(.social-nav__item):not(.social-nav__item *) {
        font-size: 15px;
        line-height: 28px;
        letter-spacing: .53px;
        margin-bottom: 15px;
    }

    *:last-child {
        margin-bottom: 0;
    }

    .social-nav__item-icon {
        display: block;
        font-size: 20px;
        color: #808080;
        transition: $transition;

        &:hover {
            color: $white;
        }
    }

    a:not(.social-link) {
        color: $theme;
        position: relative;
        @extend .link;
    }

    .hero-section__decorated-text {
        color: $theme;
        font-weight: bold;
        font-size: 13px;
        line-height: 28px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }
}

/* background video styles */
.video-background {
    background: #000;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.video-foreground,
.video-background iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
#vidtop-content {
    top: 0;
    color: #fff;
}
.vid-info {
    position: absolute;
    top: 0;
    right: 0;
    width: 33%;
    background: rgba(0,0,0,.3);
    color: #fff;
    padding: 1rem;
    font-family: Avenir, Helvetica, sans-serif;
}
.vid-info h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-top: 0;
    line-height: 1.2;
}
.vid-info a {
    display: block;
    color: #fff;
    text-decoration: none;
    background: rgba(0,0,0,.5);
    transition: .6s background;
    border-bottom: none;
    margin: 1rem auto;
    text-align: center;
}
@media (min-aspect-ratio: 16/9) {
    .video-foreground {
        height: 300%;
        top: -100%;
    }
}
@media (max-aspect-ratio: 16/9) {
    .video-foreground {
        width: 300%;
        left: -100%;
    }
}
@media all and (max-width: 600px) {
    .vid-info {
        width: 50%;
        padding: .5rem;
    }
    .vid-info h1 {
        margin-bottom: .2rem;
    }
}
@media all and (max-width: 500px) {
    .vid-info .acronym {
        display: none;
    }
}

.video-background__file {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

*::-ms-backdrop, .video-background__file {
    height: auto;
} /* IE11 */

.video-file {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
}