Nice Poodle, Mister

    videojs-suggestedvideoendcap

    1.2.0 • Public • Published

    videojs-suggestedVideoEndcap

    Creates an endcap screen with a grid of suggested video links to watch, similar to YouTube. Inspired by Funny or Die’s videojs-relatedCarousel.


    Purpose

    Recirculation is important for increasing page views and disseminating your videos. This Suggested Video Endcap looks to offer such a solution. By displaying a grid of suggested video content, a la YouTube, users may be more inclined to stay on your site and click around to content, not necessarily just videos.

    Suggested Video Endcap Screenshot

    Usage

    This plugin requires Video.js and was created with version 7.2.

    It also uses flexbox.

    1. Install Video.js
    2. Add the videojs-suggestedVideoEndcap CSS to your page
    3. Add the videojs-suggestedVideoEndcap JavaScript to your page
    4. Initialize the plugin with some related endcap content in JSON format
    5. Test to see that, after the video ends, the related endcap appears with your related content

    Example

    Below is a sample use case. Feel free to add the videojs-suggestedVideoEndcap CSS/JS to your own project how you see fit. Separated here as an example.

    <link rel="stylesheet" href="videojs.suggestedVideoEndcap.css">
    <video id="my-video" data-setup="{}" preload="auto" controls>
      <source src="my-video.mp4">
      <source src="my-video.webm">
    </video>
    <script src="videojs.suggestedVideoEndcap.js"></script>
    <script>
      'use strict';
      
      var video = videojs('my-video');
      video.suggestedVideoEndcap({
        header: 'You may also like…',
        suggestions: [
          {
            title: 'Suggested Video One',
            url: '/another-video.html',
            image: 'http://placehold.it/250', // could be an animated GIF
            alt: 'Description of photo', // optional photo description, defaults to the title
            target: '_blank' // can be any anchor target type
          },
          {
            title: 'Suggested Article One',
            url: '/a-different-article.html',
            image: 'http://placehold.it/250',
            target: '_self' // defaults to self if no target value is present
          }
        ]
      });
    </script> 

    Notes

    The CSS needs updating to conform to the size of your given media player and to add things like transitions and other effects. Currently, it's set up for a rather large implementation and truncated in the code for this case. Should also be extended for media queries, but that's a more case-by-case level.

    Let me know if you run into any bugs or recommendations.

    Install

    npm i videojs-suggestedvideoendcap

    DownloadsWeekly Downloads

    9

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    8.46 kB

    Total Files

    5

    Last publish

    Collaborators

    • justinmccraw