Background Video

Permalink Browser Info Environment
Hi James,

I would like to share some things I found using a video background that may be helpful to you and my fellow users of your theme.

Video Size:
I started with a video file that was far too large (14Mb). I was finally able to reduce it to 4Mb to get fairly good results by doing the following:.
- Clip length to about 25 sec
- Reduce resolution to 640x400
- Eliminate (not mute) audio track
- Encode using MP4/H264

Android Phone:
I you remember I reported that I had trouble viewing the video on my android phone (Samsung Grand Prime). I have since specified an IOS fallback image and as stated above reduced the video size to get the following results on several browsers.

Chrome - When the video file size is too large a black background is displayed. The 4Mb video will display but doesn't play smoothly. It seems to use the IOS fallback image if available. Perhaps better results could be achieved on Chrome using WebM/V8 encoding?

Mozilla - On Mozilla an unclickable play button is displayed instead of the video. I suppose it's unclickable because the other content is on top and so the clicks never reach the button.

AdBlock - The AdBlock browser, I believe is a Mozilla variant with AdBlock plus rolled in. It plays the 4Mb video perfectly. So probably there is a secret setting that would make Mozilla work also.

Samsung - The default Samsung browser just displays a black background instead of the video.

Future Enhancements:
Here are a couple of ideas that may be worth considering for future versions.

1. Documentation - In addition to stating that the theme automatically adjusts to resolution of the video and images it would be useful to have some recommendations, guidelines, or tips for each of the target areas.

2. Video Load - While browsing the net for recommended background video resolutions I came a cross an interesting implementation in which a short video was loaded and played first. While it was playing a second longer looping video loaded and then played after the first. I don't know if something like this is possible in Concrete but it would be cool if it were.

Type: Discussion
Status: In Progress
View Replies:
c5box replied on at Permalink Reply
c5box
Hi,

Awesome feedback. Thank you! I will look for ways to implement your suggestions.

Thanks again,
James
RickJ replied on at Permalink Reply
James,

I have come across some more info on the web that may be helpful to anyone using background video. In this short article the authors talks about file sizes and formats. He discusses potential problems with conversion/transcoding, bandwidth, etc and how to test the video before trying to use it as a background image.

http://thenewcode.com/903/Preflight-Your-Video-For-Delivery-in-HTML...

In another article the same guy describes his HTML/CSS implementation. You obviously have your own implementation but may never the less find it an interesting read.

http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-V...

Best Regards
Rick
daimon replied on at Permalink Reply 1 Attachment
I'd like to add to the discussion about the IE and Edge.

Now I know Microsoft has it's own idea how a web browser should be creating all kinds of problems, but as it's one of the most used I'm wondering if there's a solution for scaling of the video.

Mozilla/Chrome scales the frontpage video just nicely but IE/Edge doesn't seem to render correctly, the video doesn't scale as it should (100% height, cropping the width) but instead it just goes 100% width.

It looks like your own demo does this as well, so I guess it's not just my unawareness in question this time ;)

Is there a solution to this ?

concrete5 Environment Information

# concrete5 Version
Core Version - 5.7.5.8
Version Installed - 5.7.5.8
Database Version - 20160412000000

# concrete5 Packages
Framework Theme (1.4.1).

