This guide provides instructions for adding video content to your articles and pages. There are two primary methods: uploading video files directly to your website’s Media Library or embedding content hosted on third-party platforms like YouTube or Vimeo.

---

Method 1: Direct Video Uploads

You can now upload video files directly to your WordPress Media Library. This is ideal for short clips, breaking news, or local highlights that you wish to host natively on your site.

Technical Requirements and Constraints

To ensure optimal performance and compatibility, please adhere to the following specifications:

• Maximum File Size: 256MB.
• Supported Formats: .mp4, .mov, and .webm.
• Filename Sanitization: Before uploading, you must sanitize your file names to prevent playback errors.
  • No special characters: Do not use symbols like /, ?, #, !, or @.
  • No spaces: Replace all spaces with dashes (-) or underscores (_).
  • Example: Rename "high school game.mp4" to "high-school-game.mp4".

How to Insert a Direct Upload

1. Open the article or page editor.
2. Add a new block and search for the Video block.
3. Select Upload to bring a new file from your device, or Media Library to select a previously uploaded clip.
4. Once selected, the video will be embedded directly into your content.

Adding the video block

Video Content in the Media Library

Mobile Workflow

Our platform is fully mobile-ready. You can capture video on a smartphone and upload it directly to an article via your mobile browser. Ensure the file meets the size and naming requirements before uploading from your device's gallery.

Mobile Video Upload (Safari on iOS)

---

Method 2: Third-Party Video Embedding

If your video is hosted on an external platform, you can embed it using a dedicated block or a direct link. This is recommended for long-form content to preserve site storage and performance.

Option A: The YouTube Block (Recommended)

For YouTube content, use the dedicated block to ensure the player is responsive and correctly formatted.

1. In the Block Editor, click the (+) icon and search for the YouTube block.
2. Paste the URL of the YouTube video into the input field.
3. Click Embed.

Adding the YouTube Block

Option B: Automatic Embedding (URL Pasting)

WordPress has built-in support for major video platforms (YouTube, Vimeo, etc.).

1. Copy the URL of the video from your browser’s address bar.
2. Paste the URL directly into the editor on its own line.
3. The editor will automatically convert the link into a live video player.

Option C: Custom HTML or Classic Editor

If you are using the Classic Editor or a hosting provider that does not support automatic embedding, you must use an embed code.

1. Copy the Iframe or HTML embed code from the host site (usually found under a "Share" button).
2. In the Block Editor: Add a Custom HTML block and paste the code.
3. In the Classic Editor: Switch from the "Visual" tab to the "Text" tab and paste the code exactly where you want the video to appear.

Custom HTML Block for Video embed

Classic Editor Video Embed

---

Best Practices

• Storage Management: Use direct uploads for short, high-impact clips (e.g., sports highlights, 30-second interviews). For full-length meetings or documentaries, we recommend hosting on YouTube and embedding the link.
• Accessibility: To assist users with visual or hearing impairments, consider adding a brief text summary or transcript immediately below the video block.
• Advertising: Direct video uploads can also be used within articles to showcase local video advertisements, such as property walkthroughs for realtors or vehicle showcases for local dealerships.

The post Adding Videos to Articles or Pages first appeared on Our-Hometown.

Find the widget area you’d like your video to appear in or where your current video is already placed.

Click the name of the widget area.

If you are placing a new video widget click ” + Add a Widget” & search for or scroll to find the “Video” widget.

If you are replacing, click the arrow on the “Video” widget to expand the window.

Click “Add Video” for a new video or “Replace Video” for editing.

On the left, choose “Insert from URL” – using YouTube for video is our recommended method as it provides the best viewing experience for readers, and also gives you exposure on the second largest search engine in the world (YouTube).

Paste the link/URL of the YouTube video (not the embed URL – the ACTUAL URL of the page – as if you were watching the video on YouTube) in the box under “Insert from URL”

On the bottom right, click “Add to Widget”

Add or update your title for the widget, if desired. Your video is now placed on site. If you are satisfied with your changes, click “Save & Publish” at the top of the right-hand menu. If you want to cancel your changes, hit the “X” button to the left of “save & publish” to leave the customize screen.

The post Displaying a YouTube Video on the Front Page first appeared on Our-Hometown.

