Monday, July 30, 2012

Easily embed Youtube videos, Javascript, styles and other markup into a SharePoint 2013 page with the Script Editor WebPart

Instructions below are executed within a Team Site template:
  1. Select the ‘Edit’ icon in the top right corner of the page to edit the page

    EmbedCode0
  2. Select ‘Page’ in the ribbon, click ‘Embed Code

    EmbedCode
  3. Enter some script, styles, embed code,… in the editor box

    Javascript example
    EmbedCode2

    Youtube example
    EmbedCode3

    EmbedCode4

    Notice the preview of the embedded video
  4. Click ‘Insert
  5. Save the page with ‘Save & Close’ in the top right corner.
Some remarks:
  • After clicking ‘Insert’, a Script Editor WebPart will be automatically inserted into the page - only if you’re using embedded code.

    ScriptEditorWebpart
  • Default Chrome type is ‘None’
  • The Script Editor WebPart is also available as webpart under ‘Media and Content’

    EmbedCode5
  • You can still use the Content Editor Webpart to achieve the same results. The main difference between the two is that the Content Editor WebPart  is more focused to  enter rich text content, while the new Script Editor WebPart is more focused to insert HTML snippets and scripts.