];
}The
Protected function \register\u controls(){
$this-> Start\u controls\u section（
‘section_video’,
The[
‘label’= >’ Video’,
]The
）;
$this-> Add_control（
‘video\u id’,
The[
‘label’= >’ Video id’,
‘type’= > Controls_manager:: text,
]The
）;
$this-> End_controls_section();
}The
Protected function render(){
$id = $this-> Get\u settings (‘video\u id’)& Gt;
≪ Div class= \
≪ Div class= \
≪ Div class= \
&Lt\/ Div>
&Lt\/ Div>
≪? PHP
}The
Protected function \u content\template() {}
}The
Plugin:: instance() -> Widgets_manager-> Register_widget_type (New owp_widget_video()); Note that there is only one option for importing video IDs. I want to keep this widget simple. You can also see that the JS script is called in the first step of the get_script_dependent() function. The script is loaded only when the video component is added to the page. The
Stage III – JS script JS code performs all magic. Obtain video thumbnails from YouTube through the video ID of the part to be placed, and replace the thumbnails with iframe when clicked. Create a JS folder in the subtopic and display videos in that folder. Create a JS file. Open the file in a text editor and add the following JS code: Document Addeventlistener (‘domcontentloaded’, function(){
Var I,
Video = document Getelementsbyclassname (‘owp YouTube player’);
For (I = 0; I < video.length; i++){
\/\/We get the thumbnail image from the YouTube ID
Video[i] Style Backgroundimage =’url (\/\/i.ytimg.com\/vi\/’+ video[i].dataset.id +’\/maxresdefault.jpg)’;
Video[i] Onclick = function(){
Var iframe = document CreateElement (‘iframe’),
Embedded = ‘ https:\/\/www.youtube.com\/embed\/ID?autoplay=1& ; Rel=0& Controls=0& Showinfo=0& Mute=0& Wmode=opaque’;
Iframe SetAttribute (‘src’, embedded.replace (‘id’, this.dataset.id));
Iframe SetAttribute (‘frameborder’,’0′);
Iframe SetAttribute (‘allowfullscreen’,’1′);
This Parentnode Replacechild (iframe, this);
}The
}The
}); This is a very simple code to display the video when you click the thumbnail. You can add or change some controls on line 12. The
Step 4 – CSS code currently has no method to load CSS files only when using the elementor part as a JS script.