First you will need to log into Google or create a new Google account if you do not already have one. To obtain an API key go to https://console.developers.google.com/project. Once you are on this page you can create a project that uses an API key.

Click ‘Create Project’.

Enter a project name. In this example we’ll use OHT Videos.

Agree to the Terms of Service and click ‘Create’.

It takes a moment while the project is created and the screen refreshes. After the screen refreshed click ‘APIs and auth’ on the left hand side menu. You’ll then see the submenu below titled ‘APIs.’ Click ‘APIs.’

Click the link for YouTube Data API

Then on the page that appears, click ‘Enable API’.

Next, in the ‘APIs and auth’ submenu click Credentials. Under Public API access, click ‘Create New Key’.

A popup box will appear with four choices. Choose ‘Server Key’.

On the next popup box, ‘Create a server key and config allowed IPs’, click the ‘Create’ button.

Your API key will be created. Copy the API key.

Paste it in to the Google Developer API Key field on your site’s MaxGalleria: Settings page > YouTube, towards the bottom of the screen.

Once you have your Google Developer API Key saved, MaxGalleria will allow you to add videos to your video galleries.

The post MaxGalleria – Setting up YouTube API for Video Gallery Integration first appeared on Our-Hometown.

After turning on the Vimeo add-on, you will be able to upload Vimeo videos along with YouTube videos in any of your video galleries.

Adding Videos

Navigate to your video gallery and click Add Videos. You can now see the Vimeo option is supported for URLs.

After adding a URL just click Add to Gallery and the thumbnails for the videos will be added to your gallery along with the URL and the title.

Note: Be sure to use the plain Vimeo URL and not a URL that has /channels/ in it or the video will not load properly.

Good URL: http://vimeo.com/104894544
Bad URL: http://vimeo.com/channels/staffpicks/85517984

The post MaxGalleria – Vimeo first appeared on Our-Hometown.

You will be able to see it in the Templates for your galleries, once it is turned on. The showcase features one large video on top of the thumbnails that changes whenever the thumbnails are clicked.

Adjusting Gallery Settings

Gallery Skin: Video Showcase comes packaged with a few standard skins. Currently there are, No Border, Picture Frame, Portal, Portal Dark, Standard, Standard Dark, Tightness and Tightness Dark.

Thumbnail Columns: Depending on how many videos you have in your gallery you may want a different amount of columns. MaxGalleria defaults to five columns, but you can choose anywhere between 1 and 10. Whatever column selection you make, your gallery will stick to that and is responsive, so you’ll have the same number of columns on all devices (larger numbers will adjust automatically on mobile).

Thumbnail Shape: Three options here with Square, Landscape and Portrait. Landscape is especially nice for the Video Showcase as videos tend to be in a 16:9 ratio already, converting well to the Landscape shape.

Thumbnail Captions Enabled: For each image you have the ability to add/edit captions. If you’d like those captions to appear when the gallery loads, you’d want to check the checkbox for this option.

Thumbnail Captions Position: The location of the captions when the gallery loads on the page. Options are Below Image or Bottom of Image.

Thumbnail Opacity Enabled: If enabled, the thumbnails will appear at an opacity level of 0.7 unless it is the active photo which will set the thumbnail to opacity of 1.

Thumbnail Custom Image Class: Adds a class to every image.

Thumbnail Custom Image Container Class: Adds a class to the image container.

Thumbnail Custom Rel Attribute: Changes the Rel Attribute of the image. The default allows clicking prev/next inside the lightbox to get between the images.

Gallery Description

For each gallery you can create a description that discusses your gallery or adds extra information for anyone viewing the gallery. If enabled, you can choose to put the description above or below your gallery (default is above).

The post MaxGalleria – Video Showcase first appeared on Our-Hometown.

Once you’ve clicked into albums you can add new albums.

Albums were created to allow groupings of galleries, so when creating a new album, give it a name and then choose from your existing galleries that you would like to place in your album.

With the galleries selected, click “Add to Album” and your galleries will appear. If you look at your album now, you’ll see that the first image of each gallery is shown and the title is a link into the specific gallery.

Options

Album Layout – Choose between either list or grid view. List will show a vertical list of your galleries, while grid will make a grid of the featured image and title.

