{"id":31,"date":"2010-08-15T19:03:46","date_gmt":"2010-08-15T19:03:46","guid":{"rendered":"http:\/\/demo.studiopress.com\/genesis"},"modified":"2016-10-08T15:57:28","modified_gmt":"2016-10-08T13:57:28","slug":"video-hero","status":"publish","type":"page","link":"https:\/\/sg-demo.com\/amare-basic\/feature-top\/video-hero\/","title":{"rendered":"Video Hero"},"content":{"rendered":"

This is how a background-video in the Feature Top would look like.<\/span><\/h3>\n

Pro:<\/strong> Looks good for sure.
\nCon:<\/strong> With a video, you pay a high price for “looking good”, and that is loading time. So be sure that video actually contains a message regarding your business, otherwise it doesn\u00b4t make much sense.<\/p>\n

Hint:<\/strong> Take care the video is short and optimized and loop it. Also note that on a light background, your menu won\u00b4t be readable anymore…
\nSome WordPress installations\/hostings do have an upload size restriction so you might run into troubles with uploading large video files. There are tutorials out there how to deal with that but on shared hostings, those might not work either. Read here:
\nhttp:\/\/www.wpbeginner.com\/wp-tutorials\/how-to-increase-the-maximum-file-upload-size-in-wordpress\/<\/a><\/p>\n

STEPS:<\/span><\/h3>\n

1.) Install the plugin.<\/strong> I picked the following one because it\u00b4s slick and easy to deal with. Also it does one thing that seems important to me: On mobiles, you shouldn\u00b4t load large video files by default, also some mobiles won\u00b4t display them anyway which might cause your Feature Top to collapse or just be empty\/display an error message. You don\u00b4t want that. The plugin cares for that case: It will display an image to replace the video. Double advantage: Less loading and never looks bad.<\/p>\n

Here\u00b4s the link to the plugin in use: https:\/\/wordpress.org\/plugins\/video-background\/
\n<\/a>And here\u00b4s an online converter – you can use it to convert mp4 video files into webm files: http:\/\/www.clipconverter.cc\/
\n<\/a>(You can actually reccord, convert and download nearly any audio or video URL to common formats)<\/div>\n

2.) Get the video files.<\/strong> Be sure to read licenses and care for copyright infringement. Convert them – you\u00b4ll need an mp4 and an webm (as well as the replacement image). Upload them to your WordPress installation via Media Manager. You\u00b4ll need the full URL\u00b4s of all three.<\/p>\n

3.) Drag a textwidget into Feature Top<\/strong> and set up the text you want to display on top of the background video (if so). Save.<\/p>\n

4.) Drag another textwidget into Feature Top<\/strong> (needs to be UNDER the first one) and set up the video shortcode. Please read the plugin\u00b4s FAQ page!<\/a> Save.<\/p>\n

You\u00b4ll find my code samples for those widgets here.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

This is how a background-video in the Feature Top would look like. Pro: Looks good for sure. Con: With a video, you pay a high price for “looking good”, and that is loading time. So be sure that video actually contains a message regarding your business, otherwise it doesn\u00b4t make much sense. Hint: Take care … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":929,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"_links":{"self":[{"href":"https:\/\/sg-demo.com\/amare-basic\/wp-json\/wp\/v2\/pages\/31"}],"collection":[{"href":"https:\/\/sg-demo.com\/amare-basic\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sg-demo.com\/amare-basic\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sg-demo.com\/amare-basic\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sg-demo.com\/amare-basic\/wp-json\/wp\/v2\/comments?post=31"}],"version-history":[{"count":7,"href":"https:\/\/sg-demo.com\/amare-basic\/wp-json\/wp\/v2\/pages\/31\/revisions"}],"predecessor-version":[{"id":1204,"href":"https:\/\/sg-demo.com\/amare-basic\/wp-json\/wp\/v2\/pages\/31\/revisions\/1204"}],"up":[{"embeddable":true,"href":"https:\/\/sg-demo.com\/amare-basic\/wp-json\/wp\/v2\/pages\/929"}],"wp:attachment":[{"href":"https:\/\/sg-demo.com\/amare-basic\/wp-json\/wp\/v2\/media?parent=31"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}