Add Videos using media upload URL in WordPress

We have seen how to add WordPress media upload button in a page or metabox. You can find the steps here.
Similarly you can also add a media upload button for videos, since the above link has media upload type as image

media-upload.php?type=image&TB_iframe=true

How do we upload videos instead? Follow the steps below:

1. Add the media upload button in your metabox/frontend
   
   /* Media upload button */ <input id="upload_video_button" type="button" value="Upload Videos" class="button button-primary button-large" /> /* Media preview */ <div id="upload_preview" alt="Upload Video" class="image-preview" ></div>

   1 2 3 4 5

   /* Media upload button */ <input id="upload_video_button" type="button" value="Upload Videos" class="button button-primary button-large" />   /* Media preview */ <div id="upload_preview" alt="Upload Video" class="image-preview" ></div>

2. Add script to open media upload window(localize and enqueue the script file where you add the below code)
   
   $(function(){ jQuery('body').delegate("#upload_video_button","click", function(e){ e.preventDefault(); formfield = jQuery('#upload_gallery_image').attr('name'); tb_show('', 'media-upload.php?type=video&amp;TB_iframe=true'); sendToEditor(); }); }); function sendToEditor() { window.send_to_editor = function(html) { var data= []; if(html.indexOf('a href')>-1){ var htmlcontent = jQuery(html).attr("href"); var htmtype = "URL"; }else{ var htmlcontent = html; var htmtype = "Name"; } data[0] = htmlcontent; data[1] = htmtype; /* Get attachment details by ajax call */ var attachmentObj = ajaxCall('wp_get_attachment_by_post_name', data, false, false); /* Add the retreived video as preview */ var addVideo = '<a class="blockElement" href="'+attachmentObj.data.URL+'" target="_blank"><img id="upload_gallery_image_preview'+count+'" alt="Upload Image" class="image-preview" src="'+attachmentObj.data.Thumbnail+'" /> </a>'; jQuery('#upload_preview').append(addVideo); tb_remove(); } } function ajaxCall(actionURL, dataVar, asyncVar, reload) { var responseData = "";     jQuery.ajax({         async: asyncVar,         url: BB_Ajax.ajaxurl,         data: ({             action: actionURL,             dataArray: dataVar         }),         type: "POST",         success: function(response) {             responseData = response;             if(reload){                 window.location.reload();             }         },         error: function(errorResponse) {             //console.log('error: ' + errorResponse);             responseData = errorResponse;         }     });     return responseData; }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61

   $(function(){     jQuery('body').delegate("#upload_video_button","click", function(e){         e.preventDefault();                  formfield = jQuery('#upload_gallery_image').attr('name');         tb_show('', 'media-upload.php?type=video&amp;TB_iframe=true');         sendToEditor();       }); });   function sendToEditor() {       window.send_to_editor = function(html) {               var data= [];                 if(html.indexOf('a href')>-1){                     var htmlcontent = jQuery(html).attr("href");                     var htmtype = "URL";                 }else{                     var htmlcontent = html;                     var htmtype = "Name";                 }                 data[0] = htmlcontent;                 data[1] = htmtype;               /* Get attachment details by ajax call */             var attachmentObj = ajaxCall('wp_get_attachment_by_post_name', data, false, false);                            /* Add the retreived video as preview */             var addVideo = '<a class="blockElement" href="'+attachmentObj.data.URL+'" target="_blank"><img id="upload_gallery_image_preview'+count+'" alt="Upload Image" class="image-preview" src="'+attachmentObj.data.Thumbnail+'" /> </a>';             jQuery('#upload_preview').append(addVideo); tb_remove();       }   } function ajaxCall(actionURL, dataVar, asyncVar, reload) { var responseData = "";     jQuery.ajax({         async: asyncVar,         url: BB_Ajax.ajaxurl,         data: ({             action: actionURL,             dataArray: dataVar         }),         type: "POST",         success: function(response) {             responseData = response;             if(reload){                 window.location.reload();             }         },         error: function(errorResponse) {             //console.log('error: ' + errorResponse);             responseData = errorResponse;         }     });     return responseData; }

    

3. Add the following code to functions.php
   
   /* send to editor get attachment details by slug */ add_action('wp_ajax_nopriv_wp_get_attachment_by_post_name', 'wp_get_attachment_by_post_name'); add_action('wp_ajax_wp_get_attachment_by_post_name', 'wp_get_attachment_by_post_name'); if( ! ( function_exists( 'wp_get_attachment_by_post_name' ) ) ) { function wp_get_attachment_by_post_name( $post_name ) { if($_POST['dataArray'][1] == "URL"){ /* if HTML returns a URL */ $args = array( 'post_type' => 'attachment', 'p' => pippin_get_image_id($_POST['dataArray'][0]) , ); }else{ /* if HTML returns only filename */ $args = array( 'post_type' => 'attachment', 'name' => $_POST['dataArray'][0] , ); } $get_posts = new WP_Query( $args ); $postData = array(); if ( $get_posts->have_posts() ) { while ( $get_posts->have_posts() ) { $get_posts->the_post(); $postData['URL'] = wp_get_attachment_url(get_the_ID()); $postData['Thumbnail'] = (get_the_post_thumbnail_url(get_the_ID())); $postData['ID'] = get_the_ID(); $postData['Name'] = get_the_title(); $postData['Caption'] = get_post_field('post_excerpt', get_the_ID()); //get_the_excerpt(get_the_ID()); } /* Restore original Post Data */ wp_reset_postdata(); } wp_send_json_success($postData); die(); } } /* get attachment ID from URL */ function pippin_get_image_id($image_url) { global $wpdb; $attachment = $wpdb->get_col($wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE guid='%s';", $image_url )); return $attachment[0]; }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

   /* send to editor get attachment details by slug */ add_action('wp_ajax_nopriv_wp_get_attachment_by_post_name', 'wp_get_attachment_by_post_name'); add_action('wp_ajax_wp_get_attachment_by_post_name', 'wp_get_attachment_by_post_name');     if( ! ( function_exists( 'wp_get_attachment_by_post_name' ) ) ) {     function wp_get_attachment_by_post_name( $post_name ) {                   if($_POST['dataArray'][1] == "URL"){ /* if HTML returns a URL */ $args = array(                 'post_type'     => 'attachment',                 'p'          =>  pippin_get_image_id($_POST['dataArray'][0]) ,             );     }else{ /* if HTML returns only filename */             $args = array(                 'post_type'     => 'attachment',                 'name'          =>  $_POST['dataArray'][0] ,             );             }             $get_posts = new WP_Query( $args );             $postData = array();                          if ( $get_posts->have_posts() ) {                     while ( $get_posts->have_posts() ) {                             $get_posts->the_post();                             $postData['URL'] = wp_get_attachment_url(get_the_ID());                             $postData['Thumbnail'] = (get_the_post_thumbnail_url(get_the_ID()));                             $postData['ID'] = get_the_ID();                             $postData['Name'] = get_the_title();                             $postData['Caption'] = get_post_field('post_excerpt', get_the_ID()); //get_the_excerpt(get_the_ID());                     }                     /* Restore original Post Data */                     wp_reset_postdata();             }          wp_send_json_success($postData);          die();     } }   /* get attachment ID from URL */ function pippin_get_image_id($image_url) {     global $wpdb;     $attachment = $wpdb->get_col($wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE guid='%s';", $image_url ));         return $attachment[0]; }

4. Here I am saving the attachment ID and while displaying the page use attachment ID to retrieve details of the video.