!
Adding and Embedding Media to Sitecore
You are able to add dynamic media to Sitecore by Embedding media into a page. This
content can include Youtube Videos, Vimeo videos, Social Media Widgets, and other
iFrames. To add these types of media to Sitecore you will need to modify the code given
to you so that it can be used in Sitecore.
!
Example Youtube Video Embed Code:
<iframe width="380" height="285" src="//www.youtube.com/embed/42OkTTfgBP8"
frameborder="0" allowfullscreen></iframe>
!
Changes made to be used in Sitecore:
<div class=“fitVids”>
[iframe width="380" height="285" src="//www.youtube.com/embed/42OkTTfgBP8"
frameborder="0" allowfullscreen]
</div>
!
As you can see the < and > have been replaced with [ and ]. The closing tag </iframe>
has also been deleted.
!
!
Example - Embed Youtube Video
In this example we will go through getting the code from YouTube to embed into
Sitecore, Pasting it into Sitecore, and then modifying it so it works on the page in all
sizes.
!
1. Open an internet browser such as Internet Explorer, Safari, Google Chrome, or
Firefox to the Youtube video you would like to embed into Sitecore.
websupport@drexel.edu
215.895.0202
! of 7
1
!
2. Click on the “Share” tab bellow the video.
!
!
!
!
!
!
!
!
!
!
!
websupport@drexel.edu
215.895.0202
! of 7
2
!
3. You will see a new section below Share appear. Click on the “Embed” tab.
4. Highlight the long piece of code beginning with <iframe
!
!
websupport@drexel.edu
215.895.0202
! of 7
3
!
5. Copy the code by pressing “Ctrl + C” on your keyboard or by going to “Edit -> Copy”
in the menu of your internet browser.
6. In Sitecore click on the “Edit HTML button” for your webpage’s content
!
These directions assume that you already have an image in your site.
If you do not please first insert an image and then follow these
directions.
!
!
!
!
websupport@drexel.edu
215.895.0202
! of 7
4
!
7. Locate where you would like to insert your video and paste the code from
Youtube into the HTML Editor. You can paste the code by pressing “CTRL + V” or
by going to “Edit -> Paste in the top menu bar.
!
!
8. Now that we have the code in our HTML Editor we will need to edit it so it works in
Sitecore. First remove the </iframe> at the end of the line.
websupport@drexel.edu
215.895.0202
! of 7
5
!
9. Change the < and > into [ and ]
10. Add a <div class=“fitVids"> before the video code.
11. Add a </div> closing tag to complete the div
!
12. To accept the changes press “Accept” at the far bottom right.
!
!
!
!
!
!
!
websupport@drexel.edu
215.895.0202
! of 7
6
!
13. Make sure to click “Save” at the top left of Sitecore to save your changes.
14. To see the result of your classes Click “Display” under the Review tab at the top of
Sitecore.
websupport@drexel.edu
215.895.0202
! of 7
7
!