流式传输YouTube视频WordPress小部件

Question

您好我正在尝试制作一个自定义wordpress小部件，允许用户输入视频的标题和网址，然后在前端的引导模式中显示。

我遇到的问题是，当模态窗口关闭时关闭视频我已经使用这个javascript来删除源属性并在打开模态时替换它（这就是我的计划）。如果您将视频的网址粘贴到src =“youtube video”

中，它就有效

但我想使用一个变量，以便用户可以更改网址，但它只输出scipt（）而不是url。我的plugin.php看起来像这样。我仍在学习任何帮助，所以这是非常基本但我可能会遗漏一些愚蠢的东西。

 <?php
/*
Plugin Name: Site Plugin for Zeezevents.co.uk
Description: Site specific code changes for Zeezevents.co.uk
*/
/* Start Adding Functions Below this Line */
// Creating the widget
class wpb_widget extends WP_Widget {

function __construct() {
parent::__construct(
// Base ID of your widget
'wpb_widget', 

// Widget name will appear in UI
__('Zeezevents Videos', 'wpb_widget_domain'),

// Widget description
array( 'description' => __( 'play Youtube videos widget', 'wpb_widget_domain' ), )
);
}

// Creating widget front-end
// This is where the action happens
public function widget( $args, $instance ) {
$videourl =  apply_filters( 'video_url', $instance['videourl'] );
$title = apply_filters( 'widget_title', $instance['title'] );
// before and after widget arguments are defined by themes
echo $args['before_widget'];
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];
echo $videourl;
// This is where you run the code and display the output  
json_encode($videourl);
echo __( '<!-- Button trigger modal -->
<a class="btn btn-default" data-toggle="modal" data-target="#myModal" id="link">
  Watch Video
</a>

<script type = "text/javascript">


  jQuery("#link").click(function () {

        var src = " <?php echo ( $videourl ); ?> "

        jQuery("#myModal iframe").attr("src", src);
    });
</script>', 'wpb_widget_domain' );
echo $args['after_widget'];
}

// Widget Backend
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];

}
else {
$title = __( 'Videos', 'wpb_widget_domain' );

}
if ( isset( $instance[ 'videourl' ] ) ){
        $videourl = $instance[ 'videourl' ];
       }
       else {  $videourl = __( 'Videos', 'wpb_widget_domain' );}
// Widget admin form
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label> 
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
<label for="<?php echo $this->get_field_id( 'videourl' ); ?>"><?php _e( 'URL:' ); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'videourl' ); ?>" name="<?php echo $this->get_field_name( 'videourl' ); ?>" type="text" value="<?php echo esc_attr( $videourl ); ?>" />
</p>
<?php 
}

// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';

$instance['videourl'] = ( ! empty( $new_instance['videourl'] ) ) ? strip_tags( $new_instance['videourl'] ) : '';
return $instance;
}
} // Class wpb_widget ends here

// Register and load the widget
function wpb_load_widget() {
    register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );

/* Stop Adding Functions Below this Line */
?>

和模态就像这样

       <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Egypt 2 Africa 2013</h4>
      </div>
      <div class="modal-body">
       <iframe width="560" height="315" src="<?php echo ($videourl); />" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="modal-footer">

        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <script type="text/javascript">

    jQuery('#myModal').on('hidden.bs.modal', 
    function () {
    jQuery('#myModal iframe').removeAttr('src');  

})

</script >

Answer 1

我想出来了!! =）我把jquery从回声中拿出来，它现在有效。你可以告诉我，我是一个新手，但决心学习如何编程。我的下一步是从用户输入的网址末尾提取视频ID，以嵌入视频。任何人都可以指导我一个很好的教程来解释这个过程吗？感谢您的任何意见。

编辑：按照建议编辑的代码

<?php
/*
Plugin Name: Site Plugin for Zeezevents.co.uk
Description: Site specific code changes for Zeezevents.co.uk
*/
/* Start Adding Functions Below this Line */
// Creating the widget
class wpb_widget extends WP_Widget {

function __construct() {
    parent::__construct(
        // Base ID of your widget
        'wpb_widget', 

        // Widget name will appear in UI
        __('Zeezevents Videos', 'wpb_widget_domain'),

        // Widget description
        array( 'description' => __( 'play Youtube videos widget', 'wpb_widget_domain' ), )
        );
}

// Creating widget front-end
// This is where the action happens
public function widget( $args, $instance ) {

$videourl =  apply_filters( 'video_url', $instance['videourl'] );
$title = apply_filters( 'widget_title', $instance['title'] );
// before and after widget arguments are defined by themes
echo $args['before_widget'];
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];



// This is where you run the code and display the output  

echo __( '<div class="container-fluid"><!-- Button trigger modal -->
<a class="btn" data-toggle="modal" data-target="#myModal" id="link">
<img src="http://zeezevents.co.uk/Images/egypt2africa.jpg" class="img-thumbnail"/>
</a>

</div>', 'videourl' );
  ?>


<script type = "text/javascript">


  jQuery("#link").click(function () {

        var src = "<?php echo $videourl; ?>";

        jQuery("#myModal iframe").attr("src", src);
    });
</script>

 <?php
echo $args['after_widget'] ;

}

// Widget Backend
public function form( $instance ) {
    if ( isset( $instance[ 'title' ] ) ) {
    $title = $instance[ 'title' ];

    }
    else {
    $title = __( 'Videos', 'wpb_widget_domain' );

    }
    if ( isset( $instance[ 'videourl' ] ) ){
            $videourl = $instance[ 'videourl' ];
           }
           else {  $videourl = __( 'Videos', 'wpb_widget_domain' );
           }
    // Widget admin form
    ?>
    <p>
    <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
    <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
    <label for="<?php echo $this->get_field_id( 'videourl' ); ?>"><?php _e( 'URL:' ); ?></label>
    <input class="widefat" id="<?php echo $this->get_field_id( 'videourl' ); ?>" name="<?php echo $this->get_field_name( 'videourl' ); ?>" type="text" value="<?php echo esc_attr( $videourl ); ?>" />
    </p>
    <?php
}

// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';

$instance['videourl'] = ( ! empty( $new_instance['videourl'] ) ) ? strip_tags( $new_instance['videourl'] ) : '';
return $instance;
}
} // Class wpb_widget ends here

// Register and load the widget
function wpb_load_widget() {
    register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );

/* Stop Adding Functions Below this Line */
?>

它可能在技术上不正确，但它有点乱，但它有效。