Images, Audio, or Video Are Not Loading

Overview

Several KineticHub blocks depend on images, audio files, videos, or external video services.

A media problem can produce symptoms such as:

• An image frame is empty
• A broken-image icon appears
• A block is completely missing from the frontend
• Audio controls appear, but playback does not begin
• The audio duration remains unavailable
• A Video Modal preview appears, but the video does not open
• A YouTube or Vimeo player reports that playback is unavailable
• A self-hosted video displays an unsupported-format message
• Media works for administrators but not logged-out visitors
• Media works on desktop but not mobile
• Files fail after a migration or domain change
• CDN or security settings block the request

First determine whether the problem belongs to:

• The saved block configuration
• The media file
• The media URL
• The server
• The browser
• An external video provider
• A cache, CDN, or optimization service

Identify what is missing

Determine whether the issue affects:

• One media item
• All media inside one block
• All media of one type
• All KineticHub media blocks
• All WordPress media across the website

Only one file is missing

The individual URL, attachment, file permissions, or file format is probably responsible.

All media in one block is missing

Check the block settings, required media, visibility, frontend script, and custom CSS.

All images are missing

Check the uploads directory, CDN, image optimization, domain migration, and server permissions.

All audio or video files fail

Check media formats, MIME types, server range requests, CDN rules, browser support, and security policies.

Media fails across the entire website

The issue is probably not specific to KineticHub.

Investigate the WordPress Media Library, hosting, CDN, HTTPS configuration, and server logs.

Confirm that the media is selected

Open the affected page in the WordPress editor.

Select the KineticHub block and confirm that the required media is still assigned.

Depending on the block, check:

• Image selection
• Audio URL
• Video URL
• Cover image
• Before and After images
• Marquee image list
• Cursor Reveal media
• Split Scroll media items

A media preview visible in an old editor tab does not guarantee that the current attachment URL is still valid.

Save or update the page after confirming the source.

Required media for specific blocks

Some KineticHub blocks intentionally produce no frontend output when required media is missing.

Kinetic Audio Player

Kinetic Audio Player requires a valid Audio URL.

When the audio URL is empty, the frontend player is not rendered.

Kinetic Before/After

Kinetic Before/After requires both:

• Before image
• After image

When either image URL is missing, the public comparison block is not rendered.

The editor may still display an instructional placeholder.

Kinetic Marquee

Kinetic Marquee requires at least one image item.

When the image list is empty, the frontend marquee is not rendered.

Kinetic Video Modal

Kinetic Video Modal requires a valid video URL.

The preview can also use:

• A custom cover image
• An automatically detected YouTube thumbnail

The cover image and playable video source are separate.

A working cover image does not confirm that the video itself can play.

Open the media URL directly

Copy the media URL and open it in a new private browser tab.

A working public media URL should not return:

• 404 Not Found
• 403 Forbidden
• 500 Internal Server Error
• Access denied
• Authentication required
• An expired-link message
• A CDN error page
• A hotlink-protection warning

When the URL does not open directly, repair the file or server access before troubleshooting the KineticHub block.

Check the Network panel

Open browser developer tools and select the Network panel.

Reload the page and filter by:

• Img
• Media
• Fetch/XHR
• The filename
• The media domain

Look for response codes such as:

• 200 — successful response
• 206 — partial-content response, often used for media streaming
• 301 or 302 — redirect
• 403 — request blocked
• 404 — file not found
• 416 — invalid byte-range response
• 500 — server error

Also inspect:

• Request URL
• Response content type
• Redirect destination
• CORS messages
• Content Security Policy messages
• CDN cache status
• Referrer restrictions

Check the browser console

Open the Console and look for:

• Failed resource requests
• Mixed-content warnings
• CORS errors
• Content Security Policy errors
• Unsupported media format messages
• Failed image decoding
• YouTube or Vimeo embed errors
• JavaScript errors from optimization plugins
• Kinetic Video Modal URL warnings

Record the complete message before changing settings.

The first error may explain several later failures.

Image troubleshooting

When an image is missing, check:

• The attachment still exists
• The file exists under /wp-content/uploads/
• The URL uses the current domain
• The URL uses HTTPS
• The CDN contains the file
• File permissions allow public access
• The image optimizer completed successfully
• The browser supports the generated format
• Lazy loading is not leaving the image permanently hidden
• The parent container is not hiding the image

