Wordpress widget dev - undefined index and other problems

Question

I am trying to develop my first wordpress theme from scratch. It is including a widget, which basically should display a video in the according sidebar that starts playing as soon as it is in view. I use jquery.inview.js for checking if the video is inview. The widget should provide the video link some options. I guess it is far from best practice and clean code but any help is appreciated here:

1. I am getting an undefined index error, when I add the widget the first time, for the two checkboxes. It is gone after saving its the first time. What am I missing here?

2. How do I implement <?php checked( $checked, $current, $echo ); ?> for displaying the checkbox state correctly. This is a very general question but I am stuck here.

3. Finally I would like to grab the video from the media library and would like to know the best way to do this. I tried to implement the example in the wordpress reference but I am a bit lost here too.

Many thanks, C.

PHP

<?php
class WS_Media_Widget extends WP_Widget {

    /**
     * Register widget with WordPress.
     */
    function __construct() {
        parent::__construct(
            'ws_media_widget', 
            esc_html__( 'Featured Media', 'text_domain' ), 
            array( 'description' => esc_html__( 'Mediaplay with autoplay and overlay', 'text_domain' ), )
        );
    }

    /**
     * Front-end display of widget.
     *
     * @see WP_Widget::widget()
     *
     * @param array $args     Widget arguments.
     * @param array $instance Saved values from database.
     */
    public function widget( $args, $instance ) {
        extract( $args );

        $media = $instance['media'];
        $poster = $instance['poster'];
        $link = $instance['link'];
        $title = $instance['title'];
        $intro = $instance['intro'];
        $loop = $instance['loop'];
        $autoplay = $instance['autoplay'];

        echo $before_widget;
    ?>  
        <video id="hero-video" class="video"  
            <?php 
                if ($autoplay) echo "autoplay "; 
                if ($loop) echo "loop "; 
         ?>>
            <source src="<?php echo $media ?>" type="video/mp4" />
            <!-- <source src="media/demo.ogv" type="video/ogg" />
            <source src="media/demo.webm" type="video/webm" /> -->
        </video>
        <div id="video-overlay">
            <h2><?php echo $title ?></h2>
            <div class="video-intro">
                <p><?php echo $intro ?></p>
            </div>
            <div class="video-call">
                <a href="<?php echo $link ?>">Episode starten</a>
            </div>
        </div>
        <div id="scrollnext" class="animated infinite fadeIn">
                <a href="#latest-posts"></a>
        </div>
    <?php
        echo $after_widget;
    }

