Home > UI/UX Development > JavaScript > Add Videos using media upload URL in WordPress

Add Videos using media upload URL in WordPress

Sonal Jatav JavaScript, jQuery, WordPress 1

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
    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)
    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
    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.
This Article is TAGGED in , , . BOOKMARK THE permalink.

Avatar photo
Sonal Jatav

Related articles

event.preventDefault() vs event.stopPropagation() vs return false

This article provides the information how can we prevent default behavior/action of

How to add multiple pins on Google map?

Demo: MultiplePin Script code: <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> <script type="text/javascript">

Roles and capabilities of User in wordpress

In wordpress you can define different user roles having specific capabilities as

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">