Check image dimensions

An image can load successfully but appear missing when its rendered dimensions are zero.

Inspect:

• Width
• Height
• Aspect ratio
• Parent width
• Parent height
• display
• visibility
• opacity
• Object fit
• Overflow
• Absolute positioning

This is especially relevant for:

• Split Scroll media
• Cursor Reveal floating media
• Before/After comparisons
• Video cover images
• Marquee logos

Confirm that the image element has a measurable width and height.

Before/After images

For the cleanest comparison, use two images with:

• Matching dimensions
• Matching crop ratio
• Matching orientation
• The subject positioned similarly

When one image is portrait and the other is landscape, the selected aspect ratio may crop them differently.

If the complete block is missing, confirm that both image URLs are saved.

If only one layer is missing, open that image URL directly and inspect the image element in the Network panel.

Marquee images

Kinetic Marquee stores a list of image items.

When only some items are missing:

• Open each image URL
• Confirm the attachment was not deleted
• Check whether a migration changed the domain
• Check image optimization output
• Check CDN access
• Remove and reselect the broken item when necessary

The marquee duplicates its visual items to create continuous movement, so one broken source image can appear multiple times.

Cursor Reveal media

Cursor Reveal can display image or video previews for individual items.

When the text list appears but the reveal media does not:

• Confirm that the item has media assigned
• Test hover on desktop
• Test tap on mobile
• Open the media URL directly
• Check pointer overlays
• Check the floating media dimensions
• Check parent overflow
• Check browser console errors

A missing preview is different from a block that does not respond to pointer or touch interaction.

Split Scroll media

When Split Scroll text appears but media does not:

• Confirm that media items exist
• Check desktop and mobile separately
• Review the mobile sticky setting
• Check inline mobile media
• Inspect object fit and media height
• Check parent overflow
• Check JavaScript initialization
• Clear mobile and generated asset caches

When mobile sticky is disabled, media should appear in the normal mobile content flow rather than remaining in the desktop pinned column.

Cover images

A cover image is normally separate from the actual audio or video source.

For example:

• Audio may fail while the cover artwork remains visible
• Video may fail while the poster image remains visible
• A YouTube thumbnail may load while the embed is blocked
• The video can work even when the custom cover image is missing

Test the cover and playable media as separate resources.

Audio Player does not render

Kinetic Audio Player does not produce its normal frontend output when the Audio URL is empty.

Check:

1. Select the Audio Player block
2. Confirm that an audio file is selected
3. Save the page
4. Open the audio URL directly
5. Clear page and generated asset caches
6. Reload the frontend

Do not troubleshoot the play button until the player itself is rendering.

Audio Player appears but does not play

When the player appears but playback fails, check:

• The audio URL opens directly
• The file is publicly accessible
• The browser supports the format and codec
• The server returns a valid audio content type
• The CDN supports media requests
• The file is not corrupted
• The request is not blocked by CORS or security rules
• Another element does not cover the Play button
• The frontend JavaScript loads
• The browser console contains no media error

Test with a small known-working MP3 file to separate a file problem from a block problem.

Recommended audio formats

For broad compatibility, use common web audio formats such as:

• MP3
• WAV
• OGG

Browser and codec support can vary.

MP3 is generally a practical choice for broad browser playback.

WAV files can be much larger and may be unsuitable for normal website delivery.

Optimize the file before uploading it.

Audio preload settings

Kinetic Audio Player supports browser preload options:

• None
• Metadata
• Auto

None

The browser waits until the visitor requests playback.

The duration may not be available immediately.

Metadata

The browser can request basic file information such as duration.

This is a balanced option for many pages.

Auto

The browser may request more of the file before playback.

The browser can still override the request based on its own policies, connection, or power-saving behavior.

Preload affects readiness and network usage. It does not repair an invalid media URL.

Audio duration remains unavailable

The duration can remain unavailable when:

• Preload is set to None
• The file does not provide readable metadata
• The server blocks range requests
• The file is corrupted
• The content type is incorrect
• The network request failed
• The browser has not loaded enough data

Press Play and check the Network panel.

Also test the same file in the browser’s native audio player.

Audio works in one browser only

The file may use a codec not supported consistently across browsers.

