Video post

Hello guys, What is the way to create a video post in Beans?

Here an example: http://demo.themebutler.com/jenkins/2015/04/03/paper-by-fiftythree/

This post has a video instead of a featured image. How can i do?

Thank you

Fabio

Hello Fabio,

As always, there are a lot of ways to achieve this. The easiest solution would probably to use custom fields.

Let's say that, on "post" post type, you'd like to add a YouTube or Vimeo video above the post header and that, if no video has been added, then your featured image would be displayed.

First, in your functions.php, you would register your custom field using the very efficient custom fields Beans API :

add_action( 'admin_init', 'my_function_name' );

function my_function_name() {

    $fields = array(
         array(
            'id' => 'video_id',
            'label' => 'The URL of my video',
            'type' => 'text',
            'default' => 'https://www.youtube.com/watch?v=gxW3qrU1spI'
        ),

    );

    beans_register_post_meta( $fields, array( 'post' ), 'section_id', array( 'title' => 'My video meta box' ) );

}

Then, in your functions.php, you could add the snippet below. Basically, it uses the wp_oembed WordPress function to "transform" the url you will add in your new metabox in an iframe :

beans_add_smart_action ( 'beans_post_header_before_markup', 'mytheme_video_above_title' );
function mytheme_video_above_title () {

    if ( is_singular ('post') ) {

        $videourl = beans_get_post_meta( 'video_id' );

        if ( ! empty( $videourl ) ) {       
        echo wp_oembed_get ( $videourl )  ;
        } 

        elseif ( has_post_thumbnail() ) {
        echo the_post_thumbnail('large');  
        }

        else {
        echo "something else";  
        }

    }

}

And that's it. You could now add the url of your choice in the meta box you've registered on first step.

This is obviously a very simple draft. Hope it helps.

Mat

Wow, thank you Mathieu! I will try it soon!

Hi guys,

I believe the video on Jenkins is just added to the post content using the WordPess Core oembed feature. All you have to do is drop a video url in your editor 🙂 To have it covered accross the post, there are two lines in the child theme:

beans_add_attribute( 'beans_embed_oembed', 'class', 'tm-cover-article' );
beans_add_attribute( 'beans_post_image', 'class', 'tm-cover-article' );

adding tm-cover-article to the feature images and video wrappers. That CSS class is used to make images and videos cover the article using the following CSS:

.tm-cover-article {
 margin-right: -25px;
  margin-left: -25px;
}

.tm-cover-article iframe,
.tm-cover-article blockquote {
 width: 2000px !important;
 max-width: 100% !important;
 box-shadow: none !important;
  margin: 0 !important;
 border-radius: 0 !important;
}

Have fun,

Thank you Thierry!