PluginProbe
Easy Elements for Elementor – Addons & Website Templates / 1.3.5
Easy Elements for Elementor – Addons & Website Templates v1.3.5
1.5.3 1.5.2 1.5.1 1.5.0 1.4.9 1.4.6 1.4.7 1.4.8 1.4.5 1.4.4 1.4.3 1.2.7 1.2.8 1.2.9 1.3.0 1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 1.3.6 1.3.7 1.3.8 1.3.9 1.4.0 All 47 releases
easy-elements / widgets / video / video.php

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

1,060 lines 32.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2 namespace Easyel\EasyElements\Widgets;
3 use Elementor\Controls_Manager;
4 use Elementor\Utils;
5 use Elementor\Widget_Base;
6 use \Elementor\Group_Control_Border;
7
8 if ( ! defined( 'ABSPATH' ) ) {
9 exit;
10 }
11
12 class Easyel_Video_Popup_Widget extends \Elementor\Widget_Base {
13
14 public function get_name() {
15 return 'eel-video-popup';
16 }
17
18 public function get_title() {
19 return __( 'Video', 'easy-elements' );
20 }
21
22 public function get_icon() {
23 return 'easyicon easyelIcon-video';
24 }
25
26 public function get_categories() {
27 return [ 'easyelements_category' ];
28 }
29
30 public function get_keywords() {
31 return [ 'video', 'popup', 'link', 'click' ];
32 }
33
34 public function get_style_depends() {
35 return [
36 'eel-video-popup',
37 ];
38 }
39
40 protected function register_controls() {
41 $this->start_controls_section(
42 'section_video',
43 [
44 'label' => __( 'Video Settings', 'easy-elements' ),
45 ]
46 );
47
48 $this->add_control(
49 'display_type',
50 [
51 'label' => __( 'Display Type', 'easy-elements' ),
52 'type' => Controls_Manager::SELECT,
53 'default' => 'normal',
54 'options' => [
55 'normal' => __( 'Normal Only', 'easy-elements' ),
56 'popup' => __( 'Popup Only', 'easy-elements' ),
57 ],
58 ]
59 );
60
61 $this->add_control(
62 'video_type',
63 [
64 'label' => __( 'Video Type', 'easy-elements' ),
65 'type' => Controls_Manager::SELECT,
66 'default' => 'youtube',
67 'options' => [
68 'youtube' => __( 'YouTube', 'easy-elements' ),
69 'vimeo' => __( 'Vimeo', 'easy-elements' ),
70 'self_hosted'=> __( 'Self Hosted', 'easy-elements' ),
71 ],
72 ]
73 );
74
75 $this->add_control(
76 'video_url',
77 [
78 'label' => __( 'Video URL', 'easy-elements' ),
79 'type' => Controls_Manager::TEXT,
80 'default' => 'https://www.youtube.com/watch?v=hDABYoas7SY',
81 'placeholder' => __( 'https://www.youtube.com/watch?v=hDABYoas7SY', 'easy-elements' ),
82 'condition' => [
83 'video_type!' => 'self_hosted',
84 'video_type' => 'youtube',
85 ],
86 ]
87 );
88
89 $this->add_control(
90 'video_url_vimeo',
91 [
92 'label' => __( 'Video URL', 'easy-elements' ),
93 'type' => Controls_Manager::TEXT,
94 'default' => 'https://vimeo.com/347119375',
95 'placeholder' => __( 'https://vimeo.com/347119375', 'easy-elements' ),
96 'condition' => [
97 'video_type!' => 'self_hosted',
98 'video_type' => 'vimeo',
99 ],
100 ]
101 );
102
103 $this->add_control(
104 'self_hosted_video',
105 [
106 'label' => __( 'Self Hosted Video', 'easy-elements' ),
107 'type' => Controls_Manager::MEDIA,
108 'media_type' => 'video',
109 'condition' => [
110 'video_type' => 'self_hosted',
111 ],
112 ]
113 );
114
115 $this->add_responsive_control(
116 'video_height',
117 [
118 'label' => __( 'Video Height', 'easy-elements' ),
119 'type' => \Elementor\Controls_Manager::SLIDER,
120 'size_units' => [ 'px', 'vh' ],
121 'range' => [
122 'px' => [
123 'min' => 100,
124 'max' => 1000,
125 ],
126 'vh' => [
127 'min' => 10,
128 'max' => 100,
129 ],
130 ],
131 'default' => [
132 'size' => 700,
133 'unit' => 'px',
134 ],
135 'selectors' => [
136 '{{WRAPPER}} .eel-video-popup-wrapper iframe' => 'height: {{SIZE}}{{UNIT}};',
137 '{{WRAPPER}} .eel-video-popup-wrapper video' => 'height: {{SIZE}}{{UNIT}};',
138 ],
139 'condition' => [
140 'display_type' => 'normal',
141 ],
142 ]
143 );
144
145 $this->add_group_control(
146 \Elementor\Group_Control_Css_Filter::get_type(),
147 [
148 'name' => 'video_filters',
149 'label' => __( 'CSS Filters', 'easy-elements' ),
150 'selector' => '{{WRAPPER}} .eel-video-popup-wrapper iframe, {{WRAPPER}} .eel-video-popup-wrapper video',
151 ]
152 );
153
154
155
156 $this->add_control(
157 'popup_trigger_text',
158 [
159 'label' => __( 'Trigger Text', 'easy-elements' ),
160 'type' => Controls_Manager::TEXT,
161 'default' => __( 'Play Video', 'easy-elements' ),
162 'condition' => [
163 'display_type' => 'popup',
164 ],
165 ]
166 );
167
168 $this->add_responsive_control(
169 'popup_icon_spacing',
170 [
171 'label' => __( 'Text Spacing', 'easy-elements' ),
172 'type' => \Elementor\Controls_Manager::SLIDER,
173 'size_units' => [ 'px' ],
174 'default' => [
175 'size' => 8,
176 'unit' => 'px',
177 ],
178 'range' => [
179 'px' => [
180 'min' => 0,
181 'max' => 100,
182 ],
183 ],
184 'selectors' => [
185 '{{WRAPPER}} .eel-video-popup-btn .eel-icon-wrap + .eel-trigger-text' => 'margin-left: {{SIZE}}{{UNIT}};',
186 '{{WRAPPER}} .eel-video-popup-btn .eel-trigger-text + .eel-icon-wrap' => 'margin-left: {{SIZE}}{{UNIT}};',
187 ],
188 'condition' => [
189 'display_type' => 'popup',
190 ],
191 ]
192 );
193
194 $this->add_control(
195 'popup_text_color',
196 [
197 'label' => __( 'Text Color', 'easy-elements' ),
198 'type' => Controls_Manager::COLOR,
199 'selectors' => [
200 '{{WRAPPER}} .eel-video-popup-btn .eel-trigger-text' => 'color: {{VALUE}};',
201 ],
202 'condition' => [
203 'display_type' => 'popup',
204 ],
205 ]
206 );
207
208 $this->add_group_control(
209 \Elementor\Group_Control_Typography::get_type(),
210 [
211 'name' => 'popup_text_typography',
212 'label' => __( 'Typography', 'easy-elements' ),
213 'selector' => '{{WRAPPER}} .eel-video-popup-btn .eel-trigger-text',
214 'condition' => [
215 'display_type' => 'popup',
216 ],
217 ]
218 );
219
220 $this->add_control(
221 'popup_icon_show',
222 [
223 'label' => __( 'Show Icon', 'easy-elements' ),
224 'type' => \Elementor\Controls_Manager::SWITCHER,
225 'label_on' => __( 'Yes', 'easy-elements' ),
226 'label_off' => __( 'No', 'easy-elements' ),
227 'return_value' => 'yes',
228 'default' => 'yes',
229 'condition' => [
230 'display_type' => 'popup',
231 ],
232 ]
233 );
234
235 $this->add_control(
236 'popup_icon_hover_show',
237 [
238 'label' => __( 'Default Hide & Hover Show', 'easy-elements' ),
239 'type' => \Elementor\Controls_Manager::SWITCHER,
240 'label_on' => __( 'Yes', 'easy-elements' ),
241 'label_off' => __( 'No', 'easy-elements' ),
242 'return_value' => 'yes',
243 'default' => 'no',
244 'condition' => [
245 'display_type' => 'popup',
246 'popup_icon_show' => 'yes'
247 ],
248 ]
249 );
250
251 $this->add_control(
252 'popup_trigger_icon',
253 [
254 'label' => __( 'Icon', 'easy-elements' ),
255 'type' => Controls_Manager::ICONS,
256 'default' => [
257 'value' => '',
258 'library' => 'fa-solid',
259 ],
260 'condition' => [
261 'display_type' => 'popup',
262 'popup_icon_show' => 'yes',
263 ],
264 ]
265 );
266
267 $this->add_control(
268 'popup_icon_position',
269 [
270 'label' => __( 'Icon Position', 'easy-elements' ),
271 'type' => Controls_Manager::SELECT,
272 'default' => 'before',
273 'options' => [
274 'before' => __( 'Before Text', 'easy-elements' ),
275 'after' => __( 'After Text', 'easy-elements' ),
276 ],
277 'condition' => [
278 'display_type' => 'popup',
279 'popup_icon_show' => 'yes',
280 ],
281 ]
282 );
283
284
285 $this->add_control(
286 'popup_icon_color',
287 [
288 'label' => __( 'Icon Color', 'easy-elements' ),
289 'type' => Controls_Manager::COLOR,
290 'selectors' => [
291 '{{WRAPPER}} .eel-video-popup-btn i' => 'color: {{VALUE}};',
292 '{{WRAPPER}} .eel-video-popup-btn svg' => 'fill: {{VALUE}};',
293 '{{WRAPPER}} .eel-video-popup-btn svg path' => 'fill: {{VALUE}};',
294
295 ],
296 'condition' => [
297 'display_type' => 'popup',
298 'popup_icon_show' => 'yes',
299 ],
300 ]
301 );
302
303
304 $this->add_responsive_control(
305 'icon_size',
306 [
307 'label' => __( 'Icon Size', 'easy-elements' ),
308 'type' => Controls_Manager::SLIDER,
309 'range' => [
310 'px' => [
311 'min' => 8,
312 'max' => 100,
313 ],
314 ],
315 'default' => [
316 'size' => 20,
317 'unit' => 'px',
318 ],
319 'selectors' => [
320 '{{WRAPPER}} .eel-video-popup-btn i' => 'font-size: {{SIZE}}{{UNIT}};',
321 '{{WRAPPER}} .eel-video-popup-btn svg' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
322 '{{WRAPPER}} .eel-video-popup-btn svg path' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
323 ],
324 'condition' => [
325 'display_type' => 'popup',
326 'popup_icon_show' => 'yes',
327 ],
328 ]
329 );
330
331 $this->add_control(
332 'icon_bg_color',
333 [
334 'label' => __( 'Circle Background Color', 'easy-elements' ),
335 'type' => Controls_Manager::COLOR,
336 'selectors' => [
337 '{{WRAPPER}} .eel-video-popup-btn .eel-icon-wrap' => 'background-color: {{VALUE}};',
338 ],
339 'condition' => [
340 'display_type' => 'popup',
341 'popup_icon_show' => 'yes',
342 ],
343 ]
344 );
345
346 $this->add_responsive_control(
347 'circle_size',
348 [
349 'label' => __( 'Circle Size', 'easy-elements' ),
350 'type' => Controls_Manager::SLIDER,
351 'range' => [
352 'px' => [ 'min' => 10, 'max' => 200 ],
353 ],
354 'selectors' => [
355 '{{WRAPPER}} .eel-video-popup-btn .eel-icon-wrap' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}; place-content: center;',
356 ],
357 'condition' => [
358 'display_type' => 'popup',
359 'popup_icon_show' => 'yes',
360 ],
361 ]
362 );
363
364 $this->add_responsive_control(
365 'icon_border_radius',
366 [
367 'label' => __( 'Circle Border Radius', 'easy-elements' ),
368 'type' => \Elementor\Controls_Manager::DIMENSIONS,
369 'size_units' => [ 'px', '%' ],
370 'selectors' => [
371 '{{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}};',
372 ],
373 'condition' => [
374 'display_type' => 'popup',
375 'popup_icon_show' => 'yes',
376 ],
377 ]
378 );
379
380 $this->add_group_control(
381 \Elementor\Group_Control_Box_Shadow::get_type(),
382 [
383 'name' => 'circle_shadow',
384 'label' => __( 'Circle Shadow', 'easy-elements' ),
385 'selector' => '{{WRAPPER}} .eel-video-popup-btn .eel-icon-wrap',
386 'condition' => [
387 'display_type' => 'popup',
388 'popup_icon_show' => 'yes',
389 ],
390 ]
391 );
392
393
394 $this->add_group_control(
395 Group_Control_Border::get_type(),
396 [
397 'name' => 'button_border',
398 'label' => __( 'Button Border', 'easy-elements' ),
399 'selector' => '{{WRAPPER}} .eel-video-popup-btn .eel-icon-wrap',
400 'condition' => [
401 'display_type' => 'popup',
402 'popup_icon_show' => 'yes',
403 ],
404 ]
405 );
406
407 $this->add_control(
408 'circle_glow',
409 [
410 'label' => __( 'Active Ripple', 'easy-elements' ),
411 'type' => \Elementor\Controls_Manager::SWITCHER,
412 'label_on' => __( 'On', 'easy-elements' ),
413 'label_off' => __( 'Off', 'easy-elements' ),
414 'return_value' => 'yes',
415 'default' => '',
416 'condition' => [
417 'display_type' => 'popup',
418 'popup_icon_show' => 'yes',
419 ],
420 ]
421 );
422
423 $this->add_control(
424 'glow_color',
425 [
426 'label' => __( 'Ripple Color', 'easy-elements' ),
427 'type' => Controls_Manager::COLOR,
428 'default' => 'rgba(102, 102, 102, 0.1)',
429 'selectors' => [
430 '{{WRAPPER}} .eel-video-popup-btn.eel-glow-active .eel-icon-wrap' => '--glow-color: {{VALUE}};',
431 ],
432 'condition' => [
433 'display_type' => 'popup',
434 'circle_glow' => 'yes',
435 ],
436 ]
437 );
438
439 $this->add_group_control(
440 \Elementor\Group_Control_Background::get_type(),
441 [
442 'name' => 'wrap_background',
443 'types' => [ 'classic', 'gradient' ],
444 'selector' => '{{WRAPPER}} .eel-video-popup-wrapper',
445 'condition' => [
446 'display_type' => 'popup',
447 ],
448 ]
449 );
450
451 $this->add_responsive_control(
452 'wrap_radius',
453 [
454 'label' => __( 'Border Radius', 'easy-elements' ),
455 'type' => \Elementor\Controls_Manager::DIMENSIONS,
456 'size_units' => [ 'px', '%' ],
457 'selectors' => [
458 '{{WRAPPER}} .eel-video-popup-wrapper' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
459 ],
460 'condition' => [
461 'display_type' => 'popup',
462 ],
463 ]
464 );
465
466 $this->add_responsive_control(
467 'wrap_padding',
468 [
469 'label' => __( 'Padding', 'easy-elements' ),
470 'type' => \Elementor\Controls_Manager::DIMENSIONS,
471 'size_units' => [ 'px', '%' ],
472 'selectors' => [
473 '{{WRAPPER}} .eel-video-popup-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
474 ],
475 'condition' => [
476 'display_type' => 'popup',
477 ],
478 ]
479 );
480 $this->end_controls_section();
481
482 $this->start_controls_section(
483 'section_video_self_options',
484 [
485 'label' => __( 'Video Settings', 'easy-elements' ),
486 'condition' => [
487 'display_type' => 'normal',
488 'video_type' => 'self_hosted',
489 ],
490 ]
491 );
492
493 $this->add_control(
494 'self_hosted_autoplay',
495 [
496 'label' => __( 'Autoplay', 'easy-elements' ),
497 'type' => Controls_Manager::SWITCHER,
498 'label_on' => __( 'Yes', 'easy-elements' ),
499 'label_off' => __( 'No', 'easy-elements' ),
500 'return_value' => 'yes',
501 'default' => '',
502 'condition' => [
503 'display_type' => 'normal',
504 'video_type' => 'self_hosted',
505 ],
506 ]
507 );
508
509 $this->add_control(
510 'self_hosted_loop',
511 [
512 'label' => __( 'Loop', 'easy-elements' ),
513 'type' => Controls_Manager::SWITCHER,
514 'label_on' => __( 'Yes', 'easy-elements' ),
515 'label_off' => __( 'No', 'easy-elements' ),
516 'return_value' => 'yes',
517 'default' => '',
518 'condition' => [
519 'display_type' => 'normal',
520 'video_type' => 'self_hosted',
521 ],
522 ]
523 );
524
525 $this->add_control(
526 'self_hosted_muted',
527 [
528 'label' => __( 'Muted', 'easy-elements' ),
529 'type' => Controls_Manager::SWITCHER,
530 'label_on' => __( 'Yes', 'easy-elements' ),
531 'label_off' => __( 'No', 'easy-elements' ),
532 'return_value' => 'yes',
533 'default' => '',
534 'condition' => [
535 'display_type' => 'normal',
536 'video_type' => 'self_hosted',
537 ],
538 ]
539 );
540
541 $this->add_control(
542 'self_hosted_controls',
543 [
544 'label' => __( 'Show Controls', 'easy-elements' ),
545 'type' => Controls_Manager::SWITCHER,
546 'label_on' => __( 'Yes', 'easy-elements' ),
547 'label_off' => __( 'No', 'easy-elements' ),
548 'return_value' => 'yes',
549 'default' => 'yes',
550 'condition' => [
551 'display_type' => 'normal',
552 'video_type' => 'self_hosted',
553 ],
554 ]
555 );
556 $this->end_controls_section();
557
558 $this->start_controls_section(
559 'section_video_options',
560 [
561 'label' => __( 'Video Settings', 'easy-elements' ),
562 'condition' => [
563 'display_type' => 'normal',
564 'video_type!' => 'self_hosted',
565 ],
566 ]
567 );
568
569 $this->add_control(
570 'autoplay',
571 [
572 'label' => __( 'Autoplay', 'easy-elements' ),
573 'type' => Controls_Manager::SWITCHER,
574 'label_on' => __( 'Yes', 'easy-elements' ),
575 'label_off'=> __( 'No', 'easy-elements' ),
576 'return_value' => 'yes',
577 'default' => '',
578 ]
579 );
580
581 $this->add_control(
582 'mute',
583 [
584 'label' => __( 'Mute', 'easy-elements' ),
585 'type' => Controls_Manager::SWITCHER,
586 'label_on' => __( 'Yes', 'easy-elements' ),
587 'label_off'=> __( 'No', 'easy-elements' ),
588 'return_value' => 'yes',
589 'default' => '',
590 ]
591 );
592
593 $this->add_control(
594 'loop',
595 [
596 'label' => __( 'Loop', 'easy-elements' ),
597 'type' => Controls_Manager::SWITCHER,
598 'label_on' => __( 'Yes', 'easy-elements' ),
599 'label_off'=> __( 'No', 'easy-elements' ),
600 'return_value' => 'yes',
601 'default' => '',
602 ]
603 );
604
605 $this->add_control(
606 'controls',
607 [
608 'label' => __( 'Player Controls', 'easy-elements' ),
609 'type' => Controls_Manager::SWITCHER,
610 'label_on' => __( 'Yes', 'easy-elements' ),
611 'label_off'=> __( 'No', 'easy-elements' ),
612 'return_value' => 'yes',
613 'default' => 'yes',
614 ]
615 );
616
617 $this->add_control(
618 'privacy_mode',
619 [
620 'label' => __( 'Privacy Mode', 'easy-elements' ),
621 'type' => Controls_Manager::SWITCHER,
622 'label_on' => __( 'On', 'easy-elements' ),
623 'label_off'=> __( 'Off', 'easy-elements' ),
624 'return_value' => 'yes',
625 'description' => __( 'YouTube nocookie / Vimeo DNT', 'easy-elements' ),
626 ]
627 );
628
629 $this->end_controls_section();
630
631
632 $this->start_controls_section(
633 'section_image_overlay',
634 [
635 'label' => __( 'Video Overlay', 'easy-elements' ),
636 'condition' => [
637 'display_type' => 'normal',
638 ],
639 ]
640 );
641
642 $this->add_control(
643 'show_image_overlay',
644 [
645 'label' => __( 'Image Overlay', 'easy-elements' ),
646 'type' => \Elementor\Controls_Manager::SWITCHER,
647 'label_on' => __( 'On', 'easy-elements' ),
648 'label_off'=> __( 'Off', 'easy-elements' ),
649 'return_value' => 'yes',
650 'default' => '',
651 ]
652 );
653
654 $this->add_control(
655 'overlay_image',
656 [
657 'label' => __( 'Choose Image', 'easy-elements' ),
658 'type' => \Elementor\Controls_Manager::MEDIA,
659 'condition' => [
660 'show_image_overlay' => 'yes',
661 ],
662 ]
663 );
664
665 $this->add_control(
666 'overlay_image_size',
667 [
668 'label' => __( 'Image Resolution', 'easy-elements' ),
669 'type' => \Elementor\Controls_Manager::SELECT,
670 'default' => 'full',
671 'options' => [
672 'thumbnail' => __( 'Thumbnail', 'easy-elements' ),
673 'medium' => __( 'Medium', 'easy-elements' ),
674 'large' => __( 'Large', 'easy-elements' ),
675 'full' => __( 'Full', 'easy-elements' ),
676 ],
677 'condition' => [
678 'show_image_overlay' => 'yes',
679 ],
680 ]
681 );
682
683 $this->add_control(
684 'overlay_play_icon',
685 [
686 'label' => __( 'Play Icon', 'easy-elements' ),
687 'type' => \Elementor\Controls_Manager::SWITCHER,
688 'default' => 'yes',
689 'condition' => [
690 'show_image_overlay' => 'yes',
691 ],
692 ]
693 );
694
695 $this->add_control(
696 'overlay_icon',
697 [
698 'label' => __( 'Icon', 'easy-elements' ),
699 'type' => \Elementor\Controls_Manager::ICONS,
700 'condition' => [
701 'show_image_overlay' => 'yes',
702 'overlay_play_icon' => 'yes',
703 ],
704 ]
705 );
706
707 $this->add_control(
708 'overlay_lightbox',
709 [
710 'label' => __( 'Lightbox', 'easy-elements' ),
711 'type' => \Elementor\Controls_Manager::SWITCHER,
712 'return_value' => 'yes',
713 'default' => '',
714 'condition' => [
715 'show_image_overlay' => 'yes',
716 ],
717 ]
718 );
719
720 $this->add_control(
721 'lightbox_animation',
722 [
723 'label' => __( 'Animation', 'easy-elements' ),
724 'type' => \Elementor\Controls_Manager::ANIMATION,
725 'default' => '',
726 'condition' => [
727 'overlay_lightbox' => 'yes',
728 'show_image_overlay' => 'yes',
729 ],
730 ]
731 );
732
733 $this->end_controls_section();
734
735 $this->start_controls_section(
736 'section_video_popup_overlay_settings',
737 [
738 'label' => __( 'Play Button Overlay Settings', 'easy-elements' ),
739 'condition' => [
740 'display_type' => 'popup',
741 ],
742 ]
743 );
744
745 $this->add_control(
746 'popup_play_overlay',
747 [
748 'label' => __( 'Play Overlay', 'easy-elements' ),
749 'type' => Controls_Manager::TEXT,
750 'default' => __( 'Play', 'easy-elements' ),
751 ]
752 );
753
754 $this->add_control(
755 'popup_play_color',
756 [
757 'label' => esc_html__('Text Color', 'easy-elements'),
758 'type' => \Elementor\Controls_Manager::COLOR,
759 'selectors' => [
760 '{{WRAPPER}} .eel-icon-wrap .eel-overlay-play' => 'color: {{VALUE}};',
761 ],
762 ]
763 );
764 $this->add_group_control(
765 \Elementor\Group_Control_Typography::get_type(),
766 [
767 'name' => 'popup_play__typography',
768 'selector' => '{{WRAPPER}} .eel-icon-wrap .eel-overlay-play',
769 ]
770 );
771
772 $this->add_group_control(
773 \Elementor\Group_Control_Background::get_type(),
774 [
775 'name' => 'background_overly_play',
776 'types' => [ 'classic', 'gradient' ],
777 'selector' => '{{WRAPPER}} .eel-icon-wrap .eel-overlay-play',
778 ]
779 );
780
781 $this->end_controls_section();
782
783 $this->start_controls_section(
784 'video_icon_settings_style',
785 [
786 'label' => __( 'Video Overlay Style', 'easy-elements' ),
787 'tab' => Controls_Manager::TAB_STYLE,
788 'condition' => [
789 'display_type' => 'normal',
790 ],
791 ]
792 );
793
794 $this->add_control(
795 'icon_color',
796 [
797 'label' => esc_html__('Icon Color', 'easy-elements'),
798 'type' => Controls_Manager::COLOR,
799 'selectors' => [
800 '{{WRAPPER}} .eel-overlay-play-icon' => 'color: {{VALUE}};',
801 '{{WRAPPER}} .eel-overlay-play-icon svg path' => 'fill: {{VALUE}};',
802 ],
803 ]
804 );
805
806 $this->add_responsive_control(
807 'video_icon_size',
808 [
809 'label' => esc_html__('Icon Size', 'easy-elements'),
810 'type' => \Elementor\Controls_Manager::SLIDER,
811 'size_units' => ['px', 'em', '%'],
812 'range' => [
813 'px' => [
814 'min' => 10,
815 'max' => 200,
816 ],
817 'em' => [
818 'min' => 0.5,
819 'max' => 10,
820 ],
821 '%' => [
822 'min' => 10,
823 'max' => 200,
824 ],
825 ],
826 'selectors' => [
827 '{{WRAPPER}} .eel-overlay-play-icon i' => 'font-size: {{SIZE}}{{UNIT}};',
828 '{{WRAPPER}} .eel-overlay-play-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
829 ],
830 ]
831 );
832
833 $this->add_group_control(
834 \Elementor\Group_Control_Border::get_type(),
835 [
836 'name' => 'video_border',
837 'selector' => '{{WRAPPER}} .eel-overlay-play-icon',
838 ]
839 );
840
841 $this->add_group_control(
842 \Elementor\Group_Control_Background::get_type(),
843 [
844 'name' => 'video_background',
845 'types' => [ 'classic', 'gradient' ],
846 'selector' => '{{WRAPPER}} .eel-overlay-play-icon',
847 ]
848 );
849 $this->add_responsive_control(
850 'video_border_radius',
851 [
852 'label' => esc_html__('Border Radius', 'easy-elements'),
853 'type' => Controls_Manager::DIMENSIONS,
854 'size_units' => [ 'px', '%', 'em' ],
855 'selectors' => [
856 '{{WRAPPER}} .eel-overlay-play-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
857 ],
858 ]
859 );
860
861 $this->add_responsive_control(
862 'custom_circle_normal_size',
863 [
864 'label' => esc_html__('Circle Size', 'easy-elements'),
865 'type' => Controls_Manager::SLIDER,
866 'size_units' => [ 'px', 'em', '%' ],
867 'range' => [
868 'px' => [
869 'min' => 10,
870 'max' => 300,
871 ],
872 'em' => [
873 'min' => 0.5,
874 'max' => 20,
875 ],
876 '%' => [
877 'min' => 5,
878 'max' => 100,
879 ],
880 ],
881 'selectors' => [
882 '{{WRAPPER}} .eel-overlay-play-icon' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
883 ],
884 ]
885 );
886
887 $this->end_controls_section();
888 }
889
890 private function get_youtube_id( $url ) {
891 preg_match('/(?:v=|\/)([0-9A-Za-z_-]{11}).*/', $url, $matches);
892 return $matches[1] ?? '';
893 }
894
895 private function get_vimeo_id( $url ) {
896 preg_match('/(\d+)/', $url, $matches);
897 return $matches[1] ?? '';
898 }
899
900 protected function render() {
901 $settings = $this->get_settings_for_display();
902 $embed_type = $settings['video_type'];
903 $display_type = $settings['display_type'];
904 $video_url = '';
905
906 /* -----------------------------------------
907 * Get Video URL
908 * ----------------------------------------- */
909 if ( $embed_type === 'self_hosted' && ! empty( $settings['self_hosted_video']['url'] ) ) {
910 $video_url = esc_url( $settings['self_hosted_video']['url'] );
911 } elseif ( ! empty( $settings['video_url'] ) ) {
912 $video_url = esc_url( $settings['video_url'] );
913 } elseif ( ! empty( $settings['video_url_vimeo'] ) ) {
914 $video_url = esc_url( $settings['video_url_vimeo'] );
915 }
916
917 if ( empty( $video_url ) ) {
918 return;
919 }
920
921 $video_id = uniqid( 'eel_video_' );
922 $circle_glow = ( ! empty( $settings['circle_glow'] ) && $settings['circle_glow'] === 'yes' ) ? 'eel-glow-active' : '';
923 $icon_hide_h_show = ( ! empty( $settings['popup_icon_hover_show'] ) && $settings['popup_icon_hover_show'] === 'yes' ) ? 'eel-vicon-hide-show' : '';
924
925 echo '<div class="eel-video-popup-wrapper ' . esc_attr( $icon_hide_h_show ) . '">';
926
927 /* =====================================================================
928 * NORMAL VIDEO
929 * ===================================================================== */
930 if ( $display_type === 'normal' ) {
931
932 // Image Overlay
933 if ( ! empty( $settings['show_image_overlay'] ) && $settings['show_image_overlay'] === 'yes' && ! empty( $settings['overlay_image']['url'] ) ) {
934 $overlay_url = esc_url( $settings['overlay_image']['url'] );
935 $overlay_size = ! empty( $settings['overlay_image_size'] ) ? $settings['overlay_image_size'] : 'full';
936 $bg_style = "background-image: url('{$overlay_url}'); background-size: cover; background-position: center;";
937 $overlay_lightbox = ! empty( $settings['overlay_lightbox'] ) && $settings['overlay_lightbox'] === 'yes' ? 'yes' : 'no';
938 $lightbox_animation = ! empty( $settings['lightbox_animation'] ) ? esc_attr( $settings['lightbox_animation'] ) : '';
939 echo '<div class="eel-video-overlay"
940 style="' . esc_attr($bg_style) . '"
941 data-lightbox="' . esc_attr( $overlay_lightbox ) . '"
942 data-video-type="' . esc_attr( $embed_type ) . '"
943 data-video-url="' . esc_url( $video_url ) . '"
944 data-popup-id="' . esc_attr( $video_id ) . '"
945 data-animation="' . esc_attr( $lightbox_animation ) . '">';
946 if ( ! empty( $settings['overlay_play_icon'] ) && $settings['overlay_play_icon'] === 'yes' ) {
947 $icon_html = '';
948 if ( ! empty( $settings['overlay_icon']['value'] ) ) {
949 $icon_html = '<i class="' . esc_attr( $settings['overlay_icon']['value'] ) . '"></i>';
950 } else {
951 $icon_html = '<i class="unicon-play"></i>';
952 }
953 // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
954 echo '<span class="eel-overlay-play-icon">' . $icon_html . '</span>';
955 }
956
957 echo '</div>';
958
959 // Create lightbox overlay structure if lightbox is enabled
960 if ( $overlay_lightbox === 'yes' ) {
961 $animation_class = ! empty( $lightbox_animation ) ? ' animated ' . $lightbox_animation : '';
962 echo '<div id="' . esc_attr( $video_id ) . '" class="eel-video-popup-overlay" data-animation="' . esc_attr( $lightbox_animation ) . '">';
963 echo '<div class="eel-video-popup-content ' . esc_attr( $animation_class ) . '">';
964 echo '<span class="eel-video-popup-close">&times;</span>';
965 echo '<div class="eel-video-popup-iframe-wrapper"></div>';
966 echo '</div>';
967 echo '</div>';
968 }
969 }
970
971
972 // Self Hosted Video
973 if ( $embed_type === 'self_hosted' ) {
974 $attrs = [];
975 if ( ! empty( $settings['self_hosted_autoplay'] ) ) {
976 $attrs[] = 'autoplay';
977 $attrs[] = 'muted';
978 }
979 if ( ! empty( $settings['self_hosted_loop'] ) ) $attrs[] = 'loop';
980 if ( ! empty( $settings['self_hosted_muted'] ) ) $attrs[] = 'muted';
981 if ( ! empty( $settings['self_hosted_controls'] ) ) $attrs[] = 'controls';
982 $attrs[] = 'playsinline';
983 $attrs[] = 'preload="none"';
984 // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
985 echo '<video class="eel-normal-video" src="' . esc_url( $video_url ) . '" ' . implode( ' ', $attrs ) . '></video>';
986 } else {
987 // YouTube/Vimeo
988 $params = [
989 'autoplay' => ! empty( $settings['autoplay'] ) ? '1' : '0',
990 'loop' => ! empty( $settings['loop'] ) ? '1' : '0',
991 'controls' => ! empty( $settings['controls'] ) ? '1' : '0',
992 ];
993 if ( ! empty( $settings['mute'] ) ) $params['mute'] = '1';
994
995 if ( $embed_type === 'youtube' ) {
996 $yt_id = $this->get_youtube_id( $video_url );
997 if ( ! $yt_id ) { echo '</div>'; return; }
998 $embed_url = 'https://www.youtube.com/embed/' . $yt_id . '?' . http_build_query( $params );
999 } elseif ( $embed_type === 'vimeo' ) {
1000 $vimeo_id = $this->get_vimeo_id( $video_url );
1001 if ( ! $vimeo_id ) { echo '</div>'; return; }
1002 $embed_url = 'https://player.vimeo.com/video/' . $vimeo_id . '?' . http_build_query( $params );
1003 }
1004 echo '<iframe class="eel-normal-video" src="' . esc_url( $embed_url ) . '" loading="lazy" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>';
1005 }
1006 }
1007
1008 if ( $display_type === 'popup' ) {
1009
1010 $icon_html = '';
1011 $icon_setting = $settings['popup_trigger_icon'];
1012
1013 if ( isset( $icon_setting['library'] ) && $icon_setting['library'] === 'svg' && ! empty( $icon_setting['value']['url'] ) ) {
1014 $response = wp_remote_get( $icon_setting['value']['url'] );
1015 if ( ! is_wp_error( $response ) && ! empty( $response['body'] ) ) {
1016 $icon_html = $response['body'];
1017 }
1018 } elseif ( isset( $icon_setting['library'] ) && $icon_setting['library'] === 'image' && ! empty( $icon_setting['value']['url'] ) ) {
1019 $icon_html = wp_get_attachment_image( attachment_url_to_postid( $icon_setting['value']['url'] ), 'full' );
1020 } elseif ( ! empty( $icon_setting['value'] ) ) {
1021 $icon_html = '<i class="' . esc_attr( $icon_setting['value'] ) . '"></i>';
1022 } else {
1023 $icon_html = '<i class="unicon-play"></i>';
1024 }
1025
1026 $label = ! empty( $settings['popup_trigger_text'] ) ? wp_strip_all_tags( $settings['popup_trigger_text'] ) : 'Play Video';
1027 ?>
1028
1029 <div class="eel-video-popup-btn entro-all-video-popup <?php echo esc_attr($circle_glow); ?>"
1030 data-video-type="<?php echo esc_attr( $embed_type ); ?>"
1031 data-video-src="<?php echo esc_url( $video_url ); ?>"
1032 data-popup-id="<?php echo esc_attr( $video_id ); ?>"
1033 aria-label="<?php echo esc_attr( $label ); ?>">
1034 <?php if ( $settings['popup_icon_show'] === 'yes' && $settings['popup_icon_position'] === 'before' ) : ?>
1035 <span class="eel-icon-wrap"><?php echo wp_kses_post($icon_html); ?>
1036 <?php if(!empty($settings['popup_play_overlay'])): ?>
1037 <span class="eel-overlay-play"><?php echo esc_html( $settings['popup_play_overlay'] ); ?> </span>
1038 <?php endif; ?>
1039 </span>
1040 <?php endif; ?>
1041 <span class="eel-trigger-text"><?php echo esc_html( $settings['popup_trigger_text'] ); ?></span>
1042 <?php if ( $settings['popup_icon_show'] === 'yes' && $settings['popup_icon_position'] === 'after' ) : ?>
1043 <span class="eel-icon-wrap"><?php echo wp_kses_post($icon_html); ?>
1044 <?php if(!empty($settings['popup_play_overlay'])): ?>
1045 <span class="eel-overlay-play"><?php echo esc_html( $settings['popup_play_overlay'] ); ?> </span>
1046 <?php endif; ?>
1047 </span>
1048 <?php endif; ?>
1049 </div>
1050 <div id="<?php echo esc_attr( $video_id ); ?>" class="eel-video-popup-overlay">
1051 <div class="eel-video-popup-content">
1052 <span class="eel-video-popup-close">&times;</span>
1053 <div class="eel-video-popup-iframe-wrapper"></div>
1054 </div>
1055 </div>
1056 <?php
1057 }
1058 echo '</div>';
1059 }
1060 }