Embedding Videos in Web Content Articles on DXP 7.1+

This reference article describes several different ways to embed videos in Web Content Articles in Liferay Digital Experience Platform 7.1+. It is designed to supplement Liferay's Official Documentation on Publishing Web Content and optimizing your content using structures and templates. You might want to read those articles first to learn the basic principles.

Ways to Embed Video

  1. Use Case #1: Embedding Youtube videos
  2. Use Case #2: Embedding Videos Stored on Documents and Media
  3. Use Case #3: Custom Web Content Structure and Template
  4. References

Resolution

Embedding Youtube Videos

It is very easy to embed Youtube and other stream videos in Web Content articles. (Note: the following instructions assume that AlloyEditor is the chosen text editor.)

  1. Before proceeding, be sure to copy the specific embed code from Youtube (or other streaming services) and not just the URL. It usually looks something like this:
    <iframe width="560" height="315" src="https://www.youtube.com/embed/jzF_y039slk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen> </iframe >
    	
  2. On the left side menu, click Content (Content & Data in DXP 7.2+)
  3. Click Web Content.
  4. Click the plus sign → Basic Web Content.
  5. Enter a title in the Title field (e.g. The Piano Guys - Over the Rainbow).
  6. Click the Code View icon on the far right.
  7. Paste the embed code into the text field.
  8. Click Publish.

Next, place the newly created Web Content article on a page. Navigate to the site page where the article is to be displayed.

  1. Click the Add button.
  2. Add a Web Content Display portlet to the page.
  3. Click the Select Web Content to make it visible link.
  4. Click the Select button to choose the article.
  5. Click the name of the article (e.g. Piano Guys - Over the Rainbow).
  6. Click Save then close the Configuration window.

The embedded video is now on the page.
embedding-videos-71-01.png

It will vary for other streaming video platforms such as Vimeo, but the basic principles are the same. In the case of Vimeo, get the embed code like this one:

<iframe src="https://player.vimeo.com/video/266878736" width="640" height="270" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="https://vimeo.com/266878736">PROTEUS</a> from <a href="https://vimeo.com/user84342633">Floating House VFX</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

Copy and paste that into the text editor field. At this point, the Vimeo video will be embedded in the Web Content article.

Embedding Videos Stored on Documents and Media

If the video is stored in the Documents and Media portlet, you can embed the video in a Web Content article while still using the Basic Web Content Structure; there is no need to create a more complex Web Content Structure and corresponding Template. This method assumes that the browser supports HTML5 Video format.

To begin, find the video's URL to be embedded.

  1. Navigate to Content (Content & Data in DXP 7.2+)→ Documents and Media.
  2. Click on the video's title.
  3. Click on the Info icon at the top right. This expands the Details tab.
  4. Click on Get URL.
    embedding-videos-71-02.png
  5. Copy the URL. It looks something like this:
    http://localhost:8080/documents/34548/0/2016-09-30+09.10.30.mp4/ca4e8789-fada-c6a1-aae0-c609d2664715
  6. Next, create the Web Content Article.
  7. Click Web Content under the Content menu on the left (Content & Data in DXP 7.2+).
  8. Click the plus sign → Basic Web Content.
  9. Enter a title for the article.
  10. Click the Code View icon on the far right.
  11. Paste the following code snippet with the video's URL:
    <!DOCTYPE html>
    <html>
    <body>
    
    <video width="320" height="240" autoplay>
      <source src="http://localhost:8080/documents/34548/0/2016-09-30+09.10.30.mp4/ca4e8789-fada-c6a1-aae0-c609d2664715" type="video/mp4">
      Your browser does not support the video tag.
    </video>
    
    <p><b>Note:</b> The autoplay attribute does not work on some mobile devices.</p>
    
    </body>
    </html>
    
  12. Click Publish.

Follow the same steps as above to display the Web Content article on the Page.
embedding-videos03.png
For more advanced features, consider adding Javascript for more features such as Play/Pause and changing the size of the video.

Custom Web Content Structure and Template

In the previous example, the limitation is that whether the browser supports HTML5 Video. To make this scalable for multiple articles, create a structure and its corresponding template. An example based on Liferay's own Web Design team is provided and should be modified depending on each user's needs.

  • The structure can be found here.
  • The template can be found here.

Because this proof of concept is based on Liferay Portal 6.2, it must be updated for Liferay Digital Experience Platform 7.x.

Was this article helpful?
1 out of 3 found this helpful