Support

Account

Home Forums Front-end Issues showing video on header

Solving

showing video on header

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

  • 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
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.