easy-elements / widgets / video / video.php

video.php in Easy Elements for Elementor – Addons & Website Templates 1.2.1, at widgets/video/video.php

721 lines 22.2 KB

Raw Download Zip

1	<?php
2	use Elementor\Controls_Manager;
3	use Elementor\Utils;
4	use Elementor\Widget_Base;
5	use \Elementor\Group_Control_Border;
6
7	if ( ! defined( 'ABSPATH' ) ) {
8	exit;
9	}
10
11	class Easyel_Video_Popup_Widget extends \Elementor\Widget_Base {
12
13	public function get_style_depends() {
14	$handle = 'eel-video-popup-style';
15	$css_path = plugin_dir_path( __FILE__ ) . 'css/video.min.css';
16
17	if ( ! wp_style_is( $handle, 'registered' ) && file_exists( $css_path ) ) {
18	wp_register_style( $handle, plugins_url( 'css/video.min.css', __FILE__ ), [], defined( 'WP_DEBUG' ) && WP_DEBUG ? filemtime( $css_path ) : EASYELEMENTS_VER );
19	}
20	return [ $handle ];
21	}
22
23	public function get_name() {
24	return 'eel-video-popup';
25	}
26
27	public function get_title() {
28	return __( 'Video Popup', 'easy-elements' );
29	}
30
31	public function get_icon() {
32	return 'easyicon easyelIcon-video';
33	}
34
35	public function get_categories() {
36	return [ 'easyelements_category' ];
37	}
38
39	public function get_keywords() {
40	return [ 'video', 'popup', 'link', 'click' ];
41	}
42	protected function register_controls() {
43	$this->start_controls_section(
44	'section_video',
45	[
46	'label' => __( 'Video Popup Settings', 'easy-elements' ),
47	]
48	);
49
50	$this->add_control(
51	'display_type',
52	[
53	'label' => __( 'Display Type', 'easy-elements' ),
54	'type' => Controls_Manager::SELECT,
55	'default' => 'normal',
56	'options' => [
57	'normal' => __( 'Normal Only', 'easy-elements' ),
58	'popup' => __( 'Popup Only', 'easy-elements' ),
59	],
60	]
61	);
62
63	$this->add_control(
64	'video_type',
65	[
66	'label' => __( 'Video Type', 'easy-elements' ),
67	'type' => Controls_Manager::SELECT,
68	'default' => 'youtube',
69	'options' => [
70	'youtube' => __( 'YouTube', 'easy-elements' ),
71	'vimeo' => __( 'Vimeo', 'easy-elements' ),
72	'self_hosted'=> __( 'Self Hosted', 'easy-elements' ),
73	],
74	]
75	);
76
77	$this->add_control(
78	'video_url',
79	[
80	'label' => __( 'Video URL', 'easy-elements' ),
81	'type' => Controls_Manager::TEXT,
82	'default' => 'https://www.youtube.com/watch?v=hDABYoas7SY',
83	'placeholder' => __( 'https://www.youtube.com/watch?v=hDABYoas7SY', 'easy-elements' ),
84	'condition' => [
85	'video_type!' => 'self_hosted',
86	],
87	]
88	);
89
90	$this->add_control(
91	'self_hosted_video',
92	[
93	'label' => __( 'Self Hosted Video', 'easy-elements' ),
94	'type' => Controls_Manager::MEDIA,
95	'media_type' => 'video',
96	'condition' => [
97	'video_type' => 'self_hosted',
98	],
99	]
100	);
101
102	$this->add_control(
103	'self_hosted_autoplay',
104	[
105	'label' => __( 'Autoplay', 'easy-elements' ),
106	'type' => Controls_Manager::SWITCHER,
107	'label_on' => __( 'Yes', 'easy-elements' ),
108	'label_off' => __( 'No', 'easy-elements' ),
109	'return_value' => 'yes',
110	'default' => '',
111	'condition' => [
112	'display_type' => 'normal',
113	'video_type' => 'self_hosted',
114	],
115	]
116	);
117
118	$this->add_control(
119	'self_hosted_loop',
120	[
121	'label' => __( 'Loop', 'easy-elements' ),
122	'type' => Controls_Manager::SWITCHER,
123	'label_on' => __( 'Yes', 'easy-elements' ),
124	'label_off' => __( 'No', 'easy-elements' ),
125	'return_value' => 'yes',
126	'default' => '',
127	'condition' => [
128	'display_type' => 'normal',
129	'video_type' => 'self_hosted',
130	],
131	]
132	);
133
134	$this->add_control(
135	'self_hosted_muted',
136	[
137	'label' => __( 'Muted', 'easy-elements' ),
138	'type' => Controls_Manager::SWITCHER,
139	'label_on' => __( 'Yes', 'easy-elements' ),
140	'label_off' => __( 'No', 'easy-elements' ),
141	'return_value' => 'yes',
142	'default' => '',
143	'condition' => [
144	'display_type' => 'normal',
145	'video_type' => 'self_hosted',
146	],
147	]
148	);
149
150	$this->add_control(
151	'self_hosted_controls',
152	[
153	'label' => __( 'Show Controls', 'easy-elements' ),
154	'type' => Controls_Manager::SWITCHER,
155	'label_on' => __( 'Yes', 'easy-elements' ),
156	'label_off' => __( 'No', 'easy-elements' ),
157	'return_value' => 'yes',
158	'default' => 'yes',
159	'condition' => [
160	'display_type' => 'normal',
161	'video_type' => 'self_hosted',
162	],
163	]
164	);
165
166
167	$this->add_control(
168	'video_height',
169	[
170	'label' => __( 'Video Height', 'easy-elements' ),
171	'type' => \Elementor\Controls_Manager::SLIDER,
172	'size_units' => [ 'px', 'vh' ],
173	'range' => [
174	'px' => [
175	'min' => 100,
176	'max' => 1000,
177	],
178	'vh' => [
179	'min' => 10,
180	'max' => 100,
181	],
182	],
183	'default' => [
184	'size' => 400,
185	'unit' => 'px',
186	],
187	'selectors' => [
188	'{{WRAPPER}} .eel-video-popup-wrapper iframe' => 'height: {{SIZE}}{{UNIT}};',
189	'{{WRAPPER}} .eel-video-popup-wrapper video' => 'height: {{SIZE}}{{UNIT}};',
190	],
191	'condition' => [
192	'display_type' => 'normal',
193	],
194	]
195	);
196
197
198	$this->add_control(
199	'popup_trigger_text',
200	[
201	'label' => __( 'Trigger Text', 'easy-elements' ),
202	'type' => Controls_Manager::TEXT,
203	'default' => __( 'Play Video', 'easy-elements' ),
204	'condition' => [
205	'display_type' => 'popup',
206	],
207	]
208	);
209
210	$this->add_responsive_control(
211	'popup_icon_spacing',
212	[
213	'label' => __( 'Text Spacing', 'easy-elements' ),
214	'type' => \Elementor\Controls_Manager::SLIDER,
215	'range' => [
216	'px' => [
217	'min' => 0,
218	'max' => 100,
219	],
220	],
221	'selectors' => [
222	'{{WRAPPER}} .eel-video-popup-btn .eel-icon-wrap + .eel-trigger-text' => 'margin-left: {{SIZE}}{{UNIT}};',
223	'{{WRAPPER}} .eel-video-popup-btn .eel-trigger-text + .eel-icon-wrap' => 'margin-left: {{SIZE}}{{UNIT}};',
224	],
225	'condition' => [
226	'display_type' => 'popup',
227	],
228	]
229	);
230
231
232	$this->add_control(
233	'popup_text_color',
234	[
235	'label' => __( 'Text Color', 'easy-elements' ),
236	'type' => Controls_Manager::COLOR,
237	'selectors' => [
238	'{{WRAPPER}} .eel-video-popup-btn .eel-trigger-text' => 'color: {{VALUE}};',
239	],
240	'condition' => [
241	'display_type' => 'popup',
242	],
243	]
244	);
245
246	$this->add_group_control(
247	\Elementor\Group_Control_Typography::get_type(),
248	[
249	'name' => 'popup_text_typography',
250	'label' => __( 'Typography', 'easy-elements' ),
251	'selector' => '{{WRAPPER}} .eel-video-popup-btn .eel-trigger-text',
252	'condition' => [
253	'display_type' => 'popup',
254	],
255	]
256	);
257
258	$this->add_control(
259	'popup_icon_show',
260	[
261	'label' => __( 'Show Icon', 'easy-elements' ),
262	'type' => \Elementor\Controls_Manager::SWITCHER,
263	'label_on' => __( 'Yes', 'easy-elements' ),
264	'label_off' => __( 'No', 'easy-elements' ),
265	'return_value' => 'yes',
266	'default' => 'yes',
267	'condition' => [
268	'display_type' => 'popup',
269	],
270	]
271	);
272
273	$this->add_control(
274	'popup_icon_hover_show',
275	[
276	'label' => __( 'Default Hide & Hover Show', 'easy-elements' ),
277	'type' => \Elementor\Controls_Manager::SWITCHER,
278	'label_on' => __( 'Yes', 'easy-elements' ),
279	'label_off' => __( 'No', 'easy-elements' ),
280	'return_value' => 'yes',
281	'default' => 'no',
282	'condition' => [
283	'display_type' => 'popup',
284	'popup_icon_show' => 'yes'
285	],
286	]
287	);
288
289	$this->add_control(
290	'popup_trigger_icon',
291	[
292	'label' => __( 'Icon', 'easy-elements' ),
293	'type' => Controls_Manager::ICONS,
294	'default' => [
295	'value' => '',
296	'library' => 'fa-solid',
297	],
298	'condition' => [
299	'display_type' => 'popup',
300	'popup_icon_show' => 'yes',
301	],
302	]
303	);
304
305	$this->add_control(
306	'popup_icon_position',
307	[
308	'label' => __( 'Icon Position', 'easy-elements' ),
309	'type' => Controls_Manager::SELECT,
310	'default' => 'before',
311	'options' => [
312	'before' => __( 'Before Text', 'easy-elements' ),
313	'after' => __( 'After Text', 'easy-elements' ),
314	],
315	'condition' => [
316	'display_type' => 'popup',
317	'popup_icon_show' => 'yes',
318	],
319	]
320	);
321
322
323	$this->add_control(
324	'popup_icon_color',
325	[
326	'label' => __( 'Icon Color', 'easy-elements' ),
327	'type' => Controls_Manager::COLOR,
328	'selectors' => [
329	'{{WRAPPER}} .eel-video-popup-btn i' => 'color: {{VALUE}};',
330	'{{WRAPPER}} .eel-video-popup-btn svg' => 'fill: {{VALUE}};',
331	'{{WRAPPER}} .eel-video-popup-btn svg path' => 'fill: {{VALUE}};',
332
333	],
334	'condition' => [
335	'display_type' => 'popup',
336	'popup_icon_show' => 'yes',
337	],
338	]
339	);
340
341
342	$this->add_responsive_control(
343	'icon_size',
344	[
345	'label' => __( 'Icon Size', 'easy-elements' ),
346	'type' => Controls_Manager::SLIDER,
347	'range' => [
348	'px' => [
349	'min' => 8,
350	'max' => 100,
351	],
352	],
353	'default' => [
354	'size' => 20,
355	'unit' => 'px',
356	],
357	'selectors' => [
358	'{{WRAPPER}} .eel-video-popup-btn i' => 'font-size: {{SIZE}}{{UNIT}};',
359	'{{WRAPPER}} .eel-video-popup-btn svg' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
360	'{{WRAPPER}} .eel-video-popup-btn svg path' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
361	],
362	'condition' => [
363	'display_type' => 'popup',
364	'popup_icon_show' => 'yes',
365	],
366	]
367	);
368
369	$this->add_control(
370	'icon_bg_color',
371	[
372	'label' => __( 'Circle Background Color', 'easy-elements' ),
373	'type' => Controls_Manager::COLOR,
374	'selectors' => [
375	'{{WRAPPER}} .eel-video-popup-btn .eel-icon-wrap' => 'background-color: {{VALUE}};',
376	],
377	'condition' => [
378	'display_type' => 'popup',
379	'popup_icon_show' => 'yes',
380	],
381	]
382	);
383
384	$this->add_responsive_control(
385	'circle_size',
386	[
387	'label' => __( 'Circle Size', 'easy-elements' ),
388	'type' => Controls_Manager::SLIDER,
389	'range' => [
390	'px' => [ 'min' => 10, 'max' => 200 ],
391	],
392	'selectors' => [
393	'{{WRAPPER}} .eel-video-popup-btn .eel-icon-wrap' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}; place-content: center;',
394	],
395	'condition' => [
396	'display_type' => 'popup',
397	'popup_icon_show' => 'yes',
398	],
399	]
400	);
401
402	$this->add_responsive_control(
403	'icon_border_radius',
404	[
405	'label' => __( 'Circle Border Radius', 'easy-elements' ),
406	'type' => \Elementor\Controls_Manager::DIMENSIONS,
407	'size_units' => [ 'px', '%' ],
408	'selectors' => [
409	'{{WRAPPER}} .eel-video-popup-btn .eel-icon-wrap, {{WRAPPER}} .eel-icon-wrap .eel-overlay-play' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
410	],
411	'condition' => [
412	'display_type' => 'popup',
413	'popup_icon_show' => 'yes',
414	],
415	]
416	);
417
418	$this->add_group_control(
419	\Elementor\Group_Control_Box_Shadow::get_type(),
420	[
421	'name' => 'circle_shadow',
422	'label' => __( 'Circle Shadow', 'easy-elements' ),
423	'selector' => '{{WRAPPER}} .eel-video-popup-btn .eel-icon-wrap',
424	'condition' => [
425	'display_type' => 'popup',
426	'popup_icon_show' => 'yes',
427	],
428	]
429	);
430
431
432	$this->add_group_control(
433	Group_Control_Border::get_type(),
434	[
435	'name' => 'button_border',
436	'label' => __( 'Button Border', 'easy-elements' ),
437	'selector' => '{{WRAPPER}} .eel-video-popup-btn .eel-icon-wrap',
438	'condition' => [
439	'display_type' => 'popup',
440	'popup_icon_show' => 'yes',
441	],
442	]
443	);
444
445	$this->add_control(
446	'circle_glow',
447	[
448	'label' => __( 'Active Ripple', 'easy-elements' ),
449	'type' => \Elementor\Controls_Manager::SWITCHER,
450	'label_on' => __( 'On', 'easy-elements' ),
451	'label_off' => __( 'Off', 'easy-elements' ),
452	'return_value' => 'yes',
453	'default' => '',
454	'condition' => [
455	'display_type' => 'popup',
456	'popup_icon_show' => 'yes',
457	],
458	]
459	);
460
461	$this->add_control(
462	'glow_color',
463	[
464	'label' => __( 'Ripple Color', 'easy-elements' ),
465	'type' => Controls_Manager::COLOR,
466	'default' => 'rgba(102, 102, 102, 0.1)',
467	'selectors' => [
468	'{{WRAPPER}} .eel-video-popup-btn.eel-glow-active .eel-icon-wrap' => '--glow-color: {{VALUE}};',
469	],
470	'condition' => [
471	'display_type' => 'popup',
472	'circle_glow' => 'yes',
473	],
474	]
475	);
476
477	$this->add_group_control(
478	\Elementor\Group_Control_Background::get_type(),
479	[
480	'name' => 'wrap_background',
481	'types' => [ 'classic', 'gradient' ],
482	'selector' => '{{WRAPPER}} .eel-video-popup-wrapper',
483	'condition' => [
484	'display_type' => 'popup',
485	],
486	]
487	);
488
489	$this->add_responsive_control(
490	'wrap_radius',
491	[
492	'label' => __( 'Border Radius', 'easy-elements' ),
493	'type' => \Elementor\Controls_Manager::DIMENSIONS,
494	'size_units' => [ 'px', '%' ],
495	'selectors' => [
496	'{{WRAPPER}} .eel-video-popup-wrapper' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
497	],
498	'condition' => [
499	'display_type' => 'popup',
500	],
501	]
502	);
503
504	$this->add_responsive_control(
505	'wrap_padding',
506	[
507	'label' => __( 'Padding', 'easy-elements' ),
508	'type' => \Elementor\Controls_Manager::DIMENSIONS,
509	'size_units' => [ 'px', '%' ],
510	'selectors' => [
511	'{{WRAPPER}} .eel-video-popup-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
512	],
513	'condition' => [
514	'display_type' => 'popup',
515	],
516	]
517	);
518	$this->end_controls_section();
519
520	$this->start_controls_section(
521	'section_video_popup_overlay_settings',
522	[
523	'label' => __( 'Play Overlay Settings', 'easy-elements' ),
524	'condition' => [
525	'display_type' => 'popup',
526	],
527	]
528	);
529
530	$this->add_control(
531	'popup_play_overlay',
532	[
533	'label' => __( 'Play Overlay', 'easy-elements' ),
534	'type' => Controls_Manager::TEXT,
535	'default' => __( 'Play', 'easy-elements' ),
536	]
537	);
538
539	$this->add_control(
540	'popup_play_color',
541	[
542	'label' => esc_html__('Text Color', 'easy-elements'),
543	'type' => \Elementor\Controls_Manager::COLOR,
544	'selectors' => [
545	'{{WRAPPER}} .eel-icon-wrap .eel-overlay-play' => 'color: {{VALUE}};',
546	],
547	]
548	);
549	$this->add_group_control(
550	\Elementor\Group_Control_Typography::get_type(),
551	[
552	'name' => 'popup_play__typography',
553	'selector' => '{{WRAPPER}} .eel-icon-wrap .eel-overlay-play',
554	]
555	);
556
557	$this->add_group_control(
558	\Elementor\Group_Control_Background::get_type(),
559	[
560	'name' => 'background_overly_play',
561	'types' => [ 'classic', 'gradient' ],
562	'selector' => '{{WRAPPER}} .eel-icon-wrap .eel-overlay-play',
563	]
564	);
565
566	$this->end_controls_section();
567	}
568
569	private function get_youtube_id( $url ) {
570	preg_match('/(?:v=\|\/)([0-9A-Za-z_-]{11}).*/', $url, $matches);
571	return $matches[1] ?? '';
572	}
573
574	private function get_vimeo_id( $url ) {
575	preg_match('/(\d+)/', $url, $matches);
576	return $matches[1] ?? '';
577	}
578
579	protected function render() {
580	$settings = $this->get_settings_for_display();
581	$video_url = '';
582	$embed_type = $settings['video_type'];
583	$display_type = $settings['display_type'];
584
585	if ( $embed_type === 'self_hosted' && ! empty( $settings['self_hosted_video']['url'] ) ) {
586	$video_url = esc_url( $settings['self_hosted_video']['url'] );
587	} elseif ( ! empty( $settings['video_url'] ) ) {
588	$video_url = esc_url( $settings['video_url'] );
589	}
590
591	if ( empty( $video_url ) ) {
592	return;
593	}
594
595	$video_id = uniqid('eel_video_');
596	$circle_glow = ! empty( $settings['circle_glow'] ) && $settings['circle_glow'] === 'yes' ? 'eel-glow-active' : '';
597
598	$icon_hide_h_show = ( isset( $settings['popup_icon_hover_show'] ) && $settings['popup_icon_hover_show'] === 'yes' ) ? 'eel-vicon-hide-show' : '';
599
600	echo '<div class="eel-video-popup-wrapper ' . esc_attr( $icon_hide_h_show ?? '' ) . '">';
601
602	if ( $display_type === 'normal' ) {
603	if ( $embed_type === 'self_hosted' && !empty( $settings['self_hosted_video']['url'] ) ) {
604	$attrs = [];
605
606	if ( ! empty( $settings['self_hosted_autoplay'] ) ) {
607	$attrs[] = 'autoplay';
608	}
609	if ( ! empty( $settings['self_hosted_loop'] ) ) {
610	$attrs[] = 'loop';
611	}
612	if ( ! empty( $settings['self_hosted_muted'] ) ) {
613	$attrs[] = 'muted';
614	}
615	if ( ! empty( $settings['self_hosted_controls'] ) ) {
616	$attrs[] = 'controls';
617	}
618
619	$attrs[] = 'playsinline';
620
621	echo '<video src="' . esc_url($video_url) . '" ' . esc_attr(implode( ' ', $attrs )) . ' class="eel-normal-video"></video>';
622	} else {
623	$embed_url = '';
624	if ( $embed_type === 'youtube' ) {
625	$yt_id = $this->get_youtube_id($video_url);
626	if ($yt_id) {
627	$embed_url = 'https://www.youtube.com/embed/' . $yt_id;
628	}
629	} elseif ( $embed_type === 'vimeo' ) {
630	$vimeo_id = $this->get_vimeo_id($video_url);
631	if ($vimeo_id) {
632	$embed_url = 'https://player.vimeo.com/video/' . $vimeo_id;
633	}
634	}
635
636	if ( $embed_url ) {
637	echo '<iframe class="eel-normal-video" src="' . esc_url($embed_url) . '" frameborder="0" allowfullscreen></iframe>';
638	}
639	}
640	}
641
642	if ( $display_type === 'popup' ) {
643	$icon_html = '';
644	$icon_setting = $settings['popup_trigger_icon'];
645	// Handle custom SVG upload (Elementor 3.18+)
646	if (
647	isset($icon_setting['library']) &&
648	$icon_setting['library'] === 'svg' &&
649	isset($icon_setting['value']['url'])
650	) {
651	$svg_url = $icon_setting['value']['url'];
652	if (strtolower(pathinfo($svg_url, PATHINFO_EXTENSION)) === 'svg') {
653	$response = wp_remote_get($svg_url);
654	if (!is_wp_error($response) && isset($response['body'])) {
655	$icon_html = $response['body'];
656	}
657	}
658	} elseif (
659	isset($icon_setting['library']) &&
660	$icon_setting['library'] === 'image' &&
661	isset($icon_setting['value']['url'])
662	) {
663	$img_url = esc_url($icon_setting['value']['url']);
664	$attachment_id = attachment_url_to_postid($img_url);
665	if ($attachment_id) {
666	$icon_html = wp_get_attachment_image($attachment_id, 'full', false, [
667	'style' => 'max-width:100%;max-height:100%;',
668	'alt' => '',
669	]);
670	} else {
671	// Do not output the image if not an attachment
672	$icon_html = '';
673	}
674	} elseif (!empty($icon_setting['value']) && is_string($icon_setting['value'])) {
675	$icon_class = esc_attr($icon_setting['value']);
676	$icon_html = '<i class="' . $icon_class . '" aria-hidden="true"></i>';
677	} else {
678	$icon_html = '<i class="unicon-play" aria-hidden="true"></i>';
679	}
680
681	$button_label = ! empty( $settings['popup_trigger_text'] ) ? wp_strip_all_tags( $settings['popup_trigger_text'] ) : 'Play Video';
682	?>
683
684	<button class="eel-video-popup-btn entro-all-video-popup <?php echo esc_attr($circle_glow); ?>"
685	data-video-type="<?php echo esc_attr( $embed_type ); ?>"
686	data-video-src="<?php echo esc_url( $video_url ); ?>"
687	data-popup-id="<?php echo esc_attr( $video_id ); ?>"
688	aria-label="<?php echo esc_attr( $button_label ); ?>">
689
690	<?php if ( $settings['popup_icon_show'] === 'yes' && $settings['popup_icon_position'] === 'before' ) : ?>
691	<span class="eel-icon-wrap"><?php echo wp_kses_post($icon_html); ?>
692	<?php if(!empty($settings['popup_play_overlay'])): ?>
693	<span class="eel-overlay-play"><?php echo esc_html( $settings['popup_play_overlay'] ); ?> </span>
694	<?php endif; ?>
695	</span>
696	<?php endif; ?>
697
698	<span class="eel-trigger-text"><?php echo esc_html( $settings['popup_trigger_text'] ); ?></span>
699
700	<?php if ( $settings['popup_icon_show'] === 'yes' && $settings['popup_icon_position'] === 'after' ) : ?>
701	<span class="eel-icon-wrap"><?php echo wp_kses_post($icon_html); ?>
702	<?php if(!empty($settings['popup_play_overlay'])): ?>
703	<span class="eel-overlay-play"><?php echo esc_html( $settings['popup_play_overlay'] ); ?> </span>
704	<?php endif; ?>
705	</span>
706	<?php endif; ?>
707
708	</button>
709
710	<div id="<?php echo esc_attr($video_id); ?>" class="eel-video-popup-overlay">
711	<div class="eel-video-popup-content">
712	<span class="eel-video-popup-close">×</span>
713	<div class="eel-video-popup-iframe-wrapper"></div>
714	</div>
715	</div>
716	<?php
717	}
718
719	echo '</div>';
720	}
721	}?>