Video Lightbox and Opt-in Welcome Widget section in Infinity Pro

In my tutorial requests Trello board, a user asked:

Hello, I'm looking to add to add an opt in form under header using the Infinity Pro theme, and embed a video with image background showing. Does require adding a welcome widget? For example the website that has the look I would like to create is http://nishamoodley.com/ that shows on homepage as well as on other pages of the website. It also shows different images but plays the same website. Can you please create a tutorial on this, I think it's a beautiful design. Many thanks! :)

In this tutorial for Infinity Pro, we are going to

• register a custom Welcome Widget section
• set up a Welcome Widget Image image field using Advanced Custom Fields and set the field group to appear on static Pages so that each Page can have its own unique background image for the above section.
• show Welcome Widget section below header and set the background image URL to the one from custom field's value (if present), otherwise to that of a fallback image.
• drag a Genesis eNews Extended widget into the widget area and write CSS to align it to the right on desktop widths and to the bottom at smaller widths using Flexbox.
• drag a text widget into the widget area having the HTML to display video in a lightbox using Modaal jQuery plugin and position this absolutely so it appears in the middle on the left portion.
• enqueue the js and css files needed for Modaal and initialize it.

Screencast:

Step 1

Upload modaal.min.js to Infinity Pro's js directory.

Upload modaal.min.css to Infinity Pro's css directory.

Step 2

Install and activate ACF.

Create a custom field group named say, Page Meta having a Welcome Widget Image image field. Set the return value to Image ID.

Set the field group to appear on static Pages.

Step 3

Add/edit static Pages and upload/select your desired Welcome Widget's background image in the Page Meta meta box.

To make this work on homepage, create a blank Page titled say "Home", set it as Front Page at Settings > Reading. Then edit the Page and set the Welcome Widget's background image.

Step 4

Edit js/global.js.

Above the last line in the file i.e., above })(jQuery);, add