    /**
     * Back-end widget form.
     *
     * @see WP_Widget::form()
     * 
     * @param array $instance Previously saved values from database.
     */
    public function form( $instance ) {

        $media = ! empty( $instance['media'] ) ? $instance['media'] : esc_html__( 'Media', 'text_domain' );
        $poster = ! empty( $instance['poster'] ) ? $instance['poster'] : esc_html__( 'Alternatve Poster', 'text_domain' );
        $link = ! empty( $instance['link'] ) ? $instance['link'] : esc_html__( 'Links to', 'text_domain' );
        $title = ! empty( $instance['title'] ) ? $instance['title'] : esc_html__( 'New title', 'text_domain' );
        $intro = ! empty( $instance['intro'] ) ? $instance['intro'] : esc_html__( 'Intro overlay text', 'text_domain' );
        $loop = $instance[ 'loop' ] ? 'true' : 'false';
        $autoplay = $instance[ 'autoplay' ] ? 'true' : 'false';
        echo $loop. $autoplay;
        ?>
        <p>
            <label for="<?php echo esc_attr( $this->get_field_id( 'Media' ) ); ?>"><?php esc_attr_e( 'Select video', 'text_domain' ); ?></label> 
            <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'media' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'media' ) ); ?>" type="text" value="<?php echo esc_attr( $media); ?>">
        </p>
        <p>
            <label for="<?php echo esc_attr( $this->get_field_id( 'Poster' ) ); ?>"><?php esc_attr_e( 'Select poster', 'text_domain' ); ?></label> 
            <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'poster' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'poster' ) ); ?>" type="text" value="<?php echo esc_attr( $poster ); ?>">
        </p>
        <p>
            <label for="<?php echo esc_attr( $this->get_field_id( 'Link' ) ); ?>"><?php esc_attr_e( 'Link to', 'text_domain' ); ?></label> 
            <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'link' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'link' ) ); ?>" type="text" value="<?php echo esc_attr( $link ); ?>">
        </p>
        <p>
            <label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php esc_attr_e( 'Title:', 'text_domain' ); ?></label> 
            <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
        </p>
        <p>
            <label for="<?php echo esc_attr( $this->get_field_id( 'intro' ) ); ?>"><?php esc_attr_e( 'Intro text:', 'text_domain' ); ?></label> 
            <textarea class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'intro' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'intro' ) ); ?>"><?php echo esc_attr( $intro ); ?></textarea>
        </p>
        <p>
            <input id="<?php echo esc_attr( $this->get_field_id( 'loop' ) ); ?>" class="checkbox" name="<?php echo esc_attr( $this->get_field_name( 'loop' ) ); ?>" type="checkbox" value="1" <?php checked( $instance[ 'loop' ], 'on' ); ?> /> 
            <label for="<?php echo esc_attr( $this->get_field_id( 'loop' ) ); ?>"><?php esc_attr_e( 'Loop video', 'text_domain' ); ?></label> 
        </p>
        <p>
            <input id="<?php echo esc_attr( $this->get_field_id( 'autoplay' ) ); ?>" class="checkbox" name="<?php echo esc_attr( $this->get_field_name( 'autoplay' ) ); ?>" type="checkbox" value="1" <?php checked( $instance[ 'autoplay' ], 'on' ); ?> /> 
            <label for="<?php echo esc_attr( $this->get_field_id( 'autoplay' ) ); ?>"><?php esc_attr_e( 'Autoplay video', 'text_domain' ); ?></label> 
        </p>

        <?php 
    }

    /**
     * Sanitize widget form values as they are saved.
     *
     * @see WP_Widget::update()
     *
     * @param array $new_instance Values just sent to be saved.
     * @param array $old_instance Previously saved values from database.
     *
     * @return array Updated safe values to be saved.
     */
    public function update( $new_instance, $old_instance ) {
        $instance = array();

        $instance['media'] = ( ! empty( $new_instance['media'] ) ) ? strip_tags( $new_instance['media'] ) : '';
        $instance['poster'] = ( ! empty( $new_instance['poster'] ) ) ? strip_tags( $new_instance['poster'] ) : '';
        $instance['link'] = ( ! empty( $new_instance['link'] ) ) ? strip_tags( $new_instance['link'] ) : '';
        $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
        $instance['intro'] = ( ! empty( $new_instance['intro'] ) ) ? strip_tags( $new_instance['intro'] ) : '';
        $instance['loop'] = $new_instance['loop'];
        $instance['autoplay'] = $new_instance['autoplay'];


        return $instance;
    }

}

function register_ws_media_widget() {
    register_widget( 'ws_media_widget' );
}
add_action( 'widgets_init', 'register_ws_media_widget' );
?>

JAVASCRIPT

/*CHECK IF VIDEOS IN VIEW */
$('video').on('inview', function(event, isInView) {
     if (isInView && $("video").get(0).autoplay) {
        console.log('is in view', event);
        $('video').trigger('play');
  } else {
        console.log('out if view', event);
        $('video').trigger('pause');
    }
});

Answer 1

Replace with your code

    <p>
        <input id="<?php echo esc_attr( $this->get_field_id( 'loop' ) ); ?>" class="checkbox" name="<?php echo esc_attr( $this->get_field_name( 'loop' ) ); ?>" type="checkbox" value="1" <?php checked( $instance[ 'loop' ], '1' ); ?> /> 
        <label for="<?php echo esc_attr( $this->get_field_id( 'loop' ) ); ?>"><?php esc_attr_e( 'Loop video', 'text_domain' ); ?></label> 
    </p>
    <p>
        <input id="<?php echo esc_attr( $this->get_field_id( 'autoplay' ) ); ?>" class="checkbox" name="<?php echo esc_attr( $this->get_field_name( 'autoplay' ) ); ?>" type="checkbox" value="1" <?php checked( $instance[ 'autoplay' ], '1' ); ?> /> 
        <label for="<?php echo esc_attr( $this->get_field_id( 'autoplay' ) ); ?>"><?php esc_attr_e( 'Autoplay video', 'text_domain' ); ?></label> 
    </p>