Show ACF custom field in elementor

Some time such requirement created for elementor so that we have to use ACF custom field in the elementor builder .
For such type of issue we can solve by making shortcode for acf and use in elementor.

Like i want to use acf video url field to show vimeo video in elementor.

<?php
add_shortcode( 'vimeo_video_to_elementor', 'add_vimeo_video_to_elementor' );
function add_vimeo_video_to_elementor(){
	$content = get_field('lesson_video');
	$content = str_replace('https://vimeo.com/','',$content);
	$data = explode('/',$content );
	if ( is_array( $data ) && array_key_exists( 0, $data ) ) {
		$content = $data[0];	   
		ob_start()
		?>
		<div class="entry-content wp-block-post-content">
			<div data-elementor-type="wp-post" data-elementor-id="<?php echo esc_attr( get_the_ID() ); ?>" class="elementor elementor-<?php echo esc_attr( get_the_ID() ); ?>" data-elementor-settings="[]">
				<div class="elementor-inner">
					<div class="elementor-section-wrap">
						<section class="elementor-section elementor-top-section elementor-element elementor-element-0306acf elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="0306acf" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
							<div class="elementor-row">
								<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-accfb8a" data-id="accfb8a" data-element_type="column">
									<div class="elementor-column-wrap elementor-element-populated">
									<div class="elementor-widget-wrap">
										<div class="elementor-element elementor-element-a9569e0 elementor-aspect-ratio-169 elementor-widget elementor-widget-video" data-id="a9569e0" data-element_type="widget" data-settings="{&quot;video_type&quot;:&quot;vimeo&quot;,&quot;aspect_ratio&quot;:&quot;169&quot;}" data-widget_type="video.default">
											<div class="elementor-widget-container">
												<div class="elementor-wrapper elementor-fit-aspect-ratio elementor-open-inline">
												<iframe class="elementor-video-iframe" allowfullscreen="" title="vimeo Video Player" src="https://player.vimeo.com/video/<?php echo  rawurlencode( $content ); ?>?color&amp;autopause=0&amp;loop=0&amp;muted=0&amp;title=1&amp;portrait=1&amp;byline=1#t="></iframe>		
												</div>
											</div>
										</div>
									</div>
									</div>
								</div>
							</div>
						</div>
						</section>
					</div>
				</div>
			</div>
		</div>
		<?php 
			$vimeo_irame = ob_get_clean();
			return $vimeo_irame;
	}
} 

Leave a Comment

Your email address will not be published.