Custom Code Examples

  • Updated

On this page you will be able to find some basic examples of the usage of the custom code section. Make sure to read the Custom Code article to understand how custom code works in Umso.

Youtube Video

The following code allows you to add a youtube video. YOURLINK can be found if you click "share" right below your youtube video and then chose the option "embed".

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/YOURLINK" 
frameborder="0" allow="accelerometer; autoplay; 
clipboard-write; encrypted-media; gyroscope; 
picture-in-picture"allowfullscreen>
</iframe>

Embedding a podcast

There are a lot of podcast players out there, and some of them provide an embed code. Here is an example of an apple podcast. Replace PODCAST-URL with the last part of the URL of the podcast, for example: /ca/podcast/niche-website-builders-show/id1548013326

<iframe src="https://embed.podcasts.apple.com/PODCAST-URL?itsct=podcast_box&amp;
itscg=30200&amp;theme=light" height="450px" 
frameborder="0" sandbox="allow-forms 
allow-popups allow-same-origin allow-scripts 
allow-top-navigation-by-user-activation" 
allow="autoplay *; encrypted-media *;" 
style="width: 100%; max-width: 660px; 
overflow: hidden; border-radius: 10px; 
background: transparent;">
</iframe>

Adding calendarly

You can find an embed code on your calendar account. The code will be similar to the code below, where instead of YOUR-CALENDAR you will have the path of your calendar.

<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" data-url="https://calendly.com/YOUR-CALENDAR" style="min-width:320px;height:630px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
<!-- Calendly inline widget end -->

Modifying CSS elements

Centering Elements

If you want to center your iframe, you can wrap around a div element containing some styling properties. Please note that doesn't need to be an iframe as the child element, can be anything any other element.

<div style="align-items: center; 
justify-content: center; display: flex;">
<iframe>...</iframe>
</div>

Increasing team member section picture size

You can modify the CSS of other sections. For example, the example below increases the sizing of the pictures of the team member section. One catch here is that when working with a CSS class (for example .member__avatar), the changes will be applied to all sections that contain that class on your page. However, if you want to limit to a specific section, you can rename the section ID, and then add that section ID on your custom code as in #team-unique.

<style>
#team-unique .member__avatar {
  height: 100px;
  width: 100px;
}
</style>

Was this article helpful?