Gallery Thumbnail Style – Adjusts the style of the thumbnail images for your galleries. Option includes: Borders, Stacked, Taped Corners, Tucked Corners or None.

Gallery Thumbnail Size – You can change the size of your gallery thumbnails to one of the presets: 50×50, 100×100, 150×150, 200×200 or you can create a custom size which can be adjusted in the two options below (disabled if Custom is not selected).

Gallery Titles Tag – Select the HTML element that you’d like the Gallery Titles to be wrapped in. This is a useful option if you’ve already got elements styled a certain way.

Gallery Titles Tag Custom Class – If you have a specific class you’d like to use for your titles you can add it here and style accordingly.

Gallery Descriptions Tag – Same as the Titles tag, you can select the HTML element wrapper for the description of the galleries.

Gallery Descriptions Tag Custom Class – Add a class to the description to use a particular style set.

Advanced

The only option in Advanced is to reset to the default settings.

Other Options

You can also set a featured image, categorize your album or give your album a particular tag.

Shortcodes

The shortcode for the album can be found above the featured image and has two options. Call the album by the ID or by the name.

[maxalbum id="29"]
[maxalbum name="my-computer"]

The post MaxGalleria – Albums Guide first appeared on Our-Hometown.

If you’d like to use your new gallery in a post or page, you can grab the shortcode in the bottom right of your Gallery Edit page, or use the “Add Gallery” option in the TinyMCE for your post.

From Galleries you have several options. You can go to your Galleries overview page, import a NextGen Gallery into MaxGalleria, adjust your MaxGalleria defaults, or get Support.

For now, let’s take a look at the Galleries page. Once there you can see your entire list of galleries as well as Add New galleries. Click Add New.

Adding Images

When you first get into your Gallery editor you’ll be prompted to select an Image or Video gallery. Currently MaxGalleria does not support galleries with both images and videos in the same gallery. First, create a title for your gallery. In this example we’ll use “My First Gallery.”

Adding Images is the same as in a post or page. Using the standard WordPress media library you can add previously added images or upload new images to your gallery. The larger the image size, the longer it will take to load so be patient as the images are getting loaded in.

Once the images have loaded you could press Publish and be done, or you can check out the other gallery options. We’ll get to those in a moment, but let’s talk about Videos.

Adding Videos

Much like Images, to add Videos, just click “Add Videos” and you’ll get a similar lightbox. Straight out of the box you’ll have the ability to add YouTube videos to your gallery by copying and pasting the video URL. You can add multiple videos at a time, one URL per line.

After clicking “Add To Gallery” your gallery will refresh and a thumbnail from the video or videos will appear as your gallery thumbnail images.

Adjusting Gallery Settings

With the core of MaxGalleria, you have the Image Tiles gallery ready for use. Below are the basic options available to both Video and Images in the Tile layout:

Gallery Skin: MaxGalleria comes packaged with a few standard skins. Currently there are, No Border, Picture Frame, Portal, Portal Dark, Standard, Standard Dark, Tightness and Tightness Dark. Each skin is different in some way, but if you can’t find one that suits your gallery, you can make your own (more on that later).

Thumbnail Columns: Depending on how many videos or images you have in your gallery you may want a different amount of columns. MaxGalleria defaults to five columns, but you can choose anywhere between 1 and 10. Whatever column selection you make, your gallery will stick to that and is responsive, so you’ll have the same number of columns on all devices (larger numbers will adjust automatically on mobile).

Thumbnail Shape: Three options here with Square, Landscape and Portrait. Landscape is especially nice for videos which tend to be in a 16:9 ratio already, converting well to the Landscape shape.

Thumbnail Captions Enabled: For each image you have the ability to add/edit captions. If you’d like those captions to appear when the gallery loads, you’d want to check the checkbox for this option.

Thumbnail Click Opens: End result of a user clicking the thumbnails in the gallery. Options are Lightbox Image, Image Page (Attachment Page), Image Link (the link you’ve set for that image) and Original Image (direct URL of image).

Thumbnail Click New Window: For all options other than Lightbox Image, this indicates where the link of the thumbnail will be opened, a new window or the same window. Unchecked it will open in the same window.

