Editing the Embed Code for a SharePoint 2013 Video Content Type

— Web Design & Development

The other day I needed to change the embed code for a video in a publishing site’s “Images” library that was using the video content type in SharePoint 2013. This content type–based on the document set I believe–allows you to either upload a video file, provide a URL to a video file, or paste in some embed code (e.g. from YouTube). Unfortunately there is no clear way to modify the embed code in the SharePoint UI after the “item” is saved. I figured I could update the embed code using the REST API, but that turned out to be a little more difficult than it should be.

I could query for the item, but the field with the embed code was not returned. Using $select=* returns a bunch of fields, but none with the embed code. I found the field name for the embed code here: https://stackoverflow.com/questions/23520632/how-to-retrieve-embedded-video-code-in-sharepoint-2013-library-in-javascript. With that information I was able to view the current embed code using this REST query (the item’s ID is 722):

http://siteurl/_api/web/lists/getbytitle('Images')/items(722)?$select=VideoSetEmbedCode

The embed code is escaped when it is returned by the REST API, but I discovered that it should not be escaped when updating the field value. Here is the code I used to update it (I just typed this into the Chrome dev tools console; jQuery was already available on the page so that’s what I used):

var contentData = JSON.stringify({
  '__metadata': {
    'type': 'SP.Data.PublishingImagesItem'
  },
  'VideoSetEmbedCode': '<iframe width="640" height="360" src="https://www.youtube.com/embed/somevideoid" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>'
});

$.ajax({
  url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Images')/items(722)",
  type: "POST",
  data: contentData,
  headers: {
    "accept": "application/json;odata=verbose",
    "content-type": "application/json;odata=verbose",
    "content-length": contentData.length,
    "X-RequestDigest": $("#__REQUESTDIGEST").val(),
    "X-HTTP-Method": "MERGE",
    "If-Match": "*"
  },
  success: function(data) {
    console.log(data);
  }
});

This successfully updated the embed code for the item. ?