{
    "title": "Video Intro Plugin",
    "label": "Video Intro",
    "description": "The video-intro plugin allows you to add a video at the top of page.",
    "image": "preview.jpg",
    "content": "---\n\n## Instructions\n\nTo add a video-background to any page, simply upload an mp4 video file, and navigate to ***page › settings › plugins › video background*** and set the video source.\n\n**Video Source**\nIf you have uploaded the video file into the same folder, then simply add the filename, for example `myvideo.mp4`. Optionally, you can use an absolute link to an external mp4 video file, or a root-relative path to an mp4 file in another folder. * *Adding a video source effectively enables the video-background plugin.*\n\n## Optional Settings\n\n`Poster`\nAdd the name of a jpg file uploaded to the page, that represents the video. The poster image may (or may not) display before the video starts playing. Furthermore, the poster-image will be displayed on mobile devices instead of the video. *If you leave this value empty, the default page preview-image will be used instead.*\n\n<div data-alert class=\"alert-box bg2\">\n<h3>Tip!<\/h3>\nIf you are uploading a poster image to the same folder, you may want to \"Hide Gallery\" to prevent the gallery module from displaying. Optionally, you can name the poster file prefixed with _underscore (for example '_poster.jpg'), to hide it from the gallery module.*\n<\/div>\n\n`Poster Mobile`\nUse this setting if you want to set a *different* poster image specifically for mobile devices.\n\n`Menu Style`\nSince the main menu is overlaying the video, we use the *menu-absolute-20* style by default to make sure the menu remains visible. You can choose another style or set default\/none.\n\n`Height` [0-100%]\nSet the height of your video-background as a percentage value of the screens visible viewport. By default, this value is set to 100, which sets the video to cover the entire visible stage area.\n\n`Autoplay`\nSets the video to autoplay once it is partially loaded.\n\n`Toggleplay`\nDisplays a small play\/pause button at the bottom of the video. It is strongly recommended to keep this button enabled, for visitors with motion-disorientation, autism and for many other reasons a visitor may not wish to download- and view a video in loop.\n\n`Loop`\nSets the video to loop.\n\n`Muted`\nMutes the video. *Ideally, background-videos should be encoded without sound.*\n\n`Hide Context`\nA shortcut to entirely hide all the context of the page.\n\n`Hide Footer`\nA shortcut to hide the footer for this specific page.\n\n## Limitations\nBackground-video can be a useful feature, but there are many limitations you should to be aware of.\n<div class=x-list markdown=1>\n- **Does not work on mobile**<br>Unfortunately, the video-background does not work on mobile devices for several reasons. Instead, there is a fallback for mobile devices. * *See details in mobile fallback section below.*\n- **Video Cropped**<br>As you may understand, for a *background* video to display nicely at any height, on any device, on any screen aspect, the video may be *cropped* appropriately to 'fit' the designated stage area.\n- **Does not work for sidebar layout**<br>Because of the huge technical difference of this layouts, the video background plugin currently only works for the topbar- and slidemenu layouts.\n- **H.264 encoded mp4 format**<br>Video in HTML5 is limited by various file formats and codecs. To be sure that your video displays properly across all browsers, the video should be encoded in H.264 codec, in mp4 format [[ref]](http:\/\/caniuse.com\/#feat=mpeg4).\n- **2MB Upload Limit**<br>Your host *may* have a 2MB upload limitation, in which case you would need to upload large video files by FTP into appropriate folders.\n- **Browser remembers play-state**<br>If a visitor clicks to \"pause\" the video, the video will also be paused next time the page loads. This is just common sense.\n- **Results of slow internet**<br>If your video file is large, and the visitor is on a relatively slow connection, they may see the video start- and stop frequently while buffering.\n- **Autoplay disabled**<br>Some visitors have simply disabled autoplay from their browser, in which case the video simply won't autoplay. \n- **Loop stitch**<br>Don't expect the video loop to stich seamlessly on all browsers, even if your video is made to do so. Depending on the browser, it might take several milliseconds before the video starts re-playing.\n<\/div>\n\n## Mobile Fallback\nFor several obvious reasons, background-video will not display for mobile devices, and will instead display the poster image (or poster-mobile image), which is an acceptable fallback.\n<div class=x-list markdown=1>\n- Most mobile devices (including iphone\/ipad) do not allow autoplay, mainly to prevent unsolicited cellular download. There is no \"fix\" for this.  \n- Even if the video was loaded in pause-mode, clicking the native play button would open the video in a player-window, so it wouldn't be a background video.  \n- A video may require too much bandwidth, and will often stutter on mobile.  \n<\/div>\n\n## Recommendations\nThe background-video plugin is intended to be used as a motion-background to compliment the page content. Don't use video just because you can or because it looks nice. We recommend using a short, subtle video loop, without sound, lasting only a few seconds, and compressed at acceptable file size.\n\n## Useful links\n<http:\/\/thenewcode.com\/777\/Create-Fullscreen-HTML5-Page-Background-Video#considerations>  \n<http:\/\/www.sitepoint.com\/designing-with-video-backgrounds>  \n<http:\/\/www.punkchip.com\/autoplay-is-still-bad-for-all-users>\n\n\n",
    "plugins": {
        "video_background": {
            "src": "__yellowflowers.mp4"
        }
    }
}