The filename extension alone does not guarantee that the internal codec is compatible.

Re-encode the file using a standard web-compatible audio codec and test again.

Audio works for administrators but not visitors

Check:

• Guest page cache
• CDN rules
• Membership restrictions
• Protected uploads
• Hotlink protection
• Security plugin rules
• Logged-out optimization
• Signed media URLs

Test the direct audio URL while logged out.

Video Modal supported sources

Kinetic Video Modal supports:

• YouTube
• YouTube privacy-enhanced domains
• Vimeo
• Direct self-hosted MP4 files
• Direct self-hosted WebM files
• Direct self-hosted OGG video files

Unsupported or malformed URLs are rejected rather than being inserted as arbitrary iframe sources.

Video URL validation

For external video services, use normal URLs from supported domains such as:

• youtube.com
• youtu.be
• youtube-nocookie.com
• vimeo.com

Do not use:

• A page containing the video instead of the video URL
• A shortened URL from an unsupported service
• A generic cloud-storage sharing page
• An HTML page URL
• An iframe code snippet
• A URL from an unsupported video platform

Paste only the actual supported video URL into the block setting.

Direct self-hosted video URLs

For self-hosted video, use a direct file URL ending in:

• .mp4
• .webm
• .ogg

Example:

https://example.com/wp-content/uploads/video/demo.mp4

Do not use a Media Library attachment page or a cloud-storage preview page.

The current Video Modal validator identifies local video sources from their final file extension.

A signed URL or CDN URL ending with query parameters may not be recognized as a direct local video source.

When possible, use a clean public URL ending with the supported extension.

Video Modal preview appears but nothing opens

The cover and play trigger can render before the actual player is created.

Kinetic Video Modal creates the YouTube, Vimeo, or native video element after visitor interaction.

When the preview appears but clicking does nothing:

• Confirm the video URL
• Check the browser Console
• Check whether an overlay blocks the trigger
• Disable JavaScript delay
• Confirm the Video Modal frontend script loads
• Test outside the current parent container
• Check Content Security Policy
• Test while logged out

Because the player is created after interaction, the video request may not appear in the Network panel until the play trigger is activated.

Unsupported video format message

This normally means the block could not produce a valid playable source from the supplied URL.

Check:

• Supported domain
• Correct YouTube or Vimeo URL
• Direct file extension
• Invalid query parameters
• Misspelled URL
• Missing protocol
• Redirect to an unsupported destination

Test with a standard YouTube URL or a direct MP4 URL.

YouTube video does not play

Check whether:

• The URL contains a valid video ID
• The video is public or unlisted
• The owner allows embedding
• The video has not been removed
• The video is not age-restricted
• Geographic restrictions apply
• A privacy or ad-blocking extension blocks the embed
• Content Security Policy blocks YouTube
• A cookie-consent tool blocks the iframe until consent

Test the same URL in a normal browser tab and in a standard WordPress Embed block.

When embedding is disabled by the video owner, KineticHub cannot override that restriction.

YouTube thumbnail is missing

Kinetic Video Modal can automatically detect YouTube thumbnails.

It also includes fallback handling when the highest-resolution thumbnail is unavailable.

When the thumbnail remains missing:

• Confirm the YouTube video ID is valid
• Check whether external images are blocked
• Check Content Security Policy
• Check privacy or consent tools
• Use a custom cover image
• Inspect the thumbnail request in the Network panel

A custom cover image provides more control over branding and cropping.

Vimeo video does not play

Check whether:

• The Vimeo URL contains a valid numeric video ID
• The video still exists
• Embedding is permitted
• Domain-level embed restrictions are active
• Privacy settings allow playback
• Content Security Policy allows Vimeo
• A consent tool blocks the iframe

Test the original Vimeo URL while logged out.

Private or domain-restricted Vimeo videos require matching provider settings.

Self-hosted video does not play

Check:

• Direct file URL
• Supported file extension
• Browser-compatible codec
• Correct video MIME type
• File size
• Server range-request support
• CDN compatibility
• HTTPS
• File corruption
• Mobile browser support

MP4 is usually the most practical starting format, but the internal video and audio codecs must also be supported by the browser.

A file renamed to .mp4 is not necessarily a valid MP4 video.

Self-hosted video shows controls but remains black

Possible causes include:

