WordPress Video Modal Widget


/ Published in: PHP
Save to your folder(s)

A plugin that adds widget functionality to a third-party video modal plugin. The widget accepts a YouTube video ID and a thumbnail URL of the user's choice. It then generates a thumbnail link that launches a video modal via the third-party plugin. Optionally, if the user chooses to leave the thumbnail field blank, the default YouTube video thumbnail is used as the anchor to launch the modal.


Copy this code and paste it in your HTML
  1. <?php
  2. /*
  3. Plugin Name: UTMOST CO. WIDGETS
  4. Description: Site specific code changes for utmostco.com
  5. */
  6. /* Start Adding Functions Below this Line */
  7.  
  8. /* VIDEO MODAL START */
  9.  
  10. class UtmostVideoModalWidget extends WP_Widget {
  11. public function __construct() {
  12. $widget_options = array(
  13. 'classname' => 'utmost-video-modal-widget',
  14. 'description' => 'A modal that autoplays videos.'
  15. );
  16.  
  17. parent::WP_Widget('utmost-video-modal-widget', 'Utmost Video Modal', $widget_options);
  18. }
  19.  
  20. /**
  21.   * Outputs the content of the widget
  22.   *
  23.   * @param array $args
  24.   * @param array $instance
  25.   */
  26. public function widget( $args, $instance ) {
  27. extract( $args, EXTR_SKIP );
  28. $videoId = (isset( $instance['videoId'] )) ? esc_attr($instance['videoId']) : '';
  29. $videoThumbnail = (isset( $instance['videoThumbnail'] )) ? esc_attr($instance['videoThumbnail']) : '';
  30.  
  31. if ( (isset( $instance['videoThumbnail'] )) ? esc_attr($instance['videoThumbnail']) : '' ) { ?>
  32.  
  33. <a href="https://www.youtube.com/watch?v=<?php echo $videoId; ?>" rel="wp-video-lightbox"class="modal-click">
  34. <img src="<?php echo $videoThumbnail; ?>"
  35. </a>
  36.  
  37. <?php
  38. } else {
  39. ?>
  40.  
  41. <a href="https://www.youtube.com/watch?v=<?php echo $videoId; ?>" style="width: 100%; height: auto; margin: 0; border: none;" rel="wp-video-lightbox"class="modal-click">
  42. <img style="width: 100%; height: auto; margin: 0; border: none;"src="http://img.youtube.com/vi/<?php echo $videoId; ?>/mqdefault.jpg">
  43. </a>
  44.  
  45. <?php
  46. }
  47. }
  48.  
  49. /**
  50.   * Outputs the options form on admin
  51.   *
  52.   * @param array $instance The widget options
  53.   */
  54. public function form( $instance ) {
  55. ?>
  56. <div>
  57. <label style="display: block; margin-top:15px;" for="<?php echo $this->get_field_id('videoId');?>">
  58. Video ID
  59. </label>
  60. <br />
  61. <input style="width:100%; margin-bottom:15px;" id="<?php echo $this->get_field_id('videoId');?>"
  62. name="<?php echo $this->get_field_name('videoId');?>"
  63. value="<?php echo esc_attr($instance['videoId']); ?>" /><br>
  64. <label style="display: block; margin-bottom:15px;" for="<?php echo $this->get_field_id('videoId');?>">
  65. Modal Thumbnail<br>
  66. Creates a text link that is clicked to launch the modal.<br>
  67. (Leave this field blank to use default YouTube thumbnail.)
  68. </label>
  69. <input style="width:100%; margin-bottom:15px;" id="<?php echo $this->get_field_id('videoThumbnail');?>"
  70. name="<?php echo $this->get_field_name('videoThumbnail');?>"
  71. value="<?php echo esc_attr($instance['videoThumbnail']); ?>" />
  72. </div>
  73. <?php
  74. }
  75. }
  76.  
  77. function utmost_video_modal_widget_init() {
  78. register_widget('UtmostVideoModalWidget');
  79. }
  80. add_action('widgets_init', 'utmost_video_modal_widget_init');
  81.  
  82. /* VIDEO MODAL END */
  83.  
  84.  
  85.  
  86.  
  87. /* Stop Adding Functions Below this Line */
  88. ?>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.