creating a video data definition
I'm adding a video embed data definition that inserts a video (specifically YouTube) into a responsive iFrame on a page. It partially works, it has space on a page as if there is a video there but it's invisible. I can also see it in the source code. I feel like there must be something wrong with my format.
Here's the data definition (which I think is fine). It's in a group called responsive-video:
<system-data-structure>
<text identifier="newstitle" label="Title" default="Article Title" required="true"/>
<text identifier="date" label="Date of Release/Announcement "/>
<text identifier="videos" label="Video URL" help-text="The URL for a Video - IFRAME code preferred with ?rel=0 parameter"/>
<text wysiwyg="true" identifier="text" label="Body" required="true"/>
<asset type="file" identifier="graphic" label="Photo"/>
<text identifier="caption" label="Photo Caption"/>
<text type="radiobutton" identifier="photo-location" label="Location or Size of Photo" default="Small" help-text="Top requires a 700px image; Small - 225px; Medium - 350px">
<radio-item value="Top"/>
<radio-item value="Small"/>
<radio-item value="Medium"/>
</text>
<group identifier="responsive-video" label="Video" collapsed="true">
<text identifier="video-URL" label="Video URL"/>
</group>
<group identifier="gallery" label="Multimedia Gallery" collapsed="true">
<group identifier="gallery-item" label="Item" multiple="true" maximum-number="15">
<asset type="file" identifier="moregraphics" label="Additional Photos"/>
<text identifier="morecaption" label="Additional Photo Caption"/>
<text identifier="multimedia-link" label="Multimedia URL" help-text="URL to a video or other media"/>
<text identifier="multimedia-caption" label="Multimedia Caption"/>
</group>
</group>
<text type="dropdown" identifier="alignment" label="Align Photo and Video" default="Left">
<dropdown-item value="Right"/>
<dropdown-item value="Left"/>
</text>
<asset type="block" identifier="sm-buttons" label="Social Media Buttons" render-content-depth="unlimited"/>
<group identifier="sidebar" label="Sidebar" collapsed="true">
<asset type="file" identifier="sidebar-image" label="Sidebar Image"/>
<text wysiwyg="true" identifier="sidebar-text" label="Sidebar Text"/>
</group>
</system-data-structure>
Here's the format:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output indent="yes" method="xml"/>
<!-- Find the first configuration, and copy the template content -->
<xsl:template match="/system-data-structure" name="original">
<!-- Give the output a root tag -->
<h1 id="title"><xsl:value-of select="newstitle"/></h1>
<xsl:if test="date != ''">
<p><xsl:value-of select="date"/></p>
</xsl:if>
<div class="bodytext">
<!-- MULTIMEDIA -->
<xsl:if test="graphic//path != '/' or videos != ''">
<div>
<xsl:if test="photo-location = 'Top'">
<xsl:attribute name="class">fullSize</xsl:attribute>
</xsl:if>
<xsl:if test="photo-location = 'Small'">
<xsl:attribute name="class">multimedia</xsl:attribute>
<xsl:attribute name="style">float:<xsl:value-of select="alignment"/>; margin-<xsl:value-of select="alignment"/>:0px;</xsl:attribute>
</xsl:if>
<xsl:if test="photo-location = 'Medium'">
<xsl:attribute name="class">multimedia medSize</xsl:attribute>
<xsl:attribute name="style">float:<xsl:value-of select="alignment"/>; margin-<xsl:value-of select="alignment"/>:0px;</xsl:attribute>
</xsl:if>
<xsl:for-each select="graphic">
<xsl:if test="//path != '/'">
<img alt="{name}" src="{path}"/>
</xsl:if>
</xsl:for-each>
<xsl:if test="caption != ''">
<div class="caption"><xsl:value-of select="caption"/></div>
</xsl:if>
<xsl:if test="gallery/gallery-item/moregraphics != '/'">
<div id="GalleryLink"><a class="gphoto" href="{graphic[1]/path}" rel="prettyPhoto[ArticleImages]" title="{caption}">Web Exclusive Photos</a>
<xsl:if test="videos != ''">
<a class="gvid JournalLink" href="#artVid">Watch Video</a>
<div id="artVid">
<div><iframe frameborder="0" height="284" src="{videos}" width="500"></iframe></div>
</div>
</xsl:if>
</div>
<div id="PGallery" style="display:none;">
<xsl:for-each select="gallery/gallery-item">
<xsl:if test="moregraphics/path != '/'">
<a href="{moregraphics/path}" rel="prettyPhoto[ArticleImages]" title="{morecaption}"><img src="{moregraphics/path}"/></a>
</xsl:if>
<xsl:if test="multimedia-link != ''">
<a href="{multimedia-link}" rel="prettyPhoto[ArticleImages]" title="{multimedia-caption}">Watch Video</a>
</xsl:if>
<!--
<xsl:if test="morecaption != ''">
<div class="caption"><xsl:value-of select="morecaption"/></div>
</xsl:if>
-->
</xsl:for-each>
</div>
</xsl:if>
</div>
</xsl:if>
<!--/ MULTIMEDIA -->
<xsl:copy-of select="text/node()"/>
<xsl:for-each select="responsive-video">
<xsl:if test="video-URL != ''">
<div class="Flexible-iFrame">
<iframe width="560" height="315" src="{video-URL}" frameborder="0" ></iframe>
</div>
</xsl:if>
</xsl:for-each>
<xsl:for-each select="sidebar">
<xsl:if test="sidebar-text != ''">
<div id="SideBar">
<xsl:if test="sidebar-image/path != '/'">
<img alt="{sidebar-image/name}" class="Left" src="{sidebar-image/link}" title="{sidebar-image/name}"/>
</xsl:if>
<xsl:copy-of select="sidebar-text/node()"/>
</div>
</xsl:if>
</xsl:for-each>
</div>
<div class="SM-buttons">
<xsl:copy-of select="sm-buttons/content"/>
</div>
</xsl:template>
</xsl:stylesheet>
I think it technically works but I must have written this snippet incorrectly causing the video to not appear
<xsl:for-each select="responsive-video">
<xsl:if test="video-URL != ''">
<div class="Flexible-iFrame">
<iframe width="560" height="315" src="{video-URL}" frameborder="0" ></iframe>
</div>
</xsl:if>
</xsl:for-each>
Discussions are closed to public comments.
If you need help with Cascade CMS please
start a new discussion.
Keyboard shortcuts
Generic
? | Show this help |
---|---|
ESC | Blurs the current field |
Comment Form
r | Focus the comment reply box |
---|---|
^ + ↩ | Submit the comment |
You can use Command ⌘
instead of Control ^
on Mac
1 Posted by Ryan Griffith on 04 May, 2015 06:29 PM
Hi Matthew,
Curious, but can you confirm if the video URL begins with
https
orhttp
? If it begins withhttp
, try switching tohttps
to see if perhaps the browser is preventing the un-secure content from loading within Cascade, which is most likely running onhttps
.Please let me know if you have any questions.
Thanks!
2 Posted by matthew.wren on 04 May, 2015 06:36 PM
I tried both
http
andhttps
and neither seemed to work. I have two versions of the page published.Original
With Video
If you scroll down you can see where the video should be.
3 Posted by Ryan Griffith on 04 May, 2015 06:56 PM
Thank you for providing the links, Matthew.
It looks like you will want to adjust either the URL entered into the data definition field or your Format to match YouTube's embed URL:
Your sample page uses the following:
Please let me know if you have any questions.
Thanks!
4 Posted by matthew.wren on 04 May, 2015 07:00 PM
Ryan,
I adjusted the XSLT so the URL is
https://www.youtube.com/embed/{video-URL}
and I'll change the Data Definition to specify that it'll only need the YouTube id number. This definitely seems to work so I'm going to go with this route. Thanks for all your help!5 Posted by Ryan Griffith on 04 May, 2015 07:05 PM
Thank you for following up, Matthew,
My suggestion would definitely be to have the user enter the video ID into the field as opposed to the URL so you have the most control over the URL.
Alternatively, you could make your Format smart enough to handle both situations. In other words, check to see if the URL starts with
http
and if it does, attempt to extract the ID out. It's error prone, but could provide a bit more flexibility in case you have users who accidentally copy paste the entire "watch" URL.I'm going to go ahead and close this discussion, please feel free to comment or reply to re-open if you have any additional questions.
Have a great day!
Ryan Griffith closed this discussion on 04 May, 2015 07:05 PM.