1. Liferay Help Center
  2. Knowledge Base
  3. How-to

Embedding Videos in Web Content Articles on DXP 7.0

Avatar

Justin Choi

  • Updated

This reference article describes the several different ways to embed videos in Web Content Articles in Liferay DXP 7.0. 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 and Other Streaming 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 >	On the left side menu, click Content
  2. On the left side menu, click Content
  3. Click Web Content.
  4. Click the plus sign → Basic Web Content.
  5. Enter a title in the Title field (e.g. Piano Guys - Over the Rainbow).
  6. Click the Format 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-videos01.png

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 → 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-videos02.png
  5. Copy the URL. It looks something like this: 
    http://localhost:8080/documents/44649/0/2014-01-22+13.11.46.mp4/5d975bca-98f2-cb23-eab0-4de16bbc2902
  6. Next, create the Web Content Article.
  7. Click Web Content under the Content menu on the left.
  8. Click the plus sign → Basic Web Content.
  9. Enter a title for the article.
  10. Click the Format 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/44649/0/2014-01-22+13.11.46.mp4/5d975bca-98f2-cb23-eab0-4de16bbc2902" 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 based on your specific needs and design.

Additional Information

References

There are several references for consultation; some of them are from Liferay's Official Documentation and others are from third parties. Liferay does not support or endorse these third party documentation. Please take care when implementing them.

Official Documentation

Third Party Documentation

Was this article helpful?
2 out of 2 found this helpful