# concrete5 Overrides
languages/it_IT/LC_MESSAGES/messages.mo, languages/it_IT/LC_MESSAGES, languages/it_IT, languages/es_PY/LC_MESSAGES/messages.mo, languages/es_PY/LC_MESSAGES, languages/es_PY, languages/da_DK/LC_MESSAGES/messages.mo, languages/da_DK/LC_MESSAGES, languages/da_DK, languages/de_DE/LC_MESSAGES/messages.mo, languages/de_DE/LC_MESSAGES, languages/de_DE, languages/ja_JP/LC_MESSAGES/messages.mo, languages/ja_JP/LC_MESSAGES, languages/ja_JP, languages/cs_CZ/LC_MESSAGES/messages.mo, languages/cs_CZ/LC_MESSAGES, languages/cs_CZ, languages/pt_BR/LC_MESSAGES/messages.mo, languages/pt_BR/LC_MESSAGES, languages/pt_BR, languages/tr_TR/LC_MESSAGES/messages.mo, languages/tr_TR/LC_MESSAGES, languages/tr_TR, languages/sv_SE/LC_MESSAGES/messages.mo, languages/sv_SE/LC_MESSAGES, languages/sv_SE, languages/fi_FI/LC_MESSAGES/messages.mo, languages/fi_FI/LC_MESSAGES, languages/fi_FI, languages/el_GR/LC_MESSAGES/messages.mo, languages/el_GR/LC_MESSAGES, languages/el_GR, languages/fr_FR/LC_MESSAGES/messages.mo, languages/fr_FR/LC_MESSAGES, languages/fr_FR, languages/ru_RU/LC_MESSAGES/messages.mo, languages/ru_RU/LC_MESSAGES, languages/ru_RU, languages/it_IT/LC_MESSAGES/messages.mo, languages/it_IT/LC_MESSAGES, languages/it_IT, languages/es_PY/LC_MESSAGES/messages.mo, languages/es_PY/LC_MESSAGES, languages/es_PY, languages/da_DK/LC_MESSAGES/messages.mo, languages/da_DK/LC_MESSAGES, languages/da_DK, languages/de_DE/LC_MESSAGES/messages.mo, languages/de_DE/LC_MESSAGES, languages/de_DE, languages/ja_JP/LC_MESSAGES/messages.mo, languages/ja_JP/LC_MESSAGES, languages/ja_JP, languages/cs_CZ/LC_MESSAGES/messages.mo, languages/cs_CZ/LC_MESSAGES, languages/cs_CZ, languages/pt_BR/LC_MESSAGES/messages.mo, languages/pt_BR/LC_MESSAGES, languages/pt_BR, languages/tr_TR/LC_MESSAGES/messages.mo, languages/tr_TR/LC_MESSAGES, languages/tr_TR, languages/sv_SE/LC_MESSAGES/messages.mo, languages/sv_SE/LC_MESSAGES, languages/sv_SE, languages/fi_FI/LC_MESSAGES/messages.mo, languages/fi_FI/LC_MESSAGES, languages/fi_FI, languages/el_GR/LC_MESSAGES/messages.mo, languages/el_GR/LC_MESSAGES, languages/el_GR, languages/fr_FR/LC_MESSAGES/messages.mo, languages/fr_FR/LC_MESSAGES, languages/fr_FR, languages/ru_RU/LC_MESSAGES/messages.mo, languages/ru_RU/LC_MESSAGES, languages/ru_RU

# concrete5 Cache Settings
Block Cache - On
Overrides Cache - On
Full Page Caching - Off
Full Page Cache Lifetime - Every 6 hours (default setting).

# Server Software
Apache

# Server API
cgi-fcgi

# PHP Version
5.6.24

# PHP Extensions
bcmath, bz2, calendar, cgi-fcgi, Core, ctype, curl, date, dom, ereg, exif, filter, ftp, gd, gettext, gmp, hash, iconv, imagick, imap, ionCube Loader, json, libxml, mbstring, mcrypt, mhash, mysql, mysqli, mysqlnd, openssl, pcntl, pcre, PDO, pdo_mysql, pdo_sqlite, pgsql, Phar, posix, readline, Reflection, session, shmop, SimpleXML, soap, sockets, SPL, sqlite3, standard, suhosin, tidy, timezonedb, tokenizer, uploadprogress, wddx, xml, xmlreader, xmlrpc, xmlwriter, xsl, Zend Guard Loader, Zend OPcache, zip, zlib.

# PHP Settings
max_execution_time - 30
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - -1
max_input_vars - 1000
memory_limit - 512M
post_max_size - 128M
sql.safe_mode - Off
upload_max_filesize - 512M
mysql.max_links - Unlimited
mysql.max_persistent - Unlimited
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
pgsql.max_links - Unlimited
pgsql.max_persistent - Unlimited
session.cache_limiter - <i>no value</i>
session.gc_maxlifetime - 7200
soap.wsdl_cache_limit - 5
suhosin.cookie.max_array_depth - 50
suhosin.cookie.max_array_index_length - 64
suhosin.cookie.max_name_length - 64
suhosin.cookie.max_totalname_length - 256
suhosin.cookie.max_value_length - 10000
suhosin.cookie.max_vars - 100
suhosin.executor.include.max_traversal - 0
suhosin.executor.max_depth - 750
suhosin.get.max_array_depth - 50
suhosin.get.max_array_index_length - 64
suhosin.get.max_name_length - 64
suhosin.get.max_totalname_length - 256
suhosin.get.max_value_length - 512
suhosin.get.max_vars - 100
suhosin.log.phpscript.is_safe - Off
suhosin.memory_limit - 0
suhosin.post.max_array_depth - 50
suhosin.post.max_array_index_length - 64
suhosin.post.max_name_length - 64
suhosin.post.max_totalname_length - 256
suhosin.post.max_value_length - 1000000
suhosin.post.max_vars - 1000
suhosin.request.max_array_depth - 50
suhosin.request.max_array_index_length - 64
suhosin.request.max_totalname_length - 256
suhosin.request.max_value_length - 1000000
suhosin.request.max_varname_length - 64
suhosin.request.max_vars - 1000
suhosin.session.max_id_length - 128
suhosin.upload.max_uploads - 25
opcache.max_accelerated_files - 2000
opcache.max_file_size - 0
opcache.max_wasted_percentage - 5
zend_optimizerplus.max_accelerated_files - 2000
zend_optimizerplus.max_file_size - 0
zend_optimizerplus.max_wasted_percentage - 5

Browser User-Agent String

Mozilla/5.0 (Windows NT 6.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.112 Safari/537.36

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.