KB103842879: WebCenter - Is it possible to embed, store and play videos in WebCenter

Question

Is it possible to embed videos in WebCenter pages?
Can video files be stored and played in WebCenter?

Answer

It is possible to store video files on WebCenter. However, since WebCenter does not have a video player, users would have to download and then play the movies on their own machines.

Fortunately, it is possible to embed movies hosted in another location, such as YouTube, inside different WebCenter pages. A few examples:

My Work sections
Static text customizations: Login, Welcome or Contact page
Attribute form help balloons
Rich Text Attributes

If your company has its own movies, you may want to create a private YouTube channel for that (so, you can only see the movies if you have the link).

To find more Esko WebCenter YouTube movies to link to in the software, see:

Page:

KB85664833: WebCenter - Where can I find WebCenter videos or movies

My Work Section

The easiest option is to create a My Work section with a YouTube movie. Read the article given below for a complete description of the procedure:

Page:

KB92180709: WebCenter - How to add a YouTube movie as My Work section

Rich Text Attributes

You can link a movie hosted on the Web Server or a movie on a channel like YouTube into a Rich Text Attribute. For more information, see:

Page:

KB173217144: WebCenter - How to add guidelines/movie to the top of each form Task and Attribute form

Static Text Customization and Help HTML

If you want to create a customized page using static text customization or add a video to an attribute help balloon, you will first need to get the correct video link. This procedure describes how to get the correct link for a YouTube movie:

Find your movie on YouTube.
Choose Share > Embed. You will see a piece of code. For example:
```
<iframe width="560" height="315" src="//www.youtube.com/embed/4WDSEbCaiDA" frameborder="0" allowfullscreen></iframe>
```
If you this kind of code, make sure to adapt allowfullscreen to allowfullscreen = "true".

Alternatively, you could use the Use old embed code option and your code will look a bit different. For example:

<object width="560" height="315"><param name="movie" value="//www.youtube.com/v/4WDSEbCaiDA?version=3&amp;hl=nl_NL"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/4WDSEbCaiDA?version=3&amp;hl=nl_NL" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

Now copy the embed code entirely and paste it into your HTML file.

The following is an example of HTML code that could be used for static text customization or a help balloon:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
        <title>Welcome to WebCenter</title>
        <style type="text/css">
            .mainContent {background:none;}
            h1 {font-family:Verdana,Arial,sans-serif;font-size:14px;font-weight:500;margin-bottom:40px;}
            .embMovie {display:inline-block;margin-right:20px;}
        </style>
    </head>
    <body>
        <div class="mainContent">
            <h1>Watch some nice WebCenter movies to get you started!</h1>
            <div class="embMovie">   
                <iframe width="560" height="315" src="//www.youtube.com/embed/4WDSEbCaiDA" frameborder="0" allowfullscreen="true"></iframe>
            </div>
        </div>
    </body>
</html>

For more information on static text customization or adding help balloons in attribute forms, read Customize Static Text and Create HTML information for an Attribute in the WebCenter User Documentation.

Article information
Applies to	WebCenter all versions
Created	21-Aug-14
Last revised	02-Nov-15
Author	DEKE
CW Number

Contents