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">
          <a href="{!! $hero['content']['link']['url'] !!}" target="{!! $hero['content']['link']['url'] !!}" rel="noopener">
            <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>
            
          </a>
        </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>
--}}

• Giubyx

• September 14, 2021 at 11:42 am

Dear All,
i need a big help, please.
i have try everything but nothing.

how i can insert a video display in this code? I have created in Hero field a ombed sub-field

	@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
	

thank you in advance

• Giubyx

• September 15, 2021 at 10:44 am

maybe in this view is better to read the code. Thank you

i have created in ACF a Hero field a sub field called oEmbed so i have this structure:

Hero
– content
– oEmbed
– image
– other images

and the code below show only image but i need to insert also a video.

@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