Is there a way to control the size of the Soundcloud player in Webflow and have the ability to add embed code instead of just the URL?

Published on
September 22, 2023

Yes, there is a way to control the size of the Soundcloud player in Webflow and also add the embed code instead of just the URL. Here's how you can do it:

  1. Drag and drop an Embed component onto the page where you want to display the Soundcloud player.

  2. Double-click the Embed component to open the settings panel.

  3. Go to the "Settings" tab and click on "Custom Code".

  4. In the "Embed Code" field, paste the Soundcloud embed code that you obtained from the Soundcloud website. This embed code will provide you with more control over the player size.

  5. Once you've pasted the embed code, you can modify the size of the player by editing the width and height values within the code. You can set the width and height to specific values or use percentage values to make it responsive.

    For example, you can set the width to 100% to make it fit the container, like this:
    <iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/293&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>

  6. Customize any other settings you want, such as autoplay, hiding related tracks, showing comments, etc., according to the Soundcloud documentation.

  7. Click "Save & Close" to apply the changes and exit the settings panel.

Now the Soundcloud player with the specified size and settings will be displayed on your Webflow site.

By using the embed code instead of just the URL, you have more control over the appearance and behavior of the Soundcloud player within your Webflow project. This allows you to create a more seamless integration and customize the player to better suit your website's design and functionality.

Additional Resources:

Q&A:

  1. How can I control the size of the Soundcloud player in Webflow?
  2. What is the difference between using the Soundcloud URL and the embed code in Webflow?
  3. Can I customize the appearance of the Soundcloud player in Webflow?