Support

Account

Home Forums Front-end Issues showing video on header

Unread

showing video on header

    • Giubyx

    • July 14, 2021 at 11:47 am

    deal all,
    i have some trouble to show video in my header.
    i have the below situation and i want to show video as alternative to image always with @if(!empty…) parameter

    i have already created hero section video (oembed) before “image” in Hero group of Acf, image/images work but i try every codes to show video but nothing…

    —————————————————————————-

    <div class=”page-header big-hero @if(empty($is_block)) first-header @endif @if(empty($is_block) && empty($hero[‘image’])) first-header-no-image @endif @if(!empty($hero[‘image’])) has-image @endif @if(!empty($hero[‘image’]) && empty($has_bg)) theme_black @else theme_white @endif section”>

    @if(!empty($hero[‘image’]))
    <div class=”banner-image-wrapper”>
    @if(!empty($hero[‘other_images’]))

    @php
    $element_classes = “swiper-slide px-0″;
    @endphp
    <div class=”swiper-container swiper-container-full-width mb-8”>
    <div class=”swiper-wrapper “>
    <div class=”{!! $element_classes !!}”>
    @pic($hero[‘image’],[‘class’ => ‘ banner-image ‘])
    </div>
    @foreach($hero[‘other_images’] as $k => $v)
    <div class=”{!! $element_classes !!}”>
    @pic($v,[‘class’ => ‘ banner-image ‘])
    </div>
    @endforeach

    </div>
    <div class=”swiper-pagination”></div>
    <div class=”swiper-button-prev”></div>
    <div class=”swiper-button-next”></div>
    </div>

    @else
    @pic($hero[‘image’],[‘class’ => ‘ banner-image ‘])
    @endif
    </div>

    @else
    <div class=”banner-image-wrapper”>
    @pic(get_field(‘default_hero_image’,’options’),[‘class’ => ‘ banner-image ‘])
    </div>
    @endif

    {{–
    <div class=”logo-bg-wrapper”>
    @svg(‘logo-bg’, [‘class’ => ‘logo-bg’])
    </div>
    –}}
    <div class=”page-header__content row d-flex flex-md-columns align-items-center”>

    <div @if(!empty($has_bg))data-aos=”fade-up”@endif class=”@if(!empty($has_bg)) col-md-8 offset-md-2 bg-white-80 pb-5 my-5 pt-10 px-5 @else col-md-10 offset-md-1 @if(empty($hero[‘image’])) py-10 @elseif(is_front_page()) pt-15 pb-22 pb-md-17 @else py-15 @endif @endif order-md-1 flex-column d-flex justify-content-center text-center”>
    <div class=”page-header__contentInner”>
    @if(!empty($hero) && !empty($hero[‘content’]) && !empty($hero[‘content’][‘kicker’]))
    <div class=”@if(empty($is_block)) h5 @else h6 @endif mb-2″>
    {!! $hero[‘content’][‘kicker’] !!}
    </div>
    @endif
    @if((!empty($hero) && !empty($hero[‘content’]) && !empty($hero[‘content’][‘title’])) || empty($is_block))
    <h2 @if(empty($has_bg))data-aos=”fade-up”@endif class=”heading @if(empty($is_block)) h1 mb-3 @else h3 mb-2 @endif”>
    @if(!empty($hero) && !empty($hero[‘content’]) && !empty($hero[‘content’][‘title’]))
    {!! $hero[‘content’][‘title’] !!}
    @elseif(empty($is_block))
    {!! App::title() !!}
    @endif

    </h2>
    @endif
    @if(!empty($hero) && !empty($hero[‘content’]) && !empty($hero[‘content’][‘subtitle’]))
    <div class=”h6 mb-2″>
    {!! $hero[‘content’][‘subtitle’] !!}
    </div>
    @endif
    @if(!empty($hero) && !empty($hero[‘content’]) && !empty($hero[‘content’][‘link’]))
    <div class=”mt-5″>

    <div class=”d-flex justify-content-between align-items-center padding-y-xsmall “>
    <span class=”mr-2”>{!! $hero[‘content’][‘link’][‘title’] !!}</span>
    @svg(‘icon-arrow-right’,’d-inline mt-xxs’)
    </div>


    </div>
    @endif
    @if(!empty($has_social))
    <div class=” d-flex flex-row justify-content-center mb-3 mt-5″>
    @include(‘partials.social-icons’,[‘has_subtitles’ => true])
    </div>
    @endif
    </div>
    </div>

    </div>

    </div>

    {{–
    @php
    $hero = get_field(‘hero’);
    if(is_post_type_archive(‘products’)){
    $hero = get_field(‘products_hero’,’options’);
    }
    @endphp
    <div class=”page-header @if(get_page_template_slug() != ‘views/page-book-a-demo.blade.php’) theme_brown @else theme_white @endif section”>
    <div class=”row d-flex flex-md-columns align-items-center pt-7 pt-md-4 {!! $hero[‘has_padding_bottom’] ? ‘pb-7’ : ” !!}”>
    <div class=”col-md-5 pb-8″>
    <h2 data-aos=”fade-up” class=”heading mb-5 font-weight-semibold @if(is_front_page()) h1 @endif”>
    @if(!empty($hero) && !empty($hero[‘content’]) && !empty($hero[‘content’][‘title’]))
    {!! $hero[‘content’][‘title’] !!}
    @else
    {!! App::title() !!}
    @endif
    </h2>
    @if(!empty($hero) && !empty($hero[‘content’]) && !empty($hero[‘content’][‘subtitle’]))
    <div class=”@if(is_front_page() || is_post_type_archive(‘products’)) h3 font-weight-semibold @else h4 font-weight-normal @endif”>
    {!! $hero[‘content’][‘subtitle’] !!}
    </div>
    @endif
    </div>
    @if(!empty($hero[‘image’]))
    <div class=”col-md-6 offset-md-1 mb-md-0″>
    @if(!empty($hero[‘animation’]))
    @include(‘components.svgAnimation’, $hero)
    @else
    @pic($hero[‘image’],[‘class’ => ‘w-100 column-image ‘])
    @endif
    </div>
    @endif
    </div>

    </div>
    –}}

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.