Wix Editor: Customizing Audio and Video Players on Mobile

5 min read

Elevate your mobile site by optimizing your audio and video players for mobile visitors. Some players can be customized independently in the mobile editor, while others carry over the design settings established on the desktop version of your site.

Any changes made to audio and video players on mobile will not be reflected on the desktop version of your site.

In this article, learn more about customizing:

Example of an audio player on a Wix mobile site

Note:

Currently, it is not possible to customize Wix Music on mobile, this can only be done using desktop. Vote for this feature.

Customizing the Wix Audio Player

Customize how your player looks on your mobile site. You can change the layout, add an animation and resize your player so it looks striking on smaller screens.

To customize the Wix Audio Player:

Click the player in your mobile editor.
Customize your player for mobile:
- Resize the player using the drag handles.
- Click the Layouts icon to change the layout.
- Click the Hide icon to hide the player on your mobile site.

Customizing the Wix Podcast Player

You can customize the layout and design of your podcast's episode feed on mobile. Personalize the episode list's color scheme and choose which info to display.

To customize the Wix Podcast Player:

Click the player in your mobile editor.
Click Settings.
Customize your player for mobile:
- Layout:
  1. Click the Layout tab.
  2. Choose to show image, description, date or duration.
- Design:
  1. Click the Design tab.
  2. Customize the following:
    - Text Color: Adjust the color of your episodes' titles and descriptions.
    - Divider Opacity and Color: Choose a color for the divider and adjust its opacity.
    - Feed Background: Change the color and opacity of the feed background.
    - Button and Link Color: Choose a color for the buttons and links.

Customizing the Wix Video Player

You can customize your Video Player's mobile view to look different from the desktop view. Choose a layout that's right for you and customize the design settings to make sure your Video Player looks great from any device.

To customize the Wix Video Player:

Click the player in your mobile editor.
Click Settings.
Customize your player for mobile:
- Layout: Choose from two available layout options: Compact and Vertical.
- Design: Customize the design of your player's menu and action buttons. Click the color boxes to change the colors of the following:

Background color: The menu background.
Text color: The text on the menu.
Button color: The button background.
Tip: Make sure your background and button colors are different so that your text remains visible.
Text color: The color of the text on the button.

Note:

Currently, it's not possible to remove or change the color of the black bars on the video player, or adjust its size.

Customizing the Single Video Player

Customize how your Single Video Player looks on your mobile site. You can change your video's playback settings, adjust its layout and add an animation in the mobile editor.

To customize the Single Video Player

Click the player in your mobile editor.
Customize your player for mobile:
- Playback settings:
  1. Click the Settings icon .
  2. Customize your playback options:
    - Autoplays: Click the toggle to enable autoplay. Your video starts playing when the page loads.
      Note: Due to browser restrictions, videos play on mute when set to autoplay. However, your viewers can turn the sound on whenever they want.
    - Plays in a loop: Click the toggle to enable video looping, meaning your video plays constantly on repeat.
- Layout:
  1. Click the Layout icon .
  2. Customize the following:
    - Show video title: Click the toggle to display your video's title.
    - Play button size: Drag the slider to increase or decrease the play button's size.
- Animation:
  1. Click the Animation icon .
  2. Select an animation for your player.
  3. (Optional) Click Customize to edit the animation settings.