• Unsupported video codec
• Unsupported audio codec
• Corrupted file
• Missing metadata
• Invalid dimensions
• Server response problems
• Browser hardware-decoding issue
• Video starts on a black first frame

Test the direct video URL in the same browser.

Re-encode the video using a standard web-compatible format when necessary.

Autoplay restrictions

Modern browsers can restrict autoplay, particularly when video contains sound.

Kinetic Video Modal begins playback after a visitor activates the play trigger, which normally provides the required user interaction.

When autoplay still fails:

• Confirm the click reaches the trigger
• Test muted playback
• Check mobile browser behavior
• Check browser permissions
• Check provider restrictions
• Check console messages

Do not rely on autoplay as the only method of accessing important video content.

Mixed content

A page loaded over HTTPS should not request media through HTTP.

Example of an insecure media URL:

http://example.com/wp-content/uploads/audio.mp3

Use:

https://example.com/wp-content/uploads/audio.mp3

Browsers may block insecure images, audio, video, or iframe content on a secure page.

After moving a site to HTTPS:

• Update WordPress URLs
• Replace old media URLs
• Clear caches
• Purge CDN assets
• Check database migration results
• Test page source and Network requests

Domain migration problems

Media URLs may remain connected to an old domain after moving the website.

Check for:

• Development domain
• Staging domain
• Old production domain
• HTTP URLs
• Old CDN hostname
• Temporary hosting URL

Use a safe WordPress migration or search-and-replace process.

Do not perform a plain text database replacement without preserving serialized WordPress data.

After migration:

1. Save WordPress permalinks
2. Clear caches
3. Purge CDN
4. Open each affected media URL
5. Reselect media when necessary

CDN problems

A CDN can block or incorrectly serve media because of:

• Missing file synchronization
• Incorrect origin URL
• Expired cache
• Wrong content type
• Hotlink protection
• Range requests not supported
• Query-string handling
• Signed URL expiration
• HTTPS certificate problems
• Geographic restrictions

Temporarily test the original WordPress uploads URL without the CDN.

When the origin works but the CDN fails, repair the CDN configuration rather than changing KineticHub.

Signed and temporary media URLs

Some storage systems generate URLs that expire.

A block may work immediately and fail later when the token becomes invalid.

Avoid temporary URLs for permanent page content.

Use a stable public media URL or a storage integration that refreshes protected links correctly.

This is particularly important for:

• Audio Player
• Self-hosted Video Modal sources
• Cover images
• Split Scroll media
• Cursor Reveal media

Hotlink protection

Hotlink protection can block requests based on the referring page or domain.

Possible symptoms include:

• Media URL opens directly but fails when embedded
• Media works on the original domain but not staging
• CDN returns 403
• Images appear only for administrators

Allow the current website domain in the hotlink-protection configuration.

Also allow the staging domain during testing when appropriate.

Cross-origin restrictions

Media hosted on another domain may be affected by cross-origin policies.

Potential problems include:

• Audio or video playback failure
• Canvas security restrictions
• Blocked font or image requests
• Missing access-control headers
• Credential requirements

The external server must allow the request.

KineticHub cannot change response headers controlled by another server or CDN.

Content Security Policy

A Content Security Policy can restrict sources for:

• Images
• Audio
• Video
• YouTube iframes
• Vimeo iframes
• Scripts
• Media connections

Check console errors mentioning directives such as:

• img-src
• media-src
• frame-src
• child-src
• script-src

Allow only the required trusted domains.

Do not disable the complete policy as a permanent repair.

Cookie-consent and privacy tools

A consent tool may block external YouTube or Vimeo embeds until the visitor accepts a category such as Marketing or External Media.

Possible symptoms include:

• Cover image visible
• Clicking Play produces no iframe
• Player appears only after consent
• Logged-in administrators bypass the restriction
• Console shows a blocked frame

Check the consent plugin’s YouTube and Vimeo integration.

KineticHub cannot bypass consent rules configured by the website administrator.

Security plugins and firewalls

Security tools can block:

• REST requests
• External embeds
• Media extensions
• Query parameters
• Large files
• CDN hostnames
• Direct access to uploads
• Suspicious iframe URLs

Check security logs and firewall events.

Temporarily test the specific rule on staging rather than disabling the complete security system.

Lazy loading

