Embed video tag in rich text editor is not working in AEM as a cloud service

[Venkata-Nelluri]

Hi,

I was trying to embed a video in rich text editor through source edit as below .On saving the dialog the video tag is getting saved in the property but when I open the dialog again the video tag is not appearing and at the same time the video is not being displayed on the page too .

<video width="100%"><source src="videoUrl" type="video/mp4"></source></video>

I have tried adding the video tag in the XSSProtection config file, unfortunately that didn't work .

[kapil_rajoria]

Hi @Venkata-Nelluri can you share the code which you have added in xssprotection config file?

Please try this:

<tag name="video" action="validate">
    <attribute name="width">
        <regexp-list>
            <regexp name="percentage" value="\d+%" />
        </regexp-list>
    </attribute>
</tag>

<tag name="source" action="validate">
    <attribute name="src">
        <regexp-list>
            <regexp name="anything" value=".*" />
        </regexp-list>
    </attribute>
    <attribute name="type">
        <regexp-list>
            <regexp name="video-mp4" value="video/mp4" />
        </regexp-list>
    </attribute>
</tag>

Also, please check your RTE is correctly made in .content.xml or use the OOTB text component for testing.

[Venkata-Nelluri]

Hi @kapil_rajoria ,Thanks for the response

I have tried with the given configuration ,still it's not working .Please find the dialog structure I have created for the reference.

[MukeshYadav_]

Hi @Venkata-Nelluri ,

Please try below rules in config which is working for me.

<tag name="video" action="validate">

<attribute name="width">

<regexp-list>

<regexp name="positivePercentage" />

</regexp-list>

</attribute>

</tag>

<tag name="source" action="validate">

<attribute name="src">

<regexp-list>

<regexp name="anything" />

</regexp-list>

</attribute>

<attribute name="type">

<regexp-list>

<regexp name="anything" />

</regexp-list>

</attribute>

</tag>

<video width="100%"><source src="/content/dam/project/url.mp4" type="video/mp4"></source></video>

 You may use JS to control the video with other attributes

Thanks  

[kapil_rajoria · Accepted solution]

Hi @Venkata-Nelluri for some reason doing the entry of source tag seems to be not working in config file. @arunpatidar can you help with the same? The code is above.

@Venkata-Nelluriif you can use this html instead:
<video src="/asset_path/video.mp4" data-type="mp.4"></video> the below code works fine:

<tag name="video" action="validate">
			<attribute name="src">
				<regexp-list>
					<regexp name="anything" value=".*" />
				</regexp-list>
			</attribute>
			<attribute name="data-type">
				<regexp-list>
					<regexp name="anything" value=".*" />
				</regexp-list>
			</attribute>
			<attribute name="loop">
				<regexp-list>
					<regexp name="anything" value=".*" />
				</regexp-list>
			</attribute>
			<attribute name="autoplay">
				<regexp-list>
					<regexp name="anything" value=".*" />
				</regexp-list>
			</attribute>
			<attribute name="muted">
				<regexp-list>
					<regexp name="anything" value=".*" />
				</regexp-list>
			</attribute>
			<attribute name="controls">
				<regexp-list>
					<regexp name="anything" value=".*" />
				</regexp-list>
			</attribute>
            <attribute name="width">
        	 <regexp-list>
            	<regexp name="percentage" value="\d+%|100%" />
       	     </regexp-list>
    		</attribute>
		</tag>

When I am putting the source tag validation, the above code also fails but works well in without it.

[kautuk_sahni]

@Venkata-Nelluri Did you find the suggestion helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!

[Venkata-Nelluri]

Thanks you all for your solutions.

The below solution worked for me 

<!-- Video tag -->

<tag name="video" action="validate">

<attribute name="src">

<regexp-list>

<regexp name="anything" value=".*" />

</regexp-list>

</attribute>

<attribute name="data-type">

<regexp-list>

<regexp name="anything" value=".*" />

</regexp-list>

</attribute>

<attribute name="loop">

<regexp-list>

<regexp name="anything" value=".*" />

</regexp-list>

</attribute>

<attribute name="autoplay">

<regexp-list>

<regexp name="anything" value=".*" />

</regexp-list>

</attribute>

<attribute name="muted">

<regexp-list>

<regexp name="anything" value=".*" />

</regexp-list>

</attribute>

<attribute name="controls">

<regexp-list>

<regexp name="anything" value="true" />

</regexp-list>

</attribute>

<attribute name="width">

<regexp-list>

<regexp name="percentage" value="\d+%|100%" />

</regexp-list>

</attribute>

</tag>

I have embed the video tag as below in rich text editor 

<video width="100%" src="videoURL" data-type="mp.4" controls="true">&nbsp;</video>