--- title: "Embedded player" description: "Change the player's colors, controls and transcript panel so an embedded recording matches the page it sits on." --- > Documentation Index > Fetch the complete documentation index at: https://docs.speakai.co/llms.txt > Use this file to discover all available pages before exploring further. # Embedded player In order to customize your media players, click on your profile icon in the top right-hand corner and select the "Player Branding" button from the drop-down list. Once directed to the "Player Branding" page, you will have the opportunity to customize your embeddable media players in a variety of ways: - Allowing viewers to download your data visualizations - Allowing indexing for Search Engine Optimization - Hiding the title and description of the video - Preparing a Call to Action button to direct your viewers towards the embedded video - A checklist of which Insights you would like displayed alongside your video - Opportunities to upload new Background Images and Logos - Opportunities to change the Brand color of your videos Once you have made your desired changes, click the "Save" button in the top right-hand corner. ## Overview Make your embedded media players look exactly like your brand. You can easily customize colors, themes, and fonts to create a smooth experience for your audience. This ensures your brand identity is consistent across all your content, enhancing professionalism and recognition. ## Getting Started To access this feature, go to [Shared Media → Settings → Branding & Customization](https://app.speakai.co/embed-media) in your dashboard. ## Configuration You can fully customize the appearance of your embedded media players to match your brand identity. Follow these steps to adjust your player's look: - Go to **Shared Media** > **Settings** > **Branding & Customization** (or **Player Settings** for media players). - **Colors**: Set your **Primary Color** (buttons, highlights) and **Font Color**. - **Theme**: Choose between 'Light' or 'Dark' mode base themes. - **Font Family**: Select from available fonts (e.g., Poppins, Inter) to match your website. - **Waveform**: Toggle 'Hide Waveform' if you prefer a cleaner look. ## Advanced CSS For granular control, look for the **Custom CSS** field in the settings. You can enter standard CSS code here to override specific styles, such as: ```css .sp-recorder-btn { border-radius: 20px; font-weight: bold; } ``` These changes update the player in real-time. ## Next Steps Ready to get started? Here's what to do next: - **Login to your account** and navigate to the Branding & Customization settings. - **Experiment with the color and theme options** to find the perfect fit for your brand. - **Use the Custom CSS field** for any advanced styling needs. ## Player Branding ## Overview Make your embedded media players look exactly like your brand. You can easily customize colors, themes, and fonts to create a smooth experience for your audience. This ensures your brand identity is consistent across all your content, enhancing professionalism and recognition. ## Getting Started To access this feature, go to [Shared Media → Settings → Branding & Customization](https://app.speakai.co/embed-media) in your dashboard. ## Configuration You can fully customize the appearance of your embedded media players to match your brand identity. Follow these steps to adjust your player's look: - Go to **Shared Media** > **Settings** > **Branding & Customization** (or **Player Settings** for media players). - **Colors**: Set your **Primary Color** (buttons, highlights) and **Font Color**. - **Theme**: Choose between 'Light' or 'Dark' mode base themes. - **Font Family**: Select from available fonts (e.g., Poppins, Inter) to match your website. - **Waveform**: Toggle 'Hide Waveform' if you prefer a cleaner look. ## Advanced CSS For granular control, look for the **Custom CSS** field in the settings. You can enter standard CSS code here to override specific styles, such as: ```css .sp-recorder-btn { border-radius: 20px; font-weight: bold; } ``` These changes update the player in real-time. ## Next Steps Ready to get started? Here's what to do next: - **Login to your account** and navigate to the Branding & Customization settings. - **Experiment with the color and theme options** to find the perfect fit for your brand. - **Use the Custom CSS field** for any advanced styling needs. Need help? Contact our support team or check out our other guides. Need help? Contact our support team or check out our other guides. ## Overview Speak AI embeds are designed to work smoothly within your existing pages. While they function independently, you can enhance their behavior and control their initial state using simple URL parameters. This allows you to tailor the playback experience directly from the page where the embed is hosted. For more advanced control, such as pausing or playing the embed from your parent page, you can use JavaScript messaging. This provides a way to communicate with the embed and react to key events like when the player is ready or when playback has finished. ## How It Works You can customize the initial state of a Speak AI embed by adding specific parameters to its URL. These parameters allow you to control aspects like automatic playback, starting at a particular time, or hiding the visual waveform. For more dynamic control, the embed can send messages to its parent page using JavaScript's `postMessage` API. These messages inform your page when the player is ready or when playback has completed. To ensure these messages are received, your website's domain must be whitelisted in the recorder settings if security policies are active. ## Getting Started To access this feature, go to [Side Navigation → Surveys](https://app.speakai.co/recorder) in your dashboard. ## Configuration You can append the following parameters to your embed URL to control its initial state: - `?autoplay=true`: Automatically start playback (if the browser allows). - `?t=120`: Start playback at a specific time, measured in seconds (e.g., 120 seconds). - `?hideWaveform=true`: Hide the visual waveform display. The embed may emit the following `postMessage` events for advanced control: - `ready`: Indicates that the player has finished loading. - `finish`: Signals that the playback has completed. ## Next Steps Ready to get started? - **Explore the embed URL parameters** to customize the initial playback experience. - **Implement JavaScript messaging** to gain more control and react to player events. - **Ensure your domain is whitelisted** if you encounter any security restrictions. Need help? Contact our support team or check out our other guides. These changes will only reflect on the iFrames at this moment. 1. You need to add "**?isHorizontal=true&playerWidth=70&transcriptWidth=30**" in your iFrame URL 1. You can dynamically change - **playerWidth and transcriptWidth.**The total should be 100. 1. For example, Here's my iframe code - Please check for src or URL and at the end of the URL, please include the above query parameters. ```html ``` The original URL is: **[`https://embed.speakai.co/iframe/portfolio-creation-for-software-developer-and-introduction-to-ai-ml-and-voice-applications-py8exhngbe`](https://embed.speakai.co/iframe/portfolio-creation-for-software-developer-and-introduction-to-ai-ml-and-voice-applications-py8exhngbe)** The new URL with the horizontal view should be: [`https://embed.speakai.co/iframe/portfolio-creation-for-software-developer-and-introduction-to-ai-ml-and-voice-applications-py8exhngbe?isHorizontal=true&playerWidth=70&transcriptWidth=30`](https://embed.speakai.co/iframe/portfolio-creation-for-software-developer-and-introduction-to-ai-ml-and-voice-applications-py8exhngbe?isHorizontal=true&playerWidth=70&transcriptWidth=30) You can remove Title or Description from the customization options in the app. Want a hand setting this up? [Book a free consult](https://calendly.com/speak-ai/consult?utm_source=docs&utm_campaign=consult) and we'll do it together on your account. --- Related: [Sharing](/help/sharing/) · [Clips](/help/sharing/clips/) Source: https://docs.speakai.co/help/sharing/player/index.mdx