Positioning and resizing embedded Clipstream using CSS

Clipstream can be positioned and resized on a screen by embedding the player within a container and then adjusted using CSS. CSS is a common language used in the page code that tells web browsers how to display elements such as text, graphics and other layout elements.

There are numerous ways you can control the positioning and dimensions of a CSS container. Here are some simple ways this can be done. 

Embedding Clipstream inside a CSS container

  1. Copy the embed code from a Clipstream video
  2. In your page source, create a container using CSS. Add <div>  </div> tags where you want the video to appear. 
  3. Paste the Clipstream embed code inside the <div> put video embed code here  </div> tags. 

The video is now within a CSS container and will conform to its positioning, width and size. 

Positioning Clipstream by controlling the properties of the container

There are various methods to control positioning of a CSS container. Here is one example using absolute values and in-line CSS:

  • In the first <div> tag, add the following code:

    <div style="position: absolute; left: 50px; top: 50px;"> video embed code </div>

This positions the container 50 pixels from the left of its nearest element and 50 pixels from the top of its nearest element. If the container had a Clipstream video embedded inside the tags, the video would conform to that position. 

Ex. 2 Positioned inside a container:

For more on CSS positioning please read this w3schools.com syntax article. 

Resizing Clipstream by controlling the properties of the container

Clipstream will conform to the width, height and other size properties of a CSS container. Try this example using pixel dimensions. 

  • Using the same container as the one example above, add width and height properties. 
  • Add the following code for width and height:

    <div style="position: absolute; left: 50px; top: 50px; width: 640px; height: 480px;"> video embed code </div>

    This will resize the <div> container element. The embedded Clipstream video will also expand to fill these new dimensions. 

Read more about width and height properties here and here in W3schools. 

Have more questions? Submit a request


Please sign in to leave a comment.
Powered by Zendesk