This is a simple django-cms plugin that provides responsive, full screen background media with text.

A HTML div container is added to the page that can either have a background image or video. Video backgrounds are enabled by making use of the Vide jQuery plugin. Child plugins are enabled, so text and/or hyperlinks etc can be placed on top of the background media, see usage below for more details.

To view a simple demonstration of a video background or image background that can be achieved with this plugin, view my demo.

To install:

pip install djangocms-background-media

Then add djangocms-background-media to your installed apps:

INSTALLED_APPS = [
    ...
    'djangocms_background_media',
    ...
]

If you're not already using django-filer and easy-thumbnails then these too will need to be added to your installed apps:

INSTALLED_APPS = [
    ...
    'easy_thumbnails',
    'filer',
    ...
]

And run the migrations:

./manage.py migrate

The package assume that jQuery has been added to the site already. So if you're not using, please add to you templates/base.html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

The background media plugin is added to a page and configured accordingly. If a background image is all that is required, then an image is uploaded, the container height can be updated, and optional overlay added and that's all. If a video background is required then a video is uploaded and a video poster should be provided, as this is what will be displayed for mobile browsers. You're also able to pass a JSON config object if you wish. More details of the video plugin can be viewed on Vide.

I have provided the ability to link an optional style sheet to the page, so that the plugin will work "out of the box", if you don't link the style sheet you will need to provide your own styling.

To add text, links or another plugin to the background media plugin, simply add the child plugins you desire.