Lazy loading can delay images and videos until they approach the viewport.

Normally this improves performance.

Problems can occur when another plugin:

• Replaces the media URL incorrectly
• Leaves a placeholder permanently visible
• Changes the expected HTML structure
• Delays background images indefinitely
• Processes duplicated Marquee items incorrectly
• Hides Split Scroll media before initialization

Temporarily disable third-party lazy loading for the affected media.

Native browser image lazy loading does not normally require removal.

Image optimization

Image optimization tools can replace source files with:

• WebP
• AVIF
• Resized variants
• CDN URLs
• <picture> markup
• Lazy-loaded placeholders

Check whether the generated optimized file exists and loads.

If the original image works but the optimized replacement fails:

• Regenerate optimized images
• Clear the image CDN
• Check browser compatibility
• Exclude the affected file temporarily
• Review generated markup

JavaScript optimization

Video and interactive media may fail when JavaScript is:

• Delayed until interaction
• Combined in the wrong order
• Deferred incorrectly
• Removed as unused
• Blocked by consent software
• Served from an outdated cache

Temporarily disable:

• Delay JavaScript
• Combine JavaScript
• Guest optimization
• Script reordering
• Delayed inline scripts

Then purge generated files and test again.

CSS optimization

Media can load but remain invisible when CSS optimization removes:

• Active media states
• Responsive media styles
• Modal layout
• Aspect-ratio rules
• Inline mobile media
• Player control styling
• Visibility classes

Temporarily disable:

• Remove Unused CSS
• Critical CSS
• CSS combination
• Asynchronous CSS

Regenerate the optimized files after creating exclusions.

File permissions

The uploads directory and media files must be readable by the web server.

Incorrect permissions can produce:

• 403 Forbidden
• Missing thumbnails
• Media working only through administrator previews
• CDN origin failures

Use the hosting file manager or contact the hosting provider.

Do not apply unrestricted permissions such as 777 as a general repair.

Server MIME types

The server should return a content type that matches the media.

Examples include:

• Image content type for images
• Audio content type for audio
• Video content type for video

Incorrect MIME types can cause browsers, security systems, or CDNs to reject the file.

Inspect the response headers in the Network panel.

Ask the hosting provider to correct server MIME configuration when necessary.

Range requests

Audio and video streaming commonly use byte-range requests.

The Network panel may show:

206 Partial Content

This is normal.

Playback or seeking can fail when the server, CDN, or security layer does not handle range requests correctly.

Possible symptoms include:

• Playback never starts
• Duration is unavailable
• Seeking restarts the file
• Large video stops after a few seconds
• Mobile playback fails

Test the same media from the WordPress origin without the CDN.

Large files

Very large audio or video files can cause:

• Slow initial playback
• Timeouts
• High bandwidth usage
• Mobile failures
• CDN limits
• Hosting resource issues
• Delayed metadata

Compress media for web delivery.

For long or high-resolution video, consider a dedicated video platform rather than serving the complete file directly from normal shared hosting.

Mobile media problems

When media works on desktop but not mobile, check:

• Mobile visibility
• Separate mobile cache
• Data-saving mode
• Browser autoplay restrictions
• Mobile codec support
• File size
• Touch interaction
• Mobile layout
• Fixed media heights
• Consent settings
• Mobile-only optimization

Test on a real device and open the direct media URL in that device’s browser.

Clear caches after changing media

After replacing or repairing media:

1. Update the page
2. Clear the WordPress page cache
3. Clear generated CSS and JavaScript
4. Clear image optimization cache
5. Purge server cache
6. Purge CDN cache
7. Clear separate mobile cache
8. Test in a private browser window

When replacing a file while keeping the same URL, a CDN may continue serving the old version.

A new filename is often easier to invalidate reliably.

Test with a known-working file

A known-working file helps separate the block from the media source.

For images

Use a normal JPEG or PNG from the WordPress Media Library.

For audio

Use a small MP3 file.

For video

Use:

• A standard public YouTube video that allows embedding
• A direct MP4 URL from the current WordPress uploads directory

When the test file works, the original source or provider settings are responsible.

Test outside the current parent

A media element may load but be hidden by its layout.

On a staging page:

