diff --git a/cms/djangoapps/contentstore/views.py b/cms/djangoapps/contentstore/views.py
index ec529315b4..8bd07420d7 100644
--- a/cms/djangoapps/contentstore/views.py
+++ b/cms/djangoapps/contentstore/views.py
@@ -647,8 +647,6 @@ def unpublish_unit(request):
 
     return HttpResponse()
 
-
-
 @login_required
 @expect_json
 def clone_item(request):
@@ -952,11 +950,13 @@ def get_course_settings(request, org, course, name):
         raise PermissionDenied()
     
     course_module = modulestore().get_item(location)
+    course_details = CourseDetails.fetch(location)
     
     return render_to_response('settings.html', {
         'active_tab': 'settings-tab', 
         'context_course': course_module,
-        'course_details' : json.dumps(CourseDetails.fetch(location), cls=CourseDetailsEncoder) 
+        'course_details' : json.dumps(course_details, cls=CourseDetailsEncoder), 
+        'video_editor_html' : preview_component(request, course_details.intro_video_loc)
     })
         
 @expect_json
diff --git a/cms/static/js/models/settings/course_details.js b/cms/static/js/models/settings/course_details.js
index 3ae4a86f90..46a31bb9fe 100644
--- a/cms/static/js/models/settings/course_details.js
+++ b/cms/static/js/models/settings/course_details.js
@@ -36,5 +36,72 @@ CMS.Models.Settings.CourseDetails = Backbone.Model.extend({
 	urlRoot: function() {
 		var location = this.get('location');
 		return '/' + location.get('org') + "/" + location.get('course') + '/settings/' + location.get('name') + '/section/details';
+	},
+	
+	_videoprefix : /\s*<video\s*youtube="/g,
+	_videospeedparse : /\d+\.?\d*(?=:)/g,
+	_videokeyparse : /([^,\/]+)/g,
+	_videonosuffix : /[^\"]+/g,
+	_getNextMatch : function (regex, string, cursor) {
+		regex.lastIndex = cursor;
+		return regex.exec(string);
+	},
+	// the whole string for editing
+	getVideoSource: function() {
+		if (this.get('intro_video')) {
+			var cursor = 0;
+			var videostring = this.get('intro_video');
+			this._getNextMatch(this._videoprefix, videostring, cursor);
+			cursor = this._videoprefix.lastIndex;
+			return this._getNextMatch(this._videonosuffix, videostring, cursor);
+		}
+		else return "";
+	},
+	// the source closest to 1.0 speed
+	videosourceSample: function() {
+		if (this.get('intro_video')) {
+			var cursor = 0;
+			var videostring = this.get('intro_video');
+			this._getNextMatch(this._videoprefix, videostring, cursor);
+			cursor = this._videoprefix.lastIndex;
+			
+			// parse from [speed:id,/s?]* to find 1.0 or take first
+			var parsedspeed = this._getNextMatch(this._videospeedparse, videostring, cursor);
+			var bestkey;
+			if (parsedspeed) {
+				cursor = this._videospeedparse.lastIndex + 1;
+				var bestspeed = Number(parsedspeed);
+				bestkey = this._getNextMatch(this._videokeyparse, videostring, cursor);
+				cursor = this._videokeyparse.lastIndex + 1;
+				while (cursor < videostring.length && bestspeed != 1.0) {
+					parsedspeed = this._getNextMatch(this._videospeedparse, videostring, cursor);
+					cursor = this._videospeedparse.lastIndex + 1;
+					if (Math.abs(Number(parsedspeed) - 1.0) < Math.abs(bestspeed - 1.0)) {
+						bestspeed = Number(parsedspeed);
+						bestkey = this._getNextMatch(this._videokeyparse, videostring, cursor);
+					}
+					else this._getNextMatch(this._videokeyparse, videostring, cursor);
+					cursor = this._videokeyparse.lastIndex + 1;
+				}
+			}
+			else {
+				bestkey = this._getNextMatch(this._videokeyparse, videostring, cursor);
+			}
+			if (bestkey) {
+				// WTF? for some reason bestkey is an array [key, key] (same one repeated)
+				if (_.isArray(bestkey)) bestkey = bestkey[0];
+				return "http://www.youtube.com/embed/" + bestkey;
+			}
+			else return "";
+		}
+	},
+	save_videosource: function(newsource) {
+		// newsource either is <video youtube="speed:key, *"/> or just the "speed:key, *" string
+		// returns the videosource for the preview which iss the key whose speed is closest to 1
+		if (newsource == null) this.save({'intro_video': null}); 
+		else if (this._getNextMatch(this._videoprefix, newsource, 0)) this.save('intro_video', newsource);
+		else this.save('intro_video', '<video youtube="' + newsource + '"/>');
+		
+		return this.videosourceSample();
 	}
 });
diff --git a/cms/static/js/views/settings/main_settings_view.js b/cms/static/js/views/settings/main_settings_view.js
index b80cc3f48e..e28f40ffd2 100644
--- a/cms/static/js/views/settings/main_settings_view.js
+++ b/cms/static/js/views/settings/main_settings_view.js
@@ -82,8 +82,7 @@ CMS.Views.Settings.Details = Backbone.View.extend({
 		"blur textarea" : "updateModel",
 		'click .remove-course-syllabus' : "removeSyllabus",
 		'click .new-course-syllabus' : 'assetSyllabus',
-		'click .remove-course-introduction-video' : "removeVideo",
-		'click .new-course-introduction-video' : 'assetVideo',
+		'click .remove-course-introduction-video' : "removeVideo"
 	},
 	initialize : function() {
 		// TODO move the html frag to a loaded asset
@@ -110,9 +109,10 @@ CMS.Views.Settings.Details = Backbone.View.extend({
 		
 		this.$el.find('#course-overview').val(this.model.get('overview'));
 		
-		this.$el.find('.current-course-introduction-video iframe').attr('src', this.model.get('intro_video'));
+		this.$el.find('.current-course-introduction-video iframe').attr('src', this.model.videosourceSample());
 		if (this.model.has('intro_video')) {
 			this.$el.find('.remove-course-introduction-video').show();
+			this.$el.find('#course-introduction-video').val(this.model.getVideoSource());
 		}
 		else this.$el.find('.remove-course-introduction-video').hide();
 		
@@ -158,6 +158,10 @@ CMS.Views.Settings.Details = Backbone.View.extend({
 		case 'course-effort':
 			this.model.save('effort', $(event.currentTarget).val());
 			break;
+		case 'course-introduction-video':
+			var previewsource = this.model.save_videosource($(event.currentTarget).val());
+			this.$el.find(".current-course-introduction-video iframe").attr("src", previewsource);
+			break
 			
 		default:
 			break;
@@ -174,10 +178,11 @@ CMS.Views.Settings.Details = Backbone.View.extend({
 	},
 	
 	removeVideo: function() {
-		if (this.model.has('intro_video'))	this.model.save({'intro_video': null});
-	},
-	
-	assetVideo : function() {
-		// TODO implement
+		if (this.model.has('intro_video')) {
+			this.model.save_videosource(null);
+			this.$el.find(".current-course-introduction-video iframe").attr("src", "");
+			this.$el.find('#course-introduction-video').val("");
+		}
 	}
+	
 });
\ No newline at end of file
diff --git a/cms/static/sass/_settings.scss b/cms/static/sass/_settings.scss
index fdd3fdeab1..ab72bc464c 100644
--- a/cms/static/sass/_settings.scss
+++ b/cms/static/sass/_settings.scss
@@ -805,822 +805,4 @@
       }
     }
   }
-}
-.settings {
-  .settings-overview {
-    @extend .window;
-    @include clearfix;
-    display: table;
-    width: 100%;
-
-    // layout
-    .sidebar {
-      display: table-cell;
-      float: none;
-      width: 20%;
-      padding: 30px 0 30px 20px;
-      @include border-radius(3px 0 0 3px);
-      background: $lightGrey;      
-    }
-
-    .main-column {
-      display: table-cell;
-      float: none;
-      width: 80%;
-      padding: 30px 40px 30px 60px;
-    }
-
-    .settings-page-menu {
-      a {
-        display: block;
-        padding-left: 20px;
-        line-height: 52px;
-
-        &.is-shown {
-          background: #fff;
-          @include border-radius(5px 0 0 5px);
-        }
-      }
-    }
-
-    .settings-page-section {
-      > .alert {
-        display: none;
-
-        &.is-shown {
-          display: block;
-        }
-      }
-
-      > section {
-        display: none;
-        margin-bottom: 40px;
-
-        &.is-shown {
-          display: block;
-        }
-
-        &:last-child {
-          border-bottom: none;
-        }
-
-        > .title {
-          margin-bottom: 30px;
-          font-size: 28px;
-          font-weight: 300;
-          color: $blue;
-        }
-
-        > section {
-          margin-bottom: 100px;
-          @include clearfix;
-
-          header {
-            @include clearfix;
-            border-bottom: 1px solid $mediumGrey;
-            margin-bottom: 20px;
-            padding-bottom: 10px;
-
-            h3 {
-              color: $darkGrey;
-              float: left;
-
-              margin: 0 40px 0 0;
-              text-transform: uppercase;
-            }
-
-            .detail {
-              float: right;
-              marign-top: 3px;
-              color: $mediumGrey;
-              font-size: 13px;
-            }
-          }
-
-          &:last-child {
-            padding-bottom: 0;
-            border-bottom: none;
-          }
-        }
-      }
-    }
-
-    // form basics
-    label, .label {
-      padding: 0;
-      border: none;
-      background: none;
-      font-size: 15px;
-      font-weight: 400;
-
-      &.check-label {
-        display: inline;
-        margin-left: 10px;
-      }
-
-      &.ranges {
-        margin-bottom: 20px;
-      }
-    }
-
-    input, textarea {
-      @include transition(all 1s ease-in-out);
-      @include box-sizing(border-box);
-      font-size: 15px;
-
-      &.long {
-        width: 100%;
-        min-width: 400px;
-      }
-
-      &.tall {
-        height: 200px;
-      }
-
-      &.short {
-        min-width: 100px;
-        width: 25%;
-      }
-
-      &.date {
-
-      }
-
-      &:focus {
-        @include linear-gradient(tint($blue, 80%), tint($blue, 90%));
-        border-color: $blue;
-        outline: 0;
-      }
-
-      &:disabled {
-        border-color: $mediumGrey;
-        color: $mediumGrey;
-        background: #fff;
-      }
-    }
-
-    .input-default input, .input-default textarea {
-      color: $mediumGrey;
-      background: $lightGrey;
-    }
-
-    ::-webkit-input-placeholder {
-      color: $mediumGrey;
-      font-size: 13px;
-    }
-    :-moz-placeholder {  
-      color: $mediumGrey;  
-      font-size: 13px;
-    }
-
-    .field.ui-status {
-
-      > .input {
-        display: block !important;
-        margin-bottom: 15px;
-      }
-
-      .ui-status-input-checkbox input, .ui-status-input-radio input {
-        position: absolute;
-        top: -9999px;
-        left: -9999px;
-      }
-
-      label {
-        cursor: pointer;
-      }
-
-      .ui-status-input-checkbox input ~ label, .ui-status-input-radio input ~ label {
-        position: relative;
-        left: -30px;
-        display: inline-block;
-        z-index: 100;
-        margin: 0 0 0 5px;
-        padding-left: 30px;
-        color: $offBlack;
-        opacity: 0.50;
-        cursor: pointer;
-        @include transition(opacity 0.25s ease-in-out);
-
-        &:before {
-          display: inline-block;
-          margin-right: 10px;
-        }
-
-        &:after {
-         display: inline-block;
-         margin-left: 10px;
-        }
-
-        ~ .tip {
-         margin-top: 0;
-         @include transition(color 0.25s ease-in-out);
-        }
-      }
-
-      .ui-status-indic {
-        background: transparent url('../images/correct-icon.png') 0 0 no-repeat;
-        z-index: 10;
-        display: inline-block;
-        height: 20px;
-        width: 30px;
-        opacity: 0.50;
-        @include transition(opacity 0.25s ease-in-out);
-      }
-
-      .ss-check {
-        color: $green;
-      }
-
-      .ss-delete {
-        color: $red;
-      }
-
-      .ui-status-input-checkbox input:checked ~ label, .ui-status-input-radio input:checked ~ label {
-         opacity: 0.99;
-
-         &:after {
-         }
-
-         &:before {
-         }
-
-         ~ .tip {
-          color: $darkGrey;
-         }
-      }
-
-      .ui-status-input-checkbox input:checked ~ .ui-status-indic, .ui-status-input-radio input:checked ~ .ui-status-indic {
-        background: transparent url('../images/correct-icon.png') 0 0 no-repeat;
-        opacity: 0.99;
-      }
-
-      // disabled 
-      .ui-status-input-checkbox input:disabled, .ui-status-input-radio input:disabled {
-        color: $mediumGrey;
-      }
-
-      .ui-status-input-checkbox input:disabled ~ .ui-status-indic, .ui-status-input-radio input:disabled ~ .ui-status-indic {
-        color: $mediumGrey;
-      }
-    }
-
-    .tip {
-      color: $mediumGrey;
-      font-size: 13px;
-    }
-
-
-    // form layouts
-    .row {
-      margin-bottom: 30px;
-      padding-bottom: 30px;
-      border-bottom: 1px solid $lightGrey;
-
-      &:last-child {
-        margin-bottom: 0;
-        padding-bottom: 0;
-        border-bottom: none;
-      }
-
-      // structural labels, not semantic labels per se
-      > label, .label {
-        display: inline-block;
-        vertical-align: top;
-      }
-
-      // tips
-      .tip-inline {
-        display: inline-block;
-        margin-left: 10px;
-      }
-
-      .tip-stacked {
-        display: block;
-        margin-top: 10px;
-      }
-
-      // structural field, not semantic fields per se
-      .field {
-        display: inline-block;
-        width: 100%;
-
-        > input, > textarea, .input {
-          display: inline-block;
-
-          &:last-child {
-            margin-bottom: 0;
-          }
-
-          .group {
-            input, textarea {
-              margin-bottom: 5px;
-            }
-
-            .label, label {
-              font-size: 13px;
-            }
-          }
-
-          // multi-field
-          &.multi {
-            display: block;
-            background: tint($lightGrey, 50%);
-            padding: 15px;
-            @include border-radius(4px);
-            @include box-sizing(border-box);
-
-            .group {
-              margin-bottom: 10px;
-              max-width: 175px;
-
-              &:last-child {
-                margin-bottom: 0;
-              }
-
-              input, .input, textarea {
-
-              }
-
-              .tip-stacked {
-                margin-top: 0;
-              }
-            }
-          }
-
-          // multi stacked
-          &.multi-stacked {
-            
-            .group {
-              input, .input, textarea {
-                min-width: 370px;
-                width: 370px;
-              }
-            }
-          }
-
-          // multi-field inline
-          &.multi-inline {
-            @include clearfix;
-
-            .group {
-              float: left;
-              margin-right: 20px;
-
-              &:nth-child(2) {
-                margin-right: 0;
-              }
-
-              .input, input, textarea {
-                width: 100%;
-              }
-            }
-
-            .remove-item {
-              float: right;
-            }       
-          }
-        }
-
-        // input-list
-        .input-list {
-
-          .input {
-            margin-bottom: 15px;
-            padding-bottom: 15px;
-            border-bottom: 1px dotted $lightGrey;
-
-            &:last-child {
-              border: 0;
-            }
-          }
-        }
-
-        // enumerated inputs
-        &.enum {
-        }
-      }
-      
-      // layout - aligned label/field pairs 
-      &.row-col2 {
-
-        > label, .label {
-          width: 200px;
-        }
-
-        .field {
-          width: 400px ! important;
-        }
-
-        &.multi-inline {
-          @include clearfix;
-
-          .group {
-            width: 170px;
-          }  
-        }
-      }
-    }
-
-    // editing controls - adding
-    .new-item, .replace-item {
-      clear: both;
-      display: block;
-      margin-top: 10px;
-      padding-bottom: 10px;
-      @include grey-button;
-      @include box-sizing(border-box);
-    }
-
-
-    // editing controls - removing
-    .remove-item {
-      clear: both;
-      display: block;
-      margin-top: 10px;
-      opacity: 0.75;
-      font-size: 13px;
-      text-align: right;
-      @include transition(opacity 0.25s ease-in-out);
-
-
-      &:hover {
-        color: $blue;
-        opacity: 0.99;
-      }
-    }
-
-    // editing controls - preview
-    .input-existing {
-      display: block !important;
-
-      .current {
-        width: 100%;
-        margin: 10px 0;
-        padding: 10px;
-        @include box-sizing(border-box);
-        @include border-radius(5px);
-        font-size: 14px;
-        background: tint($lightGrey, 50%);
-        @include clearfix();
-      
-        .doc-filename {
-          display: inline-block;
-          width: 220px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-
-        .remove-doc-data {
-          display: inline-block;
-          margin-top: 0;
-          width: 150px;
-        }
-      }
-    }
-
-    // specific sections
-    .settings-details {
-
-    }
-
-    .settings-faculty {
-
-      .settings-faculty-members {
-
-        > header {
-          display: none;
-        }
-
-        .field .multi {
-          display: block;
-          margin-bottom: 40px;
-          padding: 20px;
-          background: tint($lightGrey, 50%);
-          @include border-radius(4px);
-          @include box-sizing(border-box);
-        }
-
-        .course-faculty-list-item {
-
-          .row {
-
-            &:nth-child(4) {
-              padding-bottom: 0;
-              border-bottom: none;
-            }
-          }
-
-          .remove-faculty-photo {
-            display: inline-block;
-          }
-        }
-
-        #course-faculty-bio-input {
-          margin-bottom: 0;
-        }
-
-        .new-course-faculty-item {
-        }
-
-        .current-faculty-photo {
-          overflow: hidden;
-          padding: 0;
-
-          img {
-            display: block;
-            @include box-shadow(0 1px 3px rgba(0,0,0,0.1));
-            padding: 10px;
-            border: 2px solid $mediumGrey;
-            background: #fff;
-          }
-        }
-      }
-    }
-
-    .settings-grading {
-
-
-      .course-grading-gradeweight, .course-grading-totalassignments, .course-grading-totalassignmentsdroppable {
-
-        input {
-        }
-      }
-    }
-
-    .settings-handouts {
-
-    }
-
-    .settings-problems {
-
-      > section {
-
-        &.is-shown {
-          display: block;
-        }
-      }
-    }
-
-    .settings-discussions {
-
-      .settings-discussions-categories .course-discussions-categories-list-item {
-
-        label {
-          display: none;
-        }
-
-        .group {
-          display: inline-block;
-        }
-
-        .remove-item {
-          display: inline-block !important;
-          margin-left: 10px;
-        }
-      }
-
-
-    }
-
-    // states
-    label.is-focused {
-      color: $blue;
-      @include transition(color 1s ease-in-out);
-    }
-
-    // extras/abbreviations
-    // .settings-extras {
-
-    //   > header {
-    //     cursor: pointer;
-
-    //     &.active {
-
-    //     }
-    //   }
-      
-    //    > div {
-    //     display: none;
-    //     @include transition(display 0.25s ease-in-out);
-
-    //     &.is-shown {
-    //       display: block;
-    //     }
-    //    }
-    // }
-
-    input.error, textarea.error {
-      border-color: $red;
-    }
-
-    .message-error {
-      display: block;
-      margin-top: 5px;
-      color: $red;
-      font-size: 13px;
-    }
-
-    // misc
-    .divide {
-      display: none;
-    }
-
-    i.ss-icon {
-      position: relative;
-      top: 1px;
-      margin-right: 5px;
-    }
-  }
-
-
-
-  h3 {
-    margin-bottom: 30px;
-    font-size: 15px;
-    font-weight: 700;
-    color: $blue;
-  }
-
-  .grade-controls {
-    @include clearfix;
-  }
-
-  .new-grade-button {
-    position: relative;
-    float: left;
-    display: block;
-    width: 29px;
-    height: 29px;
-    margin: 4px 10px 0 0;
-    border-radius: 20px;
-    border: 1px solid $darkGrey;
-    @include linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
-    background-color: #d1dae3;
-    @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
-    color: #6d788b;
-
-    .plus-icon {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      margin-left: -6px;
-      margin-top: -6px;
-    }
-  }
-
-  .grade-slider {
-    float: right;
-    width: 95%;
-    height: 80px;
-
-    .grade-bar {
-      position: relative;
-      width: 100%;
-      height: 50px;
-      background: $lightGrey;
-
-      .increments {
-        position: relative;
-
-        li {
-          position: absolute;
-          top: 52px;
-          width: 30px;
-          margin-left: -15px;
-          font-size: 9px;
-          text-align: center;
-
-          &.increment-0 {
-            left: 0;
-          }
-
-          &.increment-10 {
-            left: 10%;
-          }
-
-          &.increment-20 {
-            left: 20%;
-          }
-
-          &.increment-30 {
-            left: 30%;
-          }
-
-          &.increment-40 {
-            left: 40%;
-          }
-
-          &.increment-50 {
-            left: 50%;
-          }
-
-          &.increment-60 {
-            left: 60%;
-          }
-
-          &.increment-70 {
-            left: 70%;
-          }
-
-          &.increment-80 {
-            left: 80%;
-          }
-
-          &.increment-90 {
-            left: 90%;
-          }
-
-          &.increment-100 {
-            left: 100%;
-          }
-        }
-      }
-
-      .grades {
-        position: relative;
-
-        li {
-          position: absolute;
-          top: 0;
-          height: 50px;     
-          text-align: right;
-
-          &:hover,
-          &.is-dragging {
-            .remove-button {
-              display: block;
-            }
-          }
-
-          &.is-dragging {
-
-
-          }
-
-          .remove-button {
-            display: none;
-            position: absolute;
-            top: -17px;
-            right: 1px;
-            height: 17px;
-            font-size: 10px;
-          }
-
-          &:nth-child(1) {
-            background: #4fe696;
-          }
-
-          &:nth-child(2) {
-            background: #ffdf7e;
-          }
-
-          &:nth-child(3) {
-            background: #ffb657;
-          }
-
-          &:nth-child(4) {
-            background: #fb336c;
-          }
-
-          &:nth-child(5) {
-            background: #ef54a1;
-          }
-
-          .letter-grade {
-            display: block;
-            margin: 10px 15px 0 0;
-            font-size: 16px;
-            font-weight: 700;
-            line-height: 14px;
-          }
-
-          .range {
-            display: block;
-            margin-right: 15px;
-            font-size: 10px;
-            line-height: 12px;
-          }
-
-          .drag-bar {
-            position: absolute;
-            top: 0;
-            right: -1px;
-            height: 50px;
-            width: 2px;
-            background-color: #fff;
-            @include box-shadow(-1px 0 3px rgba(0,0,0,0.1));
-
-            cursor: ew-resize;
-            @include transition(none);
-
-            &:hover {
-              width: 6px;
-              right: -2px;
-            }
-          }
-        }
-      }
-    }
-  }
-}
+}
\ No newline at end of file
diff --git a/cms/templates/settings.html b/cms/templates/settings.html
index 4d62bf6c1f..d57eb9d87c 100644
--- a/cms/templates/settings.html
+++ b/cms/templates/settings.html
@@ -339,9 +339,7 @@ from contentstore import utils
                   </div>
 
                   <div class="input">
-                    <a href="#" class="new-item new-course-introduction-video add-video-data" id="course-introduction-video">
-                      <span class="upload-icon"></span>Upload Video
-                    </a>
+                    <input type="text" class="new-item new-course-introduction-video add-video-data" id="course-introduction-video" value="" placeholder="speed:id,speed:id" autocomplete="off">
                     <span class="tip tip-inline">Video restrictions go here</span>          
                   </div>
                 </div>
diff --git a/common/djangoapps/models/settings/course_details.py b/common/djangoapps/models/settings/course_details.py
index fb97784588..7d708e21c4 100644
--- a/common/djangoapps/models/settings/course_details.py
+++ b/common/djangoapps/models/settings/course_details.py
@@ -17,6 +17,7 @@ class CourseDetails:
         self.syllabus = None    # a pdf file asset
         self.overview = ""      # html to render as the overview
         self.intro_video = None    # a video pointer
+        self.intro_video_loc = None    # a video pointer
         self.effort = None      # int hours/week
 
     @classmethod
@@ -57,6 +58,7 @@ class CourseDetails:
         temploc = temploc._replace(name='video')
         try:
             course.intro_video = get_modulestore(temploc).get_item(temploc).definition['data']
+            course.intro_video_loc = temploc
         except ItemNotFoundError:
             pass