Panoramic Premium allows you to display a header video on your homepage.
Deactivating the Slider
If you wish to have a header video on the homepage of your site rather than a slider or header image you must ensure to disable the slider as the slider takes priority over the header video and will always display if active. To deactivate the slider navigate to Appearance > Customize > Slider and select “None” from the Slider dropdown.
Setting a Header Video
You have 2 options when setting a Header Video – you can either upload a video in mp4 format or you can enter a YouTube video URL. If you choose to upload a video please be aware that the file size is capped at 8MB.
To set a Header Video to display on your homepage navigate to Appearance > Customize > Header Media.
Enabling Audio
While enabling audio to autoplay on a website is discouraged as it can be annoying to users this can be done by navigating to Appearance > Customize > Header Media and disabling the Mute the header video setting.
Formatting the Overlay Text
Any text entered into the “Text” field will be overlayed on the header video. Wrapping your overlay text in <h1>
or <h2>
tags will give it a heading style and wrapping it in <p>
tags will give it a body style. For example the following HTML will produce the same result as the first slide on the Panoramic demo site:
<h2>Beautiful. Simple. Fresh.</h2>
<p>
Panoramic is a stunning new theme that provides an easy way for companies or web developers to spring into action online!
</p>
Adding a Button
To add a button to your overlay just add a normal HTML link to the URL you would like the button to direct to and give it a class of “button” like this:
<a href="https://www.outtheboxthemes.com/" class="button">Button Text</a>
Mobile Devices
Unfortunately header videos do not autoplay on mobile due to the limited bandwidth that many people are dealing with when browsing on a mobile device and slapping someone who is using mobile data with an unexpected 40MB video download is bad netiquette. We do however have a fallback for this whereby the header image that has been set will be shown in place of the header video on mobile devices. This can also be set under Appearance > Customize > Header Media.