Add video in HTML Popup on Arcmap
You are on the right track with XLS, however when working with YouTube videos in HTML you need to use an <iframe>
to display the video. The <object>
and <embed>
tag combination only works with video that have not been encode through YouTube or other video service, for example: mp4, Adobe Flash, or ogg.
- Rewrite the URL from
https://www.youtube.com/watch?v=lncOvjE4Fko
tohttps://www.youtube.com/embed/lncOvjE4Fko
This will allow the video to be played natively in the popup. - If you want the video to start automatically when the page loads add
?autoplay=1
to the end of the URL. - Replace the piece of code
<object width="425" height="355">...</object>
and put in the following:
<iframe id="ytplayer" type="text/html" width="640" height="390" src="**URL_GOES_HERE**" frameborder="0"></iframe>
The width and height can be change to be what ever works best for your size of popup, if you use 100%
for both height and width it will auto size to window size.
Now when you open the popup the <iframe>
will load the video and you should see the play button or if you added the ?autoplay=1
parameter in the URL it will start playing automatically.
Here is your code with the field name VIDEO check in the XLS template.
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:msxsl="urn:schemas-microsoft-com:xslt">
<xsl:variable name="ignoreFieldNames" select="'|OBJECTID|Shape|Shape_Length|Shape_Area|ATTACHMENTID|REL_OBJECTID|CONTENT_TYPE|ATT_NAME|DATA_SIZE|DATA|'"/>
<xsl:template match="/">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
</head>
<body>
<table>
<tr style="text-align:center;font-weight:bold;background:">
</tr>
<xsl:apply-templates select="FieldsDoc/Attachments" />
<tr>
<td>
<table>
<xsl:choose>
<xsl:when test="FieldsDoc/Fields/Field/FieldName">
<xsl:apply-templates select="FieldsDoc/Fields/Field/FieldName[not(contains($ignoreFieldNames, concat(concat('|', text()), '|')))]/.." />
</xsl:when>
<xsl:otherwise>
<xsl:apply-templates select="FieldsDoc/Fields/Field" />
</xsl:otherwise>
</xsl:choose>
</table>
</td>
</tr>
</table>
</body>
</html>
</xsl:template>
<xsl:template match="Field">
<tr>
<xsl:if test="FieldName">
<td>
<xsl:value-of select="FieldName"/>
</td>
</xsl:if>
<td>
<xsl:choose>
<xsl:when test="FieldName[starts-with(., 'VIDEO')]">
<iframe id="ytplayer" type="text/html" width="640" height="390" frameborder="0">
<xsl:attribute name="src"><xsl:value-of select="FieldValue"/>
</xsl:attribute>
<xsl:value-of select="FieldValue"/>
</iframe>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="FieldValue"/>
</xsl:otherwise>
</xsl:choose>
</td>
</tr>
</xsl:template>
</xsl:stylesheet>