The following section provides an overview of the properties that are available in Text Overlay: Using the Text Overlay properties, you can add text to any of the components in your Screens project. Select the Text Overlay option from the navigation bar of the dialog box, as shown in the figure below. Select the image and click Configure (wrench icon) to open the properties dialog box. Navigate to TextOverlayDemo -> Channels -> TextSample and click Edit from the action bar to open the editor. The following image shows the TextOverlayDemo project with TextSample channel in Channels folder.įollow the steps below to use text overlay in an AEM Screens channel: For example,Ĭreate an AEM Screens project (in this example, TextOverlayDemo)Ĭreate a sequence channel titled as TextSample under Channels folder The following section describes the use of text overlay in an AEM Screens project.īefore you start implementing this functionality, please make sure you have set up a project as a prerequisite to start implementing text overlay. This section only showcases how to use and apply the poster component in an AEM Screens project and use it as text overlay in one of your sequence channels. To learn how to create your own custom component, please refer to Extending an AEM Screens Component. Text Overlay is a feature available in AEM Screens that allows you to create a compelling experience in a Sequence Channel by providing a title or a description overlaid on top of an image. To make it align the center of the body, we have to set the margin: 0 auto.The Text Overlay feature is only available, if you have installed AEM 6.3 Feature Pack 5 or AEM 6.4 Feature Pack 3. We define the max and min-width to keep it responsive and make work on small and medium devices. That’s good enough with HTML and reset of all the about styling. We will place the video source in the video tag and then add the logo inside the video description DIV. The wrapper will hold the video HTML5 tag and a description DIV with the class name video-description. Just like we have done in our previous article. We only need to define the video-wrapper. To place a logo over an HTML5 video, We will first take look the HTML code example. If you want to show your video on your website and want to make its branding then it’s a good idea to add your company logo. Sometimes we have a video and want to add a company logo to the video and this technique helps us to do so. The technique I am going to use is similar to the one we used in our previous article adding an Overlay Play Button over the video but with a bit of difference. Not only this but we can also add a text over the HTML5 video with the help of CSS absolute property. How about adding a log or image on the video? Yep! That’s quite easy to implement. In fact, we can animate the text in various ways over the picture by using CSS3 advance commands. You may know that - adding text on an image is entirely possible and seen a lot of time on different websites. Do you want to place a logo on the HTML5 video? In this tutorial, We will show you how to add it and align anywhere over the video by using little code of CSS and HTML.
0 Comments
Leave a Reply. |