1. Duplicate the affected block
2. Move it outside its current parent
3. Place it inside a standard Group block
4. Remove custom classes
5. Use default dimensions
6. Select a known-working media file
7. Update the page
8. Test the frontend

When the simplified version works, inspect the original parent’s overflow, dimensions, z-index, and custom CSS.

Recommended troubleshooting sequence

Use this order:

1. Confirm the media is selected
2. Update the page
3. Open the media URL directly
4. Check required media for the block
5. Inspect Network response codes
6. Check browser Console errors
7. Confirm HTTPS
8. Check the current domain
9. Test a known-working file
10. Clear all caches
11. Disable JavaScript delay
12. Disable Remove Unused CSS
13. Test without the CDN
14. Check security and consent tools
15. Check MIME types and range requests
16. Test outside the current parent
17. Test plugin conflicts on staging
18. Test with a default theme
19. Contact the hosting or media provider when the direct URL fails

Troubleshooting

The complete Audio Player is missing

Confirm that the block contains a valid Audio URL.

The frontend player is not rendered without one.

The Audio Player is visible but Play does nothing

Open the audio URL directly.

Check the file format, codec, MIME type, Network response, JavaScript errors, overlays, and CDN.

The audio duration shows no value

Check preload settings, metadata, range requests, and file integrity.

Try playback and inspect the media request.

Before/After is missing from the frontend

Confirm that both the Before and After image URLs are present.

The block does not render publicly when either source is missing.

One Before/After image is broken

Open the affected image URL and check its Network response.

Also compare the dimensions and aspect ratios of both images.

Marquee is completely missing

Confirm that at least one image item exists.

The frontend marquee does not render when its image list is empty.

Marquee shows repeated broken images

One broken source image can appear repeatedly because the marquee duplicates items for continuous movement.

Replace or reselect the broken image.

Cursor Reveal text works but no media appears

Confirm the item media, test hover or tap, inspect the media URL, and check parent overflow.

Split Scroll text works but media is missing

Review media items, mobile sticky behavior, inline mobile media, object fit, caches, and frontend JavaScript.

Video cover appears but clicking Play does nothing

Check the video URL, trigger overlays, frontend JavaScript, CSP, consent tools, and browser Console.

Video Modal reports an unsupported format

Use a supported YouTube, YouTube NoCookie, Vimeo, or direct .mp4, .webm, or .ogg URL.

A self-hosted video URL with query parameters fails

Use a clean direct URL ending with the supported file extension where possible.

The current validator identifies local sources from the final URL extension.

YouTube works in a normal tab but not in the modal

Check embedding permission, CSP, privacy extensions, cookie consent, and iframe blocking.

Vimeo reports that the video cannot be played

Check Vimeo privacy and domain-level embedding settings.

Media works while logged in but not for visitors

Clear guest cache and check protected media, CDN, hotlink protection, consent tools, and logged-out optimization.

Media works without the CDN

Repair CDN origin, permissions, MIME, range requests, or cache configuration.

Images load but remain invisible

Inspect dimensions, opacity, visibility, object fit, parent overflow, active-state CSS, and z-index.

Media fails after moving the website

Replace old domains and HTTP URLs, verify uploads, clear caches, and purge the CDN.

The direct media URL returns 403

Check permissions, hotlink protection, firewall rules, private storage, signed URLs, and CDN access.

The direct media URL returns 404

The file was deleted, moved, renamed, or not transferred during migration.

Select or upload the correct file again.

The direct URL works but KineticHub does not

Check:

• Saved block URL
• Frontend JavaScript
• Parent layout
• Custom CSS
• URL validation
• Optimization
• Console errors

Information to collect for support

Before contacting KineticHub support, collect:

• KineticHub version
• Free or PRO edition
• Affected block
• Page URL
• Media type
• Media URL with private tokens removed
• File extension
• Approximate file size
• Browser and device
• Network response code
• Response content type
• Console errors
• CDN or external storage provider
• Cache and optimization plugins
• Security and consent plugins
• Whether the direct URL works
• Whether a known-working file works
• Whether the issue occurs while logged out
• Whether the block works outside its parent
• Screenshot or short screen recording

Do not include passwords, private storage credentials, complete signed URLs, payment information, or complete license keys.

Next step

Continue with PRO Features Are Missing when the KineticHub block is available and its normal media works, but premium controls, premium effects, or licensed features do not appear.