Thumbnail Custom Image Class: Adds a class to every image.

Thumbnail Custom Image Container Class: Adds a class to the image container.

Thumbnail Custom Rel Attribute: Changes the Rel Attribute of the image. The default allows clicking prev/next inside the lightbox to get between the images.

Lightbox Captions Enabled: Much like the captions above, this indicates whether or not, when the lightbox is open, if the captions will show.

Images Per Page: To have video or image tiles appear on more than one page, enter a number here to turn on pagination and to indicate the maximum number of images/videos that should appear on each page.

Lazy Load Enabled: Allows images to be loaded as needed as they come into view in the browser; it increases page load times especially for pages with large images or with a large number of images in a gallery.

Lazy Load Threshold: The number of pixels above the image when lazy loading should begin. The default setting is 0 or none.

Magnific Popup Options

(These settings apply when Thumbnail Click Opens is set to Lightbox Image.)

Align Top Enabled: This will align the top of the image to the top of the page rather than center to image vertically.

Close on Background Click Enabled: Will close the lightbox when the user clicks on the lightbox background.

Close with Escape Key Enabled: Closes the lightbox popup when the escape key is pressed.

Fixed Content Position: The ‘Auto’ selection will set the lightbox’s popup position to be fixed (it can not be scrolled up or down) if the browser supports that property. Selecting ‘On’ will set the popup position to be fixed even if the browser does not support it. Selecting ‘Off’ will allow the lightbox’s popup to be scrolled up or down.

Hide Close Button: Removes the close button that appears on the top right of the lightbox popup.

Lightbox Captions Enabled: Will display the image’s caption below the image in the lightbox.

Overflow Y: When Fixed Content Position is set to ‘Auto’ or ‘On’ this option will display a vertical scroll bar when it is set to ‘Auto’ or ‘Scroll’.

Popup Custom Class: Adds a class to the popup that can be used for adding CSS styling to the popup.

Removal Delay: Specifies the amount of time, in milliseconds, before removing the popup.

Retina Images Enabled: This option allows for the display of high resolution images in place of normal resolution images on high-dpi screens with different a devicePixelRatio. To accomplish this first add normal resolution images to a gallery. Then upload matching high resolution images directly to the WordPress media library. The high resolution images should have file names ending in ‘@2x’; example: image.jpg & image@2x.jpg. The image should have the same URL path as their matching normal resolution images.

Vertical Fit Enabled: Will shrink the size of the image proportionally according to the available height.

Zoom Enabled: Displays a zoom effect when opening and closing a lightbox image. This effect is not available for video tiles.

Zoom Easing: Specifies the CSS3 type of easing. Choices include ease-in-out, ease-in, ease-out, ease and linear.

Zoom Duration: Sets the amount of time for the zoom effect in milliseconds.

Gallery Enabled: When the gallery option of the lightbox is enabled the user can move between the different images or videos in the current gallery by using previous and next arrow buttons that are displayed in the light box.

Gallery Options – these are only available when the Gallery Enabled option is checked.

Navigate By Image Click Enabled: When this option is checked clicking on an image will display the next image in the gallery.

Arrow Button Markup: This option allows you to specify the HTML and CSS selectors of the arrow buttons. The default is “<button title=’%title%’ type=’button’ class=’mfp-arrow mfp-arrow-%dir%’>”. Note that this field does not accept double quote marks. ‘%title%’ will be replaced by the image’s caption if there is one and ‘%dir%’ will be replaced by arrow direction, either ‘left’ or ‘right’.

Left Button Title: Specifies the title attribute of the left button. The default is ‘Previous (Left arrow key)’

Right Button Title: Specifies the title attribute of the right button. The default is ‘Next (Right arrow key)’

Counter Markup: Specifies the HTML and CSS selectors of the counter text on the bottom, right side of the popup. Note that this field does not accept double quote marks. The default markup is “<span class=’mfp-counter’>%curr% of %total%http://dimsemenov.com/plugins/magnific-popup/documentation.html

Gallery Description

For each gallery you can create a description that discusses your gallery or adds extra information for anyone viewing the gallery. If enabled, you can choose to put the description above or below your gallery (default is above).

The post MaxGalleria – Basic Image & Video Guide first appeared on Our-Hometown.