# How to Add Video to Your Page ?

<span style="color: rgb(0, 0, 0);">**Through this document , you will uncover the 'Video' feature properties in site editor page .**</span>

<span style="color: rgb(0, 0, 0);">**[Vimeo](https://kb.salerise.com/link/34#bkmrk-portfolio-blocks)** [<span style="color: #000000;">**YouTube**</span>](https://kb.salerise.com/link/34#bkmrk-youtube)  
**[Daily Motion](https://kb.salerise.com/link/34#bkmrk-daily-motion)**  
**[HTML 5 Video](https://kb.salerise.com/link/34#bkmrk-daily-motion)  
[Sound Cloud](https://kb.salerise.com/link/34#bkmrk-sound-cloud)**</span>

### <span style="color: rgb(35, 111, 161);">**Vimeo**</span>

#### <span style="color: rgb(186, 55, 42);">**Feature Settings**</span>

<span style="color: rgb(0, 0, 0);">Upon dropping the Vimeo icon , a settings window will appear, offering three main features:  
  
<iframe allowfullscreen="allowfullscreen" height="435" src="https://www.youtube.com/embed/VIqyPWlecuY?feature=shared" width="776"></iframe>

  
</span>

- <span style="color: rgb(0, 0, 0);">**Settings**</span>
    - - <span style="color: rgb(0, 0, 0);">Add your video link</span>
        - <span style="color: rgb(0, 0, 0);">Determine how your video is visible on devices (Mobile , Tablet , Desktop , Large desktop).</span>

<span style="color: rgb(0, 0, 0);">\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_</span>

- <span style="color: rgb(0, 0, 0);">**Video**</span>
    
    
    - <span style="color: rgb(0, 0, 0);">Include videos on your website by choosing from two options: select from your uploaded videos or upload new videos</span>

<span style="color: rgb(0, 0, 0);">\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_</span>

- <span style="color: rgb(0, 0, 0);">**Animations**</span>
    
    
    - <span style="color: rgb(0, 0, 0);">Add animation to your video box from a long list of animation options.</span>
    - <span class="ui-provider ef ayj ayk ayl aym ayn ayo ayp ayq ayr ays ayt ayu ayv ayw ayx ayy ayz aza azb azc azd aze azf azg azh azi azj azk azl azm azn azo azp azq" dir="ltr" style="color: rgb(0, 0, 0);">Enhance your animated video box by incorporating timing in seconds.</span>

#### <span style="color: rgb(186, 55, 42);">**Style Settings**</span>

<span style="color: rgb(0, 0, 0);">**Design Features**</span>

- <span style="color: rgb(0, 0, 0);">Access the "Design" feature to customize your video box appearance. Within this feature, you can determine the following properties:</span>
    
    
    - <span style="color: rgb(0, 0, 0);">**Margin**: Set the spacing around your video box to control its placement on the page.</span>
    - <span style="color: rgb(0, 0, 0);">**Border**: Define a border for your video box to add a distinct visual element.</span>
    - <span style="color: rgb(0, 0, 0);">**Color**: Choose the color that best complements your website's theme or design.</span>
    - <span style="color: rgb(0, 0, 0);">**Style**: Apply different styles to your video box, enhancing its visual appeal.</span>
    - <span style="color: rgb(0, 0, 0);">**Gradient**: Add gradient effects to your video box for a more dynamic and modern look.</span>

<span style="color: rgb(0, 0, 0);">**Background Features**</span>

- <span style="color: rgb(0, 0, 0);">Navigate to the "Background" feature to enhance the backdrop of your video box.</span>  
      
    
    - <span style="color: rgb(0, 0, 0);">**Upload Images**: Insert images as a background for your video box, providing visual interest.</span>
    - <span style="color: rgb(0, 0, 0);">**Sample Images**: Explore pre-loaded image samples for quick and easy background selection.</span>
    - <span style="color: rgb(0, 0, 0);">**Background Styling**: Customize the video box background further with options like:</span>
        
        <span style="color: rgb(0, 0, 0);">- Background Repeat: Control how the background image repeats.</span>  
        <span style="color: rgb(0, 0, 0);">- Background Fill: Adjust how the background fills the space around the video box.</span>  
        <span style="color: rgb(0, 0, 0);">- Background Position: Define the positioning of the background image for optimal display.</span>

<span style="color: rgb(0, 0, 0);">**Style Customization**</span>

- <span style="color: rgb(0, 0, 0);">Within the "Style" section, further refine your video box presentation by adding classes from a dropdown list with a plethora of options.</span>
- <span style="color: rgb(0, 0, 0);">Determine how your video box are visible on devices (Mobile , Tablet , Desktop , Large desktop).</span>

<span style="color: rgb(0, 0, 0);"><iframe allowfullscreen="allowfullscreen" height="435" src="https://www.youtube.com/embed/Xri-1pNrJ8E?feature=shared" width="776"></iframe>

</span>

### <span style="color: #236fa1;"><span style="font-size: 32.662px;">**YouTube**</span></span>  


#### <span style="color: rgb(186, 55, 42);">**Feature Settings**</span>

<span style="color: rgb(0, 0, 0);">Upon dropping the Youtube icon , a settings window will appear, offering three main features:  
  
<iframe allowfullscreen="allowfullscreen" height="435" src="https://www.youtube.com/embed/ylxYpWtLUXc?feature=shared" width="776"></iframe>

  
</span>

- <span style="color: rgb(0, 0, 0);">**Settings**</span>
    - - <span style="color: rgb(0, 0, 0);">Add your video link</span>
        - <span style="color: rgb(0, 0, 0);">Determine how your video is visible on devices (Mobile , Tablet , Desktop , Large desktop).</span>

<span style="color: rgb(0, 0, 0);">\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_</span>

- <span style="color: rgb(0, 0, 0);">**Video**</span>
    
    
    - <span style="color: rgb(0, 0, 0);">Include videos on your website by choosing from two options: select from your uploaded videos or upload new videos</span>

<span style="color: rgb(0, 0, 0);">\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_</span>

- <span style="color: rgb(0, 0, 0);">**Animations**</span>
    
    
    - <span style="color: rgb(0, 0, 0);">Add animation to your video box from a long list of animation options.</span>
    - <span class="ui-provider ef ayj ayk ayl aym ayn ayo ayp ayq ayr ays ayt ayu ayv ayw ayx ayy ayz aza azb azc azd aze azf azg azh azi azj azk azl azm azn azo azp azq" dir="ltr" style="color: rgb(0, 0, 0);">Enhance your animated video box by incorporating timing in seconds.</span>

#### <span style="color: rgb(186, 55, 42);">**Style Settings**</span>

<span style="color: rgb(0, 0, 0);">**Design Features**</span>

- <span style="color: rgb(0, 0, 0);">Access the "Design" feature to customize your video box appearance. Within this feature, you can determine the following properties:</span>
    
    
    - <span style="color: rgb(0, 0, 0);">**Margin**: Set the spacing around your video box to control its placement on the page.</span>
    - <span style="color: rgb(0, 0, 0);">**Border**: Define a border for your video box to add a distinct visual element.</span>
    - <span style="color: rgb(0, 0, 0);">**Color**: Choose the color that best complements your website's theme or design.</span>
    - <span style="color: rgb(0, 0, 0);">**Style**: Apply different styles to your video box, enhancing its visual appeal.</span>
    - <span style="color: rgb(0, 0, 0);">**Gradient**: Add gradient effects to your video box for a more dynamic and modern look.</span>

<span style="color: rgb(0, 0, 0);">**Background Features**</span>

- <span style="color: rgb(0, 0, 0);">Navigate to the "Background" feature to enhance the backdrop of your video box.</span>  
      
    
    - <span style="color: rgb(0, 0, 0);">**Upload Images**: Insert images as a background for your video box, providing visual interest.</span>
    - <span style="color: rgb(0, 0, 0);">**Sample Images**: Explore pre-loaded image samples for quick and easy background selection.</span>
    - <span style="color: rgb(0, 0, 0);">**Background Styling**: Customize the video box background further with options like:</span>
        
        <span style="color: rgb(0, 0, 0);">- Background Repeat: Control how the background image repeats.</span>  
        <span style="color: rgb(0, 0, 0);">- Background Fill: Adjust how the background fills the space around the video box.</span>  
        <span style="color: rgb(0, 0, 0);">- Background Position: Define the positioning of the background image for optimal display.</span>

<span style="color: rgb(0, 0, 0);">**Style Customization**</span>

- <span style="color: rgb(0, 0, 0);">Within the "Style" section, further refine your video box presentation by adding classes from a dropdown list with a plethora of options.</span>
- <span style="color: rgb(0, 0, 0);">Determine how your video box are visible on devices (Mobile , Tablet , Desktop , Large desktop).</span>

<span style="color: rgb(0, 0, 0);"><iframe allowfullscreen="allowfullscreen" height="435" src="https://www.youtube.com/embed/a17jPMXuNkk?feature=shared" width="776"></iframe>

</span>

### <span style="color: rgb(35, 111, 161);">**Daily Motion**</span>

#### <span style="color: rgb(186, 55, 42);">**Feature Settings**</span>

<span style="color: rgb(0, 0, 0);">Upon dropping the Daily Motion icon , a settings window will appear, offering three main features:  
  
<iframe allowfullscreen="allowfullscreen" height="435" src="https://www.youtube.com/embed/NXaIQ95r-bE?feature=shared" width="776"></iframe>

  
</span>

- <span style="color: rgb(0, 0, 0);">**Settings**</span>
    - - <span style="color: rgb(0, 0, 0);">Add your video link</span>
        - <span style="color: rgb(0, 0, 0);">Determine how your video is visible on devices (Mobile , Tablet , Desktop , Large desktop).</span>

<span style="color: rgb(0, 0, 0);">\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_</span>

- <span style="color: rgb(0, 0, 0);">**Video**</span>
    
    
    - <span style="color: rgb(0, 0, 0);">Include videos on your website by choosing from two options: select from your uploaded videos or upload new videos</span>

<span style="color: rgb(0, 0, 0);">\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_</span>

- <span style="color: rgb(0, 0, 0);">**Animations**</span>
    
    
    - <span style="color: rgb(0, 0, 0);">Add animation to your video box from a long list of animation options.</span>
    - <span class="ui-provider ef ayj ayk ayl aym ayn ayo ayp ayq ayr ays ayt ayu ayv ayw ayx ayy ayz aza azb azc azd aze azf azg azh azi azj azk azl azm azn azo azp azq" dir="ltr" style="color: rgb(0, 0, 0);">Enhance your animated video box by incorporating timing in seconds.</span>

#### <span style="color: rgb(186, 55, 42);">**Style Settings**</span>

<span style="color: rgb(0, 0, 0);">**Design Features**</span>

- <span style="color: rgb(0, 0, 0);">Access the "Design" feature to customize your video box appearance. Within this feature, you can determine the following properties:</span>
    
    
    - <span style="color: rgb(0, 0, 0);">**Margin**: Set the spacing around your video box to control its placement on the page.</span>
    - <span style="color: rgb(0, 0, 0);">**Border**: Define a border for your video box to add a distinct visual element.</span>
    - <span style="color: rgb(0, 0, 0);">**Color**: Choose the color that best complements your website's theme or design.</span>
    - <span style="color: rgb(0, 0, 0);">**Style**: Apply different styles to your video box, enhancing its visual appeal.</span>
    - <span style="color: rgb(0, 0, 0);">**Gradient**: Add gradient effects to your video box for a more dynamic and modern look.</span>

<span style="color: rgb(0, 0, 0);">**Background Features**</span>

- <span style="color: rgb(0, 0, 0);">Navigate to the "Background" feature to enhance the backdrop of your video box.</span>  
      
    
    - <span style="color: rgb(0, 0, 0);">**Upload Images**: Insert images as a background for your video box, providing visual interest.</span>
    - <span style="color: rgb(0, 0, 0);">**Sample Images**: Explore pre-loaded image samples for quick and easy background selection.</span>
    - <span style="color: rgb(0, 0, 0);">**Background Styling**: Customize the video box background further with options like:</span>
        
        <span style="color: rgb(0, 0, 0);">- Background Repeat: Control how the background image repeats.</span>  
        <span style="color: rgb(0, 0, 0);">- Background Fill: Adjust how the background fills the space around the video box.</span>  
        <span style="color: rgb(0, 0, 0);">- Background Position: Define the positioning of the background image for optimal display.</span>

<span style="color: rgb(0, 0, 0);">**Style Customization**</span>

- <span style="color: rgb(0, 0, 0);">Within the "Style" section, further refine your video box presentation by adding classes from a dropdown list with a plethora of options.</span>
- <span style="color: rgb(0, 0, 0);">Determine how your video box are visible on devices (Mobile , Tablet , Desktop , Large desktop).</span>

<span style="color: rgb(0, 0, 0);"><iframe allowfullscreen="allowfullscreen" height="435" src="https://www.youtube.com/embed/k3k-97WT3jA?feature=shared" width="776"></iframe>

</span>

### <span style="color: rgb(35, 111, 161);">**HTML 5 Video**</span>

#### <span style="color: rgb(186, 55, 42);">**Feature Settings**</span>

<span style="color: rgb(0, 0, 0);">Upon dropping the HTML 5 video icon , a settings window will appear, offering three main features:  
  
<iframe allowfullscreen="allowfullscreen" height="435" src="https://www.youtube.com/embed/DK6zF2uTGb0?feature=shared" width="776"></iframe>

  
</span>

- <span style="color: rgb(0, 0, 0);">**Settings**</span>
    - - <span style="color: rgb(0, 0, 0);">Add your video link</span>
        - <span style="color: rgb(0, 0, 0);">Determine how your video is visible on devices (Mobile , Tablet , Desktop , Large desktop).</span>

<span style="color: rgb(0, 0, 0);">\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_</span>

- <span style="color: rgb(0, 0, 0);">**Video**</span>
    
    
    - <span style="color: rgb(0, 0, 0);">Include videos on your website by choosing from two options: select from your uploaded videos or upload new videos</span>

<span style="color: rgb(0, 0, 0);">\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_</span>

- <span style="color: rgb(0, 0, 0);">**Animations**</span>
    
    
    - <span style="color: rgb(0, 0, 0);">Add animation to your video box from a long list of animation options.</span>
    - <span class="ui-provider ef ayj ayk ayl aym ayn ayo ayp ayq ayr ays ayt ayu ayv ayw ayx ayy ayz aza azb azc azd aze azf azg azh azi azj azk azl azm azn azo azp azq" dir="ltr" style="color: rgb(0, 0, 0);">Enhance your animated video box by incorporating timing in seconds.</span>

#### <span style="color: rgb(186, 55, 42);">**Style Settings**</span>

<span style="color: rgb(0, 0, 0);">**Design Features**</span>

- <span style="color: rgb(0, 0, 0);">Access the "Design" feature to customize your video box appearance. Within this feature, you can determine the following properties:</span>
    
    
    - <span style="color: rgb(0, 0, 0);">**Margin**: Set the spacing around your video box to control its placement on the page.</span>
    - <span style="color: rgb(0, 0, 0);">**Border**: Define a border for your video box to add a distinct visual element.</span>
    - <span style="color: rgb(0, 0, 0);">**Color**: Choose the color that best complements your website's theme or design.</span>
    - <span style="color: rgb(0, 0, 0);">**Style**: Apply different styles to your video box, enhancing its visual appeal.</span>
    - <span style="color: rgb(0, 0, 0);">**Gradient**: Add gradient effects to your video box for a more dynamic and modern look.</span>

<span style="color: rgb(0, 0, 0);">**Background Features**</span>

- <span style="color: rgb(0, 0, 0);">Navigate to the "Background" feature to enhance the backdrop of your video box.</span>  
      
    
    - <span style="color: rgb(0, 0, 0);">**Upload Images**: Insert images as a background for your video box, providing visual interest.</span>
    - <span style="color: rgb(0, 0, 0);">**Sample Images**: Explore pre-loaded image samples for quick and easy background selection.</span>
    - <span style="color: rgb(0, 0, 0);">**Background Styling**: Customize the video box background further with options like:</span>
        
        <span style="color: rgb(0, 0, 0);">- Background Repeat: Control how the background image repeats.</span>  
        <span style="color: rgb(0, 0, 0);">- Background Fill: Adjust how the background fills the space around the video box.</span>  
        <span style="color: rgb(0, 0, 0);">- Background Position: Define the positioning of the background image for optimal display.</span>

<span style="color: rgb(0, 0, 0);">**Style Customization**</span>

- <span style="color: rgb(0, 0, 0);">Within the "Style" section, further refine your video box presentation by adding classes from a dropdown list with a plethora of options.</span>
- <span style="color: rgb(0, 0, 0);">Determine how your video box are visible on devices (Mobile , Tablet , Desktop , Large desktop).</span>

<span style="color: rgb(0, 0, 0);"><iframe allowfullscreen="allowfullscreen" height="435" src="https://www.youtube.com/embed/NDWzSae7T78?feature=shared" width="776"></iframe>

</span>

### <span style="color: rgb(35, 111, 161);">**Sound Cloud**</span>

#### <span style="color: rgb(186, 55, 42);">**Feature Settings**</span>

<span style="color: rgb(0, 0, 0);">Upon dropping the Sound Cloud icon , a settings window will appear, offering three main features:  
  
<iframe allowfullscreen="allowfullscreen" height="435" src="https://www.youtube.com/embed/vUW8jMP1ASU?feature=shared" width="776"></iframe>

  
</span>

- <span style="color: rgb(0, 0, 0);">**Settings**</span>
    - - <span style="color: rgb(0, 0, 0);">Add your video link</span>
        - <span style="color: rgb(0, 0, 0);">Determine how your video is visible on devices (Mobile , Tablet , Desktop , Large desktop).</span>

<span style="color: rgb(0, 0, 0);">\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_</span>

- <span style="color: rgb(0, 0, 0);">**Video**</span>
    
    
    - <span style="color: rgb(0, 0, 0);">Include videos on your website by choosing from two options: select from your uploaded videos or upload new videos</span>

<span style="color: rgb(0, 0, 0);">\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_</span>

- <span style="color: rgb(0, 0, 0);">**Animations**</span>
    
    
    - <span style="color: rgb(0, 0, 0);">Add animation to your video box from a long list of animation options.</span>
    - <span class="ui-provider ef ayj ayk ayl aym ayn ayo ayp ayq ayr ays ayt ayu ayv ayw ayx ayy ayz aza azb azc azd aze azf azg azh azi azj azk azl azm azn azo azp azq" dir="ltr" style="color: rgb(0, 0, 0);">Enhance your animated video box by incorporating timing in seconds.</span>

#### <span style="color: rgb(186, 55, 42);">**Style Settings**</span>

<span style="color: rgb(0, 0, 0);">**Design Features**</span>

- <span style="color: rgb(0, 0, 0);">Access the "Design" feature to customize your video box appearance. Within this feature, you can determine the following properties:</span>
    
    
    - <span style="color: rgb(0, 0, 0);">**Margin**: Set the spacing around your video box to control its placement on the page.</span>
    - <span style="color: rgb(0, 0, 0);">**Border**: Define a border for your video box to add a distinct visual element.</span>
    - <span style="color: rgb(0, 0, 0);">**Color**: Choose the color that best complements your website's theme or design.</span>
    - <span style="color: rgb(0, 0, 0);">**Style**: Apply different styles to your video box, enhancing its visual appeal.</span>
    - <span style="color: rgb(0, 0, 0);">**Gradient**: Add gradient effects to your video box for a more dynamic and modern look.</span>

<span style="color: rgb(0, 0, 0);">**Background Features**</span>

- <span style="color: rgb(0, 0, 0);">Navigate to the "Background" feature to enhance the backdrop of your video box.</span>  
      
    
    - <span style="color: rgb(0, 0, 0);">**Upload Images**: Insert images as a background for your video box, providing visual interest.</span>
    - <span style="color: rgb(0, 0, 0);">**Sample Images**: Explore pre-loaded image samples for quick and easy background selection.</span>
    - <span style="color: rgb(0, 0, 0);">**Background Styling**: Customize the video box background further with options like:</span>
        
        <span style="color: rgb(0, 0, 0);">- Background Repeat: Control how the background image repeats.</span>  
        <span style="color: rgb(0, 0, 0);">- Background Fill: Adjust how the background fills the space around the video box.</span>  
        <span style="color: rgb(0, 0, 0);">- Background Position: Define the positioning of the background image for optimal display.</span>

<span style="color: rgb(0, 0, 0);">**Style Customization**</span>

- <span style="color: rgb(0, 0, 0);">Within the "Style" section, further refine your video box presentation by adding classes from a dropdown list with a plethora of options.</span>
- <span style="color: rgb(0, 0, 0);">Determine how your video box are visible on devices (Mobile , Tablet , Desktop , Large desktop).</span>

<iframe allowfullscreen="allowfullscreen" height="436" src="https://www.youtube.com/embed/7EeYzdCIn6Q?feature=shared" width="776"></iframe>