diff --git a/xblocks_contrib/video/ajax_handler_mixin.py b/xblocks_contrib/video/ajax_handler_mixin.py
new file mode 100644
index 00000000..a0dd5e9b
--- /dev/null
+++ b/xblocks_contrib/video/ajax_handler_mixin.py
@@ -0,0 +1,45 @@
+# NOTE: Code has been copied from the following source file
+# https://github.com/openedx/edx-platform/blob/master/xmodule/x_module.py#L739
+
+class XModuleToXBlockMixin:
+    """
+    Common code needed by XModule and XBlocks converted from XModules.
+    """
+    @property
+    def ajax_url(self):
+        """
+        Returns the URL for the ajax handler.
+        """
+        return self.runtime.handler_url(self, 'xmodule_handler', '', '').rstrip('/?')
+
+    @XBlock.handler
+    def xmodule_handler(self, request, suffix=None):
+        """
+        XBlock handler that wraps `handle_ajax`
+        """
+        class FileObjForWebobFiles:
+            """
+            Turn Webob cgi.FieldStorage uploaded files into pure file objects.
+
+            Webob represents uploaded files as cgi.FieldStorage objects, which
+            have a .file attribute.  We wrap the FieldStorage object, delegating
+            attribute access to the .file attribute.  But the files have no
+            name, so we carry the FieldStorage .filename attribute as the .name.
+
+            """
+            def __init__(self, webob_file):
+                self.file = webob_file.file
+                self.name = webob_file.filename
+
+            def __getattr__(self, name):
+                return getattr(self.file, name)
+
+        # WebOb requests have multiple entries for uploaded files.  handle_ajax
+        # expects a single entry as a list.
+        request_post = MultiDict(request.POST)
+        for key in set(request.POST.keys()):
+            if hasattr(request.POST[key], "file"):
+                request_post[key] = list(map(FileObjForWebobFiles, request.POST.getall(key)))
+
+        response_data = self.handle_ajax(suffix, request_post)
+        return Response(response_data, content_type='application/json', charset='UTF-8')
diff --git a/xblocks_contrib/video/bumper_utils.py b/xblocks_contrib/video/bumper_utils.py
new file mode 100644
index 00000000..f9f2f5b1
--- /dev/null
+++ b/xblocks_contrib/video/bumper_utils.py
@@ -0,0 +1,149 @@
+# NOTE: Code has been copied from the following source files
+# https://github.com/openedx/edx-platform/blob/master/xmodule/video_block/bumper_utils.py
+"""
+Utils for video bumper
+"""
+
+
+import copy
+import json
+import logging
+from collections import OrderedDict
+from datetime import datetime, timedelta
+
+import pytz
+from django.conf import settings
+
+from .video_utils import set_query_parameter
+
+try:
+    import edxval.api as edxval_api
+except ImportError:
+    edxval_api = None
+
+log = logging.getLogger(__name__)
+
+
+def get_bumper_settings(video):
+    """
+    Get bumper settings from video instance.
+    """
+    bumper_settings = copy.deepcopy(getattr(video, 'video_bumper', {}))
+
+    # clean up /static/ prefix from bumper transcripts
+    for lang, transcript_url in bumper_settings.get('transcripts', {}).items():
+        bumper_settings['transcripts'][lang] = transcript_url.replace("/static/", "")
+
+    return bumper_settings
+
+
+def is_bumper_enabled(video):
+    """
+    Check if bumper enabled.
+
+    - Feature flag ENABLE_VIDEO_BUMPER should be set to True
+    - Do not show again button should not be clicked by user.
+    - Current time minus periodicity must be greater that last time viewed
+    - edxval_api should be presented
+
+    Returns:
+         bool.
+    """
+    bumper_last_view_date = getattr(video, 'bumper_last_view_date', None)
+    utc_now = datetime.utcnow().replace(tzinfo=pytz.utc)
+    periodicity = settings.FEATURES.get('SHOW_BUMPER_PERIODICITY', 0)
+    has_viewed = any([
+        video.bumper_do_not_show_again,
+        (bumper_last_view_date and bumper_last_view_date + timedelta(seconds=periodicity) > utc_now)
+    ])
+    is_studio = getattr(video.runtime, "is_author_mode", False)
+    return bool(
+        not is_studio and
+        settings.FEATURES.get('ENABLE_VIDEO_BUMPER') and
+        get_bumper_settings(video) and
+        edxval_api and
+        not has_viewed
+    )
+
+
+def bumperize(video):
+    """
+    Populate video with bumper settings, if they are presented.
+    """
+    video.bumper = {
+        'enabled': False,
+        'edx_video_id': "",
+        'transcripts': {},
+        'metadata': None,
+    }
+
+    if not is_bumper_enabled(video):
+        return
+
+    bumper_settings = get_bumper_settings(video)
+
+    try:
+        video.bumper['edx_video_id'] = bumper_settings['video_id']
+        video.bumper['transcripts'] = bumper_settings['transcripts']
+    except (TypeError, KeyError):
+        log.warning(
+            "Could not retrieve video bumper information from course settings"
+        )
+        return
+
+    sources = get_bumper_sources(video)
+    if not sources:
+        return
+
+    video.bumper.update({
+        'metadata': bumper_metadata(video, sources),
+        'enabled': True,  # Video poster needs this.
+    })
+
+
+def get_bumper_sources(video):
+    """
+    Get bumper sources from edxval.
+
+    Returns list of sources.
+    """
+    try:
+        val_profiles = ["desktop_webm", "desktop_mp4"]
+        val_video_urls = edxval_api.get_urls_for_profiles(video.bumper['edx_video_id'], val_profiles)
+        bumper_sources = [url for url in [val_video_urls[p] for p in val_profiles] if url]
+    except edxval_api.ValInternalError:
+        # if no bumper sources, nothing will be showed
+        log.warning(
+            "Could not retrieve information from VAL for Bumper edx Video ID: %s.", video.bumper['edx_video_id']
+        )
+        return []
+
+    return bumper_sources
+
+
+def bumper_metadata(video, sources):
+    """
+    Generate bumper metadata.
+    """
+    transcripts = video.get_transcripts_info(is_bumper=True)
+    unused_track_url, bumper_transcript_language, bumper_languages = video.get_transcripts_for_student(transcripts)
+
+    metadata = OrderedDict({
+        'saveStateUrl': video.ajax_url + '/save_user_state',
+        'showCaptions': json.dumps(video.show_captions),
+        'sources': sources,
+        'streams': '',
+        'transcriptLanguage': bumper_transcript_language,
+        'transcriptLanguages': bumper_languages,
+        'transcriptTranslationUrl': set_query_parameter(
+            video.runtime.handler_url(video, 'transcript', 'translation/__lang__').rstrip('/?'), 'is_bumper', 1
+        ),
+        'transcriptAvailableTranslationsUrl': set_query_parameter(
+            video.runtime.handler_url(video, 'transcript', 'available_translations').rstrip('/?'), 'is_bumper', 1
+        ),
+        'publishCompletionUrl': set_query_parameter(
+            video.runtime.handler_url(video, 'publish_completion', '').rstrip('?'), 'is_bumper', 1
+        ),
+    })
+
+    return metadata
diff --git a/xblocks_contrib/video/cache_utils.py b/xblocks_contrib/video/cache_utils.py
new file mode 100644
index 00000000..45ff22b2
--- /dev/null
+++ b/xblocks_contrib/video/cache_utils.py
@@ -0,0 +1,102 @@
+# NOTE: Code has been copied from the following source files
+# https://github.com/openedx/edx-platform/blob/master/openedx/core/lib/cache_utils.py
+"""
+Utilities related to caching.
+"""
+
+
+import itertools
+
+import wrapt
+from django.utils.encoding import force_str
+
+from edx_django_utils.cache import RequestCache
+
+
+def request_cached(namespace=None, arg_map_function=None, request_cache_getter=None):
+    """
+    A function decorator that automatically handles caching its return value for
+    the duration of the request. It returns the cached value for subsequent
+    calls to the same function, with the same parameters, within a given request.
+
+    Notes:
+        - We convert arguments and keyword arguments to their string form to build the cache key. So if you have
+          args/kwargs that can't be converted to strings, you're gonna have a bad time (don't do it).
+        - Cache key cardinality depends on the args/kwargs. So if you're caching a function that takes five arguments,
+          you might have deceptively low cache efficiency.  Prefer functions with fewer arguments.
+        - WATCH OUT: Don't use this decorator for instance methods that take in a "self" argument that changes each
+          time the method is called. This will result in constant cache misses and not provide the performance benefit
+          you are looking for. Rather, change your instance method to a class method.
+        - Benchmark, benchmark, benchmark! If you never measure, how will you know you've improved? or regressed?
+
+    Arguments:
+        namespace (string): An optional namespace to use for the cache. By default, we use the default request cache,
+            not a namespaced request cache. Since the code automatically creates a unique cache key with the module and
+            function's name, storing the cached value in the default cache, you won't usually need to specify a
+            namespace value.
+            But you can specify a namespace value here if you need to use your own namespaced cache - for example,
+            if you want to clear out your own cache by calling RequestCache(namespace=NAMESPACE).clear().
+            NOTE: This argument is ignored if you supply a ``request_cache_getter``.
+        arg_map_function (function: arg->string): Function to use for mapping the wrapped function's arguments to
+            strings to use in the cache key. If not provided, defaults to force_text, which converts the given
+            argument to a string.
+        request_cache_getter (function: args, kwargs->RequestCache): Function that returns the RequestCache to use.
+            If not provided, defaults to edx_django_utils.cache.RequestCache.  If ``request_cache_getter`` returns None,
+            the function's return values are not cached.
+
+    Returns:
+        func: a wrapper function which will call the wrapped function, passing in the same args/kwargs,
+              cache the value it returns, and return that cached value for subsequent calls with the
+              same args/kwargs within a single request.
+    """
+    @wrapt.decorator
+    def decorator(wrapped, instance, args, kwargs):
+        """
+        Arguments:
+            args, kwargs: values passed into the wrapped function
+        """
+        # Check to see if we have a result in cache.  If not, invoke our wrapped
+        # function.  Cache and return the result to the caller.
+        if request_cache_getter:
+            request_cache = request_cache_getter(args if instance is None else (instance,) + args, kwargs)
+        else:
+            request_cache = RequestCache(namespace)
+
+        if request_cache:
+            cache_key = _func_call_cache_key(wrapped, arg_map_function, *args, **kwargs)
+            cached_response = request_cache.get_cached_response(cache_key)
+            if cached_response.is_found:
+                return cached_response.value
+
+        result = wrapped(*args, **kwargs)
+
+        if request_cache:
+            request_cache.set(cache_key, result)
+
+        return result
+
+    return decorator
+
+
+def _func_call_cache_key(func, arg_map_function, *args, **kwargs):
+    """
+    Returns a cache key based on the function's module,
+    the function's name, a stringified list of arguments
+    and a stringified list of keyword arguments.
+    """
+    arg_map_function = arg_map_function or force_str
+
+    converted_args = list(map(arg_map_function, args))
+    converted_kwargs = list(map(arg_map_function, _sorted_kwargs_list(kwargs)))
+
+    cache_keys = [func.__module__, func.__name__] + converted_args + converted_kwargs
+    return '.'.join(cache_keys)
+
+
+def _sorted_kwargs_list(kwargs):
+    """
+    Returns a unique and deterministic ordered list from the given kwargs.
+    """
+    sorted_kwargs = sorted(kwargs.items())
+    sorted_kwargs_list = list(itertools.chain(*sorted_kwargs))
+    return sorted_kwargs_list
diff --git a/xblocks_contrib/video/content.py b/xblocks_contrib/video/content.py
new file mode 100644
index 00000000..b57e05fa
--- /dev/null
+++ b/xblocks_contrib/video/content.py
@@ -0,0 +1,60 @@
+# NOTE: Original code has been copied from the following file: 
+# https://github.com/openedx/edx-platform/blob/farhan/extract-video-xblock/xmodule/contentstore/content.py#L28
+
+
+class StaticContent:  # lint-amnesty, pylint: disable=missing-class-docstring
+    def __init__(self, loc, name, content_type, data, last_modified_at=None, thumbnail_location=None, import_path=None,
+                 length=None, locked=False, content_digest=None):
+        self.location = loc
+        self.name = name  # a display string which can be edited, and thus not part of the location which needs to be fixed  # lint-amnesty, pylint: disable=line-too-long
+        self.content_type = content_type
+        self._data = data
+        self.length = length
+        self.last_modified_at = last_modified_at
+        self.thumbnail_location = thumbnail_location
+        # optional information about where this file was imported from. This is needed to support import/export
+        # cycles
+        self.import_path = import_path
+        self.locked = locked
+        self.content_digest = content_digest
+
+    @staticmethod
+    def compute_location(course_key, path, revision=None, is_thumbnail=False):  # lint-amnesty, pylint: disable=unused-argument
+        """
+        Constructs a location object for static content.
+
+        - course_key: the course that this asset belongs to
+        - path: is the name of the static asset
+        - revision: is the object's revision information
+        - is_thumbnail: is whether or not we want the thumbnail version of this
+            asset
+        """
+        path = path.replace('/', '_')
+        return course_key.make_asset_key(
+            'asset' if not is_thumbnail else 'thumbnail',
+            AssetLocator.clean_keeping_underscores(path)
+        ).for_branch(None)
+
+    @staticmethod
+    def get_location_from_path(path):
+        """
+        Generate an AssetKey for the given path (old c4x/org/course/asset/name syntax)
+        """
+        try:
+            return AssetKey.from_string(path)
+        except InvalidKeyError:
+            # TODO - re-address this once LMS-11198 is tackled.
+            if path.startswith('/') or path.endswith('/'):
+                # try stripping off the leading slash and try again
+                return AssetKey.from_string(path.strip('/'))
+
+    @staticmethod
+    def serialize_asset_key_with_slash(asset_key):
+        """
+        Legacy code expects the serialized asset key to start w/ a slash; so, do that in one place
+        :param asset_key:
+        """
+        url = str(asset_key)
+        if not url.startswith('/'):
+            url = '/' + url  # TODO - re-address this once LMS-11198 is tackled.
+        return url
diff --git a/xblocks_contrib/video/mixin.py b/xblocks_contrib/video/mixin.py
new file mode 100644
index 00000000..dd212089
--- /dev/null
+++ b/xblocks_contrib/video/mixin.py
@@ -0,0 +1,57 @@
+# NOTE: Code has been copied from the following source files
+# https://github.com/openedx/edx-platform/blob/master/openedx/core/lib/license/mixin.py
+"""
+License mixin for XBlocks and XModules
+"""
+
+from xblock.core import XBlockMixin
+from xblock.fields import Scope, String
+
+# Make '_' a no-op so we can scrape strings. Using lambda instead of
+#  `django.utils.translation.gettext_noop` because Django cannot be imported in this file
+_ = lambda text: text
+
+
+class LicenseMixin(XBlockMixin):
+    """
+    Mixin that allows an author to indicate a license on the contents of an
+    XBlock. For example, a video could be marked as Creative Commons SA-BY
+    licensed. You can even indicate the license on an entire course.
+
+    If this mixin is not applied to an XBlock, or if the license field is
+    blank, then the content is subject to whatever legal licensing terms that
+    apply to content by default. For example, in the United States, that content
+    is exclusively owned by the creator of the content by default. Other
+    countries may have similar laws.
+    """
+    license = String(
+        display_name=_("License"),
+        help=_("A license defines how the contents of this block can be shared and reused."),
+        default=None,
+        scope=Scope.content,
+    )
+
+    @classmethod
+    def parse_license_from_xml(cls, definition, node):
+        """
+        When importing an XBlock from XML, this method will parse the license
+        information out of the XML and attach it to the block.
+        It is defined here so that classes that use this mixin can simply refer
+        to this method, rather than reimplementing it in their XML import
+        functions.
+        """
+        license = node.get('license', default=None)  # pylint: disable=redefined-builtin
+        if license:
+            definition['license'] = license
+        return definition
+
+    def add_license_to_xml(self, node, default=None):
+        """
+        When generating XML from an XBlock, this method will add the XBlock's
+        license to the XML representation before it is serialized.
+        It is defined here so that classes that use this mixin can simply refer
+        to this method, rather than reimplementing it in their XML export
+        functions.
+        """
+        if getattr(self, "license", default):
+            node.set('license', self.license)
diff --git a/xblocks_contrib/video/static/css/video.css b/xblocks_contrib/video/static/css/video.css
index 563fa0d5..ca20ba91 100644
--- a/xblocks_contrib/video/static/css/video.css
+++ b/xblocks_contrib/video/static/css/video.css
@@ -1,9 +1,1258 @@
-/* CSS for VideoBlock */
+<!-- NOTE: Code has been copied from the following source file
+https://github.com/openedx/edx-platform/blob/master/xmodule/static/css-builtin-blocks/VideoBlockDisplay.css -->
 
-.video .count {
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700");
+
+.xmodule_display.xmodule_VideoBlock {
+    margin-bottom: calc((var(--baseline, 20px) * 1.5));
+}
+
+.xmodule_display.xmodule_VideoBlock .is-hidden,
+.xmodule_display.xmodule_VideoBlock .video.closed .subtitles {
+    display: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video {
+    background: whitesmoke;
+    display: block;
+    margin: 0 -12px;
+    padding: 12px;
+    border-radius: 5px;
+    outline: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.xmodule_display.xmodule_VideoBlock .video:focus,
+.xmodule_display.xmodule_VideoBlock .video:active,
+.xmodule_display.xmodule_VideoBlock .video:hover {
+    border: 0;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.is-initialized .video-wrapper .spinner {
+    display: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.is-pre-roll .slider {
+    visibility: hidden;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.is-pre-roll .video-player {
+    position: relative;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.is-pre-roll .video-player::before {
+    display: block;
+    content: "";
+    width: 100%;
+    padding-top: 55%;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .tc-wrapper {
+    position: relative;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .tc-wrapper:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .focus_grabber {
+    position: relative;
+    display: inline;
+    width: 0;
+    height: 0;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .downloads-heading {
+    margin: 1em 0 0;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section {
+    display: flex;
+    justify-content: space-between;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .wrapper-download-video,
+.xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .wrapper-download-transcripts,
+.xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .wrapper-handouts,
+.xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section ,
+.xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .wrapper-transcript-feedback {
+    margin-top: var(--baseline, 20px);
+    padding-right: var(--baseline, 20px);
+    vertical-align: top;
+}
+
+@media (min-width: 768px) {
+    .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads {
+        display: flex;
+    }
+}
+
+.xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .hd {
+    margin: 0;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-video .video-sources {
+    margin: 0;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-transcripts .list-download-transcripts {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-transcripts .list-download-transcripts .transcript-option {
+    display: flex;
+    align-items: center;
+    margin: 0;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-transcripts .list-download-transcripts .transcript-option a.btn,
+.xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-transcripts .list-download-transcripts .transcript-option a.btn-link {
+    font-size: 16px !important;
+    font-weight: unset;
+    padding-left: 4px;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .wrapper-downloads {
+    padding-right: 0;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .host-tag {
+    position: absolute;
+    left: -9999em;
+    display: inline-block;
+    vertical-align: middle;
+    color: var(--body-color, #313131);
+}
+
+.xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .brand-logo {
+    display: inline-block;
+    max-width: 100%;
+    max-height: calc((var(--baseline, 20px) * 2));
+    padding: calc((var(--baseline, 20px) / 4)) 0;
+    vertical-align: middle;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback {
+    display: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback .transcript-feedback-buttons {
+    display: flex;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback .transcript-feedback-btn-wrapper {
+    margin-right: 10px;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback .thumbs-up-btn,
+.xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback .thumbs-down-btn {
+    border: none;
+    box-shadow: none;
+    background: transparent;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .google-disclaimer {
+    display: none;
+    margin-top: var(--baseline, 20px);
+    padding-right: var(--baseline, 20px);
+    vertical-align: top;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper {
+    float: left;
+    margin-right: 2.27273%;
+    width: 65.90909%;
+    background-color: black;
+    position: relative;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper:hover .btn-play {
+    color: #0075b4;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper:hover .btn-play::after {
+    background: #fff;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player-pre,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player-post {
+    height: 50px;
+    background-color: #111010;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .spinner {
+    transform: translate(-50%, -50%);
+    position: absolute;
+    z-index: 1;
+    background: rgba(0, 0, 0, 0.7);
+    top: 50%;
+    left: 50%;
+    padding: 30px;
+    border-radius: 25%;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .spinner::after {
+    animation: rotateCW 3s infinite linear;
+    content: '';
+    display: block;
+    width: 30px;
+    height: 30px;
+    border: 7px solid white;
+    border-top-color: transparent;
+    border-radius: 100%;
+    position: relative;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .btn-play {
+    transform: translate(-50%, -50%);
+    position: absolute;
+    z-index: 1;
+    top: 46%;
+    left: 50%;
+    font-size: 4em;
+    cursor: pointer;
+    opacity: 0.1;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .btn-play::after {
+    background: var(--white, #fff);
+    position: absolute;
+    width: 50%;
+    height: 50%;
+    content: '';
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    z-index: -1;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions {
+    left: 5%;
+    position: absolute;
+    width: 90%;
+    box-sizing: border-box;
+    top: 70%;
+    text-align: center;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible {
+    max-height: calc((var(--baseline, 20px) * 3));
+    border-radius: calc((var(--baseline, 20px) / 5));
+    padding: 8px calc((var(--baseline, 20px) / 2)) 8px calc((var(--baseline, 20px) * 1.5));
+    background: rgba(0, 0, 0, 0.75);
+    color: var(--yellow, #e2c01f);
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible::before {
+    position: absolute;
+    display: inline-block;
+    top: 50%;
+    left: var(--baseline, 20px);
+    margin-top: -0.6em;
+    font-family: 'FontAwesome';
+    content: "\f142";
+    color: var(--white, #fff);
+    opacity: 0.5;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible:hover,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible.is-dragging {
+    background: black;
+    cursor: move;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible:hover::before,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible.is-dragging::before {
+    opacity: 1;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player {
+    overflow: hidden;
+    min-height: 158px;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player>div {
+    height: 100%;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player>div.hidden {
+    display: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player .video-error,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player .video-hls-error {
+    padding: calc((var(--baseline, 20px) / 5));
+    background: black;
+    color: white !important;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player object,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player iframe,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player video {
+    left: 0;
+    display: block;
+    border: none;
+    width: 100%;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player h4 {
+    text-align: center;
+    color: white;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player h4.hidden {
+    display: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls {
+    position: relative;
+    border: 0;
+    background: #282c2e;
+    color: #f0f3f5;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:hover ul,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:hover div,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:focus ul,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:focus div {
+    opacity: 1;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control {
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    padding: calc((var(--baseline, 20px) / 2)) calc((var(--baseline, 20px) / 1.5));
+    background: #282c2e;
+    box-shadow: none;
+    text-shadow: none;
+    color: #cfd8dc;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control:hover,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control:focus {
+    background: #171a1b;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control:active,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .is-active.control,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .active.control {
+    color: #0ea6ec;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control .icon {
+    width: 1em;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control .icon.icon-hd {
+    width: auto;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider {
+    transform-origin: bottom left;
+    transition: height 0.7s ease-in-out 0s;
+    box-sizing: border-box;
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    height: calc((var(--baseline, 20px) / 4));
+    margin-left: 0;
+    border: 1px solid #4f595d;
+    border-radius: 0;
+    background: #4f595d;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-widget-header {
+    background: #8e3e63;
+    border: 1px solid #8e3e63;
+    box-shadow: none;
+    top: -1px;
+    left: -1px;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-corner-all.slider-range {
+    opacity: 0.3;
+    background-color: #1e91d3;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-slider-handle {
+    transform-origin: bottom left;
+    transition: all 0.7s ease-in-out 0s;
+    box-sizing: border-box;
+    top: -1px;
+    height: calc((var(--baseline, 20px) / 4));
+    width: calc((var(--baseline, 20px) / 4));
+    margin-left: calc(-1 * (var(--baseline, 20px) / 8));
+    border: 1px solid #cb598d;
+    border-radius: calc((var(--baseline, 20px) / 5));
+    padding: 0;
+    background: #cb598d;
+    box-shadow: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-slider-handle:focus,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-slider-handle:hover {
+    background-color: #db8baf;
+    border-color: #db8baf;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr {
+    float: left;
+    list-style: none;
+    border-right: 1px solid #282c2e;
+    padding: 0;
+}
+
+@media (max-width: 1120px) {
+    .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr {
+        margin-right: lh(0.5);
+        font-size: 0.875em;
+    }
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr .video_control:focus {
+    position: relative;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr .video_control.skip {
+    white-space: nowrap;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr .vidtime {
+    padding-left: lh(0.75);
+    display: inline-block;
+    color: #cfd8dc;
+    -webkit-font-smoothing: antialiased;
+}
+
+@media (max-width: 1120px) {
+    .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr .vidtime {
+        padding-left: lh(0.5);
+    }
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls {
+    float: right;
+    border-left: 1px dotted #4f595d;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .add-fullscreen,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .grouped-controls,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .auto-advance,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control {
+    border-left: 1px dotted #4f595d;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speed-button:focus,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume>.control:focus,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .add-fullscreen:focus,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .auto-advance:focus,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control:focus,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .toggle-transcript:focus {
+    position: relative;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container {
+    position: relative;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu {
+    transition: none;
+    position: absolute;
+    display: none;
+    bottom: 100%;
+    right: 0;
+    width: 120px;
+    margin: 0;
+    border: none;
+    padding: 0;
+    box-shadow: none;
+    background-color: #282c2e;
+    list-style: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li {
+    color: #e7ecee;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .speed-option,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .control-lang {
+    text-align: left;
+    display: block;
+    width: 100%;
+    border: 0;
+    border-radius: 0;
+    padding: lh(0.5);
+    background: #282c2e;
+    box-shadow: none;
+    color: #e7ecee;
+    overflow: hidden;
+    text-shadow: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .speed-option:hover,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .speed-option:focus,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .control-lang:hover,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .control-lang:focus {
+    background-color: #4f595d;
+    color: #fcfcfc;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li.is-active .speed-option,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li.is-active .control-lang {
+    border-left: calc(var(--baseline, 20px) / 10) solid #90d7f9;
+    font-weight: var(--font-bold, 700);
+    color: #90d7f9;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container.is-opened .menu {
+    display: block;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .lang,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .grouped-controls {
+    display: inline-block;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds.is-opened .control .icon {
+    transform: rotate(-90deg);
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds .speed-button .label {
+    padding: 0 calc((var(--baseline, 20px) / 3)) 0 0;
+    font-family: var(--font-family-sans-serif);
+    color: #e7ecee;
+}
+
+@media (max-width: 1120px) {
+    .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds .speed-button .label {
+        position: absolute;
+        clip: rect(1px, 1px, 1px, 1px);
+    }
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds .speed-button .value {
+    padding: 0 lh(0.5) 0 0;
+    color: #e7ecee;
     font-weight: bold;
 }
 
-.video p {
+@media (max-width: 1120px) {
+    .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds .speed-button .value {
+        padding: 0 lh(0.5);
+    }
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .lang .language-menu {
+    width: var(--baseline, 20px);
+    padding: calc((var(--baseline, 20px) / 2)) 0;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .lang.is-opened .control .icon {
+    transform: rotate(90deg);
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume {
+    display: inline-block;
+    position: relative;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume.is-opened .volume-slider-container {
+    display: block;
+    opacity: 1;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume:not(:first-child)>a {
+    border-left: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container {
+    transition: none;
+    display: none;
+    position: absolute;
+    bottom: 100%;
+    right: 0;
+    width: 41px;
+    height: 120px;
+    background-color: #282c2e;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider {
+    height: 100px;
+    width: calc((var(--baseline, 20px) / 4));
+    margin: 14px auto;
+    box-sizing: border-box;
+    border: 1px solid #4f595d;
+    background: #4f595d;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-handle {
+    transition: height var(--tmg-s2, 2s) ease-in-out 0s, width var(--tmg-s2, 2s) ease-in-out 0s;
+    left: -5px;
+    box-sizing: border-box;
+    height: 13px;
+    width: 13px;
+    border: 1px solid #cb598d;
+    border-radius: calc((var(--baseline, 20px) / 5));
+    padding: 0;
+    background: #cb598d;
+    box-shadow: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-handle:hover,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-handle:focus {
+    background: #db8baf;
+    border-color: #db8baf;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-range {
+    background: #8e3e63;
+    border: 1px solid #8e3e63;
+    left: -1px;
+    bottom: -1px;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control {
+    font-weight: 700;
+    letter-spacing: -1px;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control.active {
+    color: #0ea6ec;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control.is-hidden,
+.xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-controls .secondary-controls .quality-control.subtitles {
+    display: none !important;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .toggle-transcript.is-active {
+    color: #0ea6ec;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .lang>.hide-subtitles {
+    transition: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper:hover .video-controls .slider {
+    height: calc((var(--baseline, 20px) / 1.5));
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper:hover .video-controls .slider .ui-slider-handle {
+    height: calc((var(--baseline, 20px) / 1.5));
+    width: calc((var(--baseline, 20px) / 1.5));
+}
+
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .closed-captions {
+    width: 65%;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen.closed .closed-captions {
+    width: 90%;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .subtitles {
+    float: left;
+    overflow: auto;
+    max-height: 460px;
+    width: 31.81818%;
+    padding: 0;
+    font-size: 14px;
+    visibility: visible;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .subtitles a {
+    color: #0074b5;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu {
+    height: 100%;
+    margin: 0;
+    padding: 0 3px;
+    list-style: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li {
+    margin-bottom: 8px;
+    border: 0;
+    padding: 0;
+    color: #0074b5;
+    line-height: lh();
+}
+
+.xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li:has(> span:empty) {
+  display: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li span {
+    display: block;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li.current {
+    color: #333;
+    font-weight: 700;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li.focused {
+    outline: #000 dotted thin;
+    outline-offset: -1px;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li:hover,
+.xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li:focus {
+    text-decoration: underline;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li:empty {
+    margin-bottom: 0;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li.spacing:last-of-type {
+    position: relative;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li.spacing:last-of-type .transcript-end {
+    position: absolute;
+    bottom: 0;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper {
+    width: 100%;
+    background-color: inherit;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-controls.html5 {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    position: absolute;
+    z-index: 1;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-player-pre,
+.xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-player-post {
+    height: 0;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-player h3 {
+    color: black;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.closed .subtitles.html5 {
+    background-color: rgba(243, 243, 243, 0.8);
+    height: 100%;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    width: 275px;
+    padding: 0 var(--baseline, 20px);
+    display: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen {
+    background: rgba(0, 0, 0, 0.95);
+    border: 0;
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    margin: 0;
+    padding: 0;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    vertical-align: middle;
+    border-radius: 0;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen.closed .tc-wrapper .video-wrapper {
+    width: 100%;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .video-wrapper .video-player-pre,
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .video-wrapper .video-player-post {
+    height: 0;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .video-wrapper {
+    position: static;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .video-wrapper .video-player h3 {
+    color: white;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper {
+    width: 100%;
+    height: 100%;
+    position: static;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-wrapper {
+    height: 100%;
+    width: 75%;
+    margin-right: 0;
+    vertical-align: middle;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-wrapper object,
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-wrapper iframe,
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-wrapper video {
+    position: absolute;
+    width: auto;
+    height: auto;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-controls {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .subtitles {
+    height: 100%;
+    width: 25%;
+    padding: lh();
+    box-sizing: border-box;
+    transition: none;
+    background: var(--black, #000);
+    visibility: visible;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .subtitles li {
+    color: #aaa;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .subtitles li.current {
+    color: var(--white, #fff);
+}
+
+.xmodule_display.xmodule_VideoBlock .video.is-touch .tc-wrapper .video-wrapper object,
+.xmodule_display.xmodule_VideoBlock .video.is-touch .tc-wrapper .video-wrapper iframe,
+.xmodule_display.xmodule_VideoBlock .video.is-touch .tc-wrapper .video-wrapper video {
+    width: 100%;
+    height: 100%;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-pre-roll {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: 100%;
+    background-color: var(--black, #000);
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-pre-roll.is-html5 {
+    background-size: 15%;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll {
+    padding: var(--baseline, 20px);
+    border: none;
+    border-radius: var(--baseline, 20px);
+    background: var(--black-t2, rgba(0, 0, 0, 0.5));
+    box-shadow: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll::after {
+    display: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll img {
+    height: calc((var(--baseline, 20px) * 4));
+    width: calc((var(--baseline, 20px) * 4));
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll:hover,
+.xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll:focus {
+    background: var(--blue, #0075b4);
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-slider-handle,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-handle,
+.xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li,
+.xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li {
+    cursor: pointer;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.closed .subtitles.html5 {
+    z-index: 0;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container {
+    z-index: 10;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-pre-roll,
+.xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list {
+    z-index: 1000;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen,
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-controls,
+.xmodule_display.xmodule_VideoBlock .overlay {
+    z-index: 10000;
+}
+
+.xmodule_display.xmodule_VideoBlock .contextmenu,
+.xmodule_display.xmodule_VideoBlock .submenu {
+    z-index: 100000;
+}
+
+.xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container>a::after {
+    font-family: FontAwesome;
+    -webkit-font-smoothing: antialiased;
+    display: inline-block;
+    speak: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .a11y-menu-container {
+    position: relative;
+}
+
+.xmodule_display.xmodule_VideoBlock .a11y-menu-container.open .a11y-menu-list {
+    display: block;
+}
+
+.xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list {
+    top: 100%;
+    margin: 0;
+    padding: 0;
+    display: none;
+    position: absolute;
+    list-style: none;
+    background-color: var(--white, #fff);
+    border: 1px solid #eee;
+}
+
+.xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li {
+    margin: 0;
+    padding: 0;
+    border-bottom: 1px solid #eee;
+    color: var(--white, #fff);
+}
+
+.xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li a {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--gray-l2, #adadad);
+    font-size: 14px;
+    line-height: 23px;
+}
+
+.xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li a:hover,
+.xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li a:focus {
+    color: var(--gray-d1, #5e5e5e);
+}
+
+.xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li.active a {
+    color: #009fe6;
+}
+
+.xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li:last-child {
+    box-shadow: none;
+    border-bottom: 0;
+    margin-top: 0;
+}
+
+.xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container {
+    display: inline-block;
+    vertical-align: top;
+    border-left: 1px solid #eee;
+}
+
+.xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container.open>a {
+    background-color: var(--action-primary-active-bg, #0075b4);
+    color: var(--very-light-text, white);
+}
+
+.xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container.open>a::after {
+    color: var(--very-light-text, white);
+}
+
+.xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container>a {
+    transition: all var(--tmg-f2, 0.25s) ease-in-out 0s;
+    font-size: 12px;
+    display: block;
+    border-radius: 0 3px 3px 0;
+    background-color: var(--very-light-text, white);
+    padding: calc((var(--baseline, 20px) * 0.75)) calc((var(--baseline, 20px) * 1.25)) calc((var(--baseline, 20px) * 0.75)) calc((var(--baseline, 20px) * 0.75));
+    color: var(--gray-l2, #adadad);
+    min-width: 1.5em;
+    line-height: 14px;
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container>a::after {
+    content: "\f0d7";
+    position: absolute;
+    right: calc((var(--baseline, 20px) * 0.5));
+    top: 33%;
+    color: var(--lighter-base-font-color, #646464);
+}
+
+.xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container .a11y-menu-list {
+    right: 0;
+}
+
+.xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container .a11y-menu-list li {
+    font-size: 0.875em;
+}
+
+.xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container .a11y-menu-list li a {
+    border: 0;
+    display: block;
+    padding: 0.70788em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.xmodule_display.xmodule_VideoBlock .contextmenu,
+.xmodule_display.xmodule_VideoBlock .submenu {
+    border: 1px solid #333;
+    background: var(--white, #fff);
+    color: #333;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    position: absolute;
+    top: 0;
+    display: none;
+    outline: none;
+    cursor: default;
+    white-space: nowrap;
+}
+
+.xmodule_display.xmodule_VideoBlock .contextmenu.is-opened,
+.xmodule_display.xmodule_VideoBlock .submenu.is-opened {
+    display: block;
+}
+
+.xmodule_display.xmodule_VideoBlock .contextmenu .menu-item,
+.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item,
+.xmodule_display.xmodule_VideoBlock .submenu .menu-item,
+.xmodule_display.xmodule_VideoBlock .submenu .submenu-item {
+    border-top: 1px solid var(--gray-l3, #c8c8c8);
+    padding: calc((var(--baseline, 20px) / 4)) calc((var(--baseline, 20px) / 2));
+    outline: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .contextmenu .menu-item>span,
+.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item>span,
+.xmodule_display.xmodule_VideoBlock .submenu .menu-item>span,
+.xmodule_display.xmodule_VideoBlock .submenu .submenu-item>span {
+    color: #333;
+}
+
+.xmodule_display.xmodule_VideoBlock .contextmenu .menu-item:first-child,
+.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item:first-child,
+.xmodule_display.xmodule_VideoBlock .submenu .menu-item:first-child,
+.xmodule_display.xmodule_VideoBlock .submenu .submenu-item:first-child {
+    border-top: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .contextmenu .menu-item:focus,
+.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item:focus,
+.xmodule_display.xmodule_VideoBlock .submenu .menu-item:focus,
+.xmodule_display.xmodule_VideoBlock .submenu .submenu-item:focus {
+    background: #333;
+    color: var(--white, #fff);
+}
+
+.xmodule_display.xmodule_VideoBlock .contextmenu .menu-item:focus>span,
+.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item:focus>span,
+.xmodule_display.xmodule_VideoBlock .submenu .menu-item:focus>span,
+.xmodule_display.xmodule_VideoBlock .submenu .submenu-item:focus>span {
+    color: var(--white, #fff);
+}
+
+.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item,
+.xmodule_display.xmodule_VideoBlock .submenu .submenu-item {
+    position: relative;
+    padding: calc((var(--baseline, 20px) / 4)) var(--baseline, 20px) calc((var(--baseline, 20px) / 4)) calc((var(--baseline, 20px) / 2));
+}
+
+.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item::after,
+.xmodule_display.xmodule_VideoBlock .submenu .submenu-item::after {
+    content: '\25B6';
+    position: absolute;
+    right: 5px;
+    line-height: 25px;
+    font-size: 10px;
+}
+
+.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item .submenu,
+.xmodule_display.xmodule_VideoBlock .submenu .submenu-item .submenu {
+    display: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item.is-opened,
+.xmodule_display.xmodule_VideoBlock .submenu .submenu-item.is-opened {
+    background: #333;
+    color: var(--white, #fff);
+}
+
+.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item.is-opened>span,
+.xmodule_display.xmodule_VideoBlock .submenu .submenu-item.is-opened>span {
+    color: var(--white, #fff);
+}
+
+.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item.is-opened>.submenu,
+.xmodule_display.xmodule_VideoBlock .submenu .submenu-item.is-opened>.submenu {
+    display: block;
+}
+
+.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item .is-selected,
+.xmodule_display.xmodule_VideoBlock .submenu .submenu-item .is-selected {
+    font-weight: bold;
+}
+
+.xmodule_display.xmodule_VideoBlock .contextmenu .is-disabled,
+.xmodule_display.xmodule_VideoBlock .submenu .is-disabled {
+    pointer-events: none;
+    color: var(--gray-l3, #c8c8c8);
+}
+
+.xmodule_display.xmodule_VideoBlock .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: transparent;
+}
+
+.xmodule_display.xmodule_VideoBlock .wrapper-social-share .social-toggle-btn {
+    background: var(--primary);
+    font-size: 13px;
+    font-weight: 700;
+    padding: calc(var(--baseline) * 0.35) calc(var(--baseline) * 0.9);
+    color: var(--white);
+    box-shadow: none;
+    text-shadow: none;
+    border-radius: 3px;
+    border: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .wrapper-social-share .social-toggle-btn:hover,
+.xmodule_display.xmodule_VideoBlock .wrapper-social-share .social-toggle-btn:focus {
+    background: var(--btn-brand-focus-background);
+}
+
+.xmodule_display.xmodule_VideoBlock .wrapper-social-share .social-toggle-btn .fa {
+    margin-right: calc(var(--baseline) * 0.4);
+}
+
+.xmodule_display.xmodule_VideoBlock .wrapper-social-share .container-social-share {
+    padding: calc(var(--baseline) * 0.4);
+    width: 300px;
+    border-radius: 6px;
+    background-color: var(--white);
+    box-shadow: rgba(0, 0, 0, 0.15) 0 0.5rem 1rem, rgba(0, 0, 0, 0.15) 0 0.25rem 0.625rem;
+}
+
+.xmodule_display.xmodule_VideoBlock .wrapper-social-share .container-social-share .close-btn {
+    float: right;
+    cursor: pointer;
+    vertical-align: top;
+    display: inline-flex;
+    color: var(--black);
+    text-decoration: none !important;
+}
+
+.xmodule_display.xmodule_VideoBlock .wrapper-social-share .container-social-share .social-share-link {
+    margin-right: calc(var(--baseline) * 0.2);
+    font-size: 24px;
+    height: 24px;
+    vertical-align: middle;
+    text-decoration: none;
+    display: inline-flex;
+}
+
+.xmodule_display.xmodule_VideoBlock .wrapper-social-share .container-social-share .social-share-link > span > svg {
+    width: auto;
+    height: 24px;
+    vertical-align: top;
+    display: inline-flex;
+}
+
+.xmodule_display.xmodule_VideoBlock .wrapper-social-share .container-social-share .public-video-url-container {
+    padding: calc(var(--baseline) * 0.4);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #f2f0ef;
+}
+
+.xmodule_display.xmodule_VideoBlock .wrapper-social-share .container-social-share .public-video-url-link {
+    color: var(--black);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    white-space: nowrap;
+}
+
+.xmodule_display.xmodule_VideoBlock .wrapper-social-share .container-social-share .public-video-url-link:hover {
+    text-decoration: underline;
+}
+
+.xmodule_display.xmodule_VideoBlock .wrapper-social-share .container-social-share .public-video-copy-btn {
+    margin-left: calc(var(--baseline) * 0.7);
+    flex-shrink: 0;
+    color: var(--primary);
     cursor: pointer;
 }
+
+.xmodule_display.xmodule_VideoBlock .wrapper-social-share .container-social-share .public-video-copy-btn:hover {
+    text-decoration: none;
+    color: var(--link-hover-color);
+}
diff --git a/xblocks_contrib/video/static/js/src/00_async_process.js b/xblocks_contrib/video/static/js/src/00_async_process.js
new file mode 100644
index 00000000..a909e822
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/00_async_process.js
@@ -0,0 +1,52 @@
+'use strict';
+
+/**
+ * Provides convenient way to process big amount of data without UI blocking.
+ *
+ * @param {array} list Array to process.
+ * @param {function} process Calls this function on each item in the list.
+ * @return {array} Returns a Promise object to observe when all actions of a
+ *                 certain type bound to the collection, queued or not, have finished.
+ */
+let AsyncProcess = {
+    array: function(list, process) {
+        if (!_.isArray(list)) {
+            return $.Deferred().reject().promise();
+        }
+
+        if (!_.isFunction(process) || !list.length) {
+            return $.Deferred().resolve(list).promise();
+        }
+
+        let MAX_DELAY = 50, // maximum amount of time that js code should be allowed to run continuously
+            dfd = $.Deferred();
+        let result = [];
+        let index = 0;
+        let len = list.length;
+
+        let getCurrentTime = function() {
+            return (new Date()).getTime();
+        };
+
+        let handler = function() {
+            let start = getCurrentTime();
+
+            do {
+                result[index] = process(list[index], index);
+                index++;
+            } while (index < len && getCurrentTime() - start < MAX_DELAY);
+
+            if (index < len) {
+                setTimeout(handler, 25);
+            } else {
+                dfd.resolve(result);
+            }
+        };
+
+        setTimeout(handler, 25);
+
+        return dfd.promise();
+    }
+};
+
+export default AsyncProcess;
diff --git a/xblocks_contrib/video/static/js/src/00_component.js b/xblocks_contrib/video/static/js/src/00_component.js
new file mode 100644
index 00000000..2ac183b1
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/00_component.js
@@ -0,0 +1,81 @@
+'use strict';
+
+import _ from 'underscore';
+
+
+/**
+ * Creates a new object with the specified prototype object and properties.
+ * @param {Object} o The object which should be the prototype of the
+ * newly-created object.
+ * @private
+ * @throws {TypeError, Error}
+ * @return {Object}
+ */
+let inherit = Object.create || (function() {
+    let F = function() {};
+
+    return function(o) {
+        if (arguments.length > 1) {
+            throw Error('Second argument not supported');
+        }
+        if (_.isNull(o) || _.isUndefined(o)) {
+            throw Error('Cannot set a null [[Prototype]]');
+        }
+        if (!_.isObject(o)) {
+            throw TypeError('Argument must be an object');
+        }
+
+        F.prototype = o;
+
+        return new F();
+    };
+}());
+
+/**
+ * Component module.
+ * @exports video/00_component.js
+ * @constructor
+ * @return {jquery Promise}
+ */
+let Component = function() {
+    if ($.isFunction(this.initialize)) {
+        // eslint-disable-next-line prefer-spread
+        return this.initialize.apply(this, arguments);
+    }
+};
+
+/**
+ * Returns new constructor that inherits form the current constructor.
+ * @static
+ * @param {Object} protoProps The object containing which will be added to
+ * the prototype.
+ * @return {Object}
+ */
+Component.extend = function(protoProps, staticProps) {
+    let Parent = this;
+    let Child = function() {
+        if ($.isFunction(this.initialize)) {
+            // eslint-disable-next-line prefer-spread
+            return this.initialize.apply(this, arguments);
+        }
+    };
+
+    // Inherit methods and properties from the Parent prototype.
+    Child.prototype = inherit(Parent.prototype);
+    Child.constructor = Parent;
+    // Provide access to parent's methods and properties
+    Child.__super__ = Parent.prototype;
+
+    // Extends inherited methods and properties by methods/properties
+    // passed as argument.
+    if (protoProps) {
+        $.extend(Child.prototype, protoProps);
+    }
+
+    // Inherit static methods and properties
+    $.extend(Child, Parent, staticProps);
+
+    return Child;
+};
+
+export default Component;
diff --git a/xblocks_contrib/video/static/js/src/00_i18n.js b/xblocks_contrib/video/static/js/src/00_i18n.js
new file mode 100644
index 00000000..1962ed4e
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/00_i18n.js
@@ -0,0 +1,35 @@
+'use strict';
+
+/**
+ * i18n module.
+ * @exports video/00_i18n.js
+ * @return {object}
+ */
+
+let i18n = {
+    Play: gettext('Play'),
+    Pause: gettext('Pause'),
+    Mute: gettext('Mute'),
+    Unmute: gettext('Unmute'),
+    'Exit full browser': gettext('Exit full browser'),
+    'Fill browser': gettext('Fill browser'),
+    Speed: gettext('Speed'),
+    'Auto-advance': gettext('Auto-advance'),
+    Volume: gettext('Volume'),
+    // Translators: Volume level equals 0%.
+    Muted: gettext('Muted'),
+    // Translators: Volume level in range ]0,20]%
+    'Very low': gettext('Very low'),
+    // Translators: Volume level in range ]20,40]%
+    Low: gettext('Low'),
+    // Translators: Volume level in range ]40,60]%
+    Average: gettext('Average'),
+    // Translators: Volume level in range ]60,80]%
+    Loud: gettext('Loud'),
+    // Translators: Volume level in range ]80,99]%
+    'Very loud': gettext('Very loud'),
+    // Translators: Volume level equals 100%.
+    Maximum: gettext('Maximum')
+};
+
+export default i18n;
diff --git a/xblocks_contrib/video/static/js/src/00_iterator.js b/xblocks_contrib/video/static/js/src/00_iterator.js
new file mode 100644
index 00000000..5b597f20
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/00_iterator.js
@@ -0,0 +1,83 @@
+'use strict';
+
+/**
+ * Provides convenient way to work with iterable data.
+ * @exports video/00_iterator.js
+ * @constructor
+ * @param {array} list Array to be iterated.
+ */
+let Iterator = function(list) {
+    this.list = list;
+    this.index = 0;
+    this.size = this.list.length;
+    this.lastIndex = this.list.length - 1;
+};
+
+Iterator.prototype = {
+
+    /**
+     * Checks validity of provided index for the iterator.
+     * @access protected
+     * @param {numebr} index
+     * @return {boolean}
+     */
+    _isValid: function(index) {
+        return _.isNumber(index) && index < this.size && index >= 0;
+    },
+
+    /**
+     * Returns next element.
+     * @param {number} [index] Updates current position.
+     * @return {any}
+     */
+    next: function(index) {
+        if (!(this._isValid(index))) {
+            index = this.index;
+        }
+
+        this.index = (index >= this.lastIndex) ? 0 : index + 1;
+
+        return this.list[this.index];
+    },
+
+    /**
+     * Returns previous element.
+     * @param {number} [index] Updates current position.
+     * @return {any}
+     */
+    prev: function(index) {
+        if (!(this._isValid(index))) {
+            index = this.index;
+        }
+
+        this.index = (index < 1) ? this.lastIndex : index - 1;
+
+        return this.list[this.index];
+    },
+
+    /**
+     * Returns last element in the list.
+     * @return {any}
+     */
+    last: function() {
+        return this.list[this.lastIndex];
+    },
+
+    /**
+     * Returns first element in the list.
+     * @return {any}
+     */
+    first: function() {
+        return this.list[0];
+    },
+
+    /**
+     * Returns `true` if current position is last for the iterator.
+     * @return {boolean}
+     */
+    isEnd: function() {
+        return this.index === this.lastIndex;
+    }
+};
+
+export default Iterator;
diff --git a/xblocks_contrib/video/static/js/src/00_resizer.js b/xblocks_contrib/video/static/js/src/00_resizer.js
new file mode 100644
index 00000000..d892ec4d
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/00_resizer.js
@@ -0,0 +1,236 @@
+'use strict';
+
+import _ from 'underscore';
+
+
+let Resizer = function(params) {
+    let defaults = {
+            container: window,
+            element: null,
+            containerRatio: null,
+            elementRatio: null
+        },
+        callbacksList = [],
+        delta = {
+            height: 0,
+            width: 0
+        },
+        module = {};
+    let mode = null,
+        config;
+
+    // eslint-disable-next-line no-shadow
+    let initialize = function(params) {
+        if (!config) {
+            config = defaults;
+        }
+
+        config = $.extend(true, {}, config, params);
+
+        if (!config.element) {
+            console.log(
+                'Required parameter `element` is not passed.'
+            );
+        }
+
+        return module;
+    };
+
+    let getData = function() {
+        let $container = $(config.container),
+            containerWidth = $container.width() + delta.width,
+            containerHeight = $container.height() + delta.height;
+        let containerRatio = config.containerRatio;
+
+        let $element = $(config.element);
+        let elementRatio = config.elementRatio;
+
+        if (!containerRatio) {
+            containerRatio = containerWidth / containerHeight;
+        }
+
+        if (!elementRatio) {
+            elementRatio = $element.width() / $element.height();
+        }
+
+        return {
+            containerWidth: containerWidth,
+            containerHeight: containerHeight,
+            containerRatio: containerRatio,
+            element: $element,
+            elementRatio: elementRatio
+        };
+    };
+
+    let align = function() {
+        let data = getData();
+
+        switch (mode) {
+        case 'height':
+            alignByHeightOnly();
+            break;
+
+        case 'width':
+            alignByWidthOnly();
+            break;
+
+        default:
+            if (data.containerRatio >= data.elementRatio) {
+                alignByHeightOnly();
+            } else {
+                alignByWidthOnly();
+            }
+            break;
+        }
+
+        fireCallbacks();
+
+        return module;
+    };
+
+    let alignByWidthOnly = function() {
+        let data = getData(),
+            height = data.containerWidth / data.elementRatio;
+
+        data.element.css({
+            height: height,
+            width: data.containerWidth,
+            top: 0.5 * (data.containerHeight - height),
+            left: 0
+        });
+
+        return module;
+    };
+
+    let alignByHeightOnly = function() {
+        let data = getData(),
+            width = data.containerHeight * data.elementRatio;
+
+        data.element.css({
+            height: data.containerHeight,
+            width: data.containerHeight * data.elementRatio,
+            top: 0,
+            left: 0.5 * (data.containerWidth - width)
+        });
+
+        return module;
+    };
+
+    let setMode = function(param) {
+        if (_.isString(param)) {
+            mode = param;
+            align();
+        }
+
+        return module;
+    };
+
+    let setElement = function(element) {
+        config.element = element;
+
+        return module;
+    };
+
+    let addCallback = function(func) {
+        if ($.isFunction(func)) {
+            callbacksList.push(func);
+        } else {
+            console.error('[Video info]: TypeError: Argument is not a function.');
+        }
+
+        return module;
+    };
+
+    let addOnceCallback = function(func) {
+        if ($.isFunction(func)) {
+            let decorator = function() {
+                func();
+                removeCallback(func);
+            };
+
+            addCallback(decorator);
+        } else {
+            console.error('TypeError: Argument is not a function.');
+        }
+
+        return module;
+    };
+
+    let fireCallbacks = function() {
+        $.each(callbacksList, function(index, callback) {
+            callback();
+        });
+    };
+
+    let removeCallbacks = function() {
+        callbacksList.length = 0;
+
+        return module;
+    };
+
+    let removeCallback = function(func) {
+        let index = $.inArray(func, callbacksList);
+
+        if (index !== -1) {
+            return callbacksList.splice(index, 1);
+        }
+    };
+
+    let resetDelta = function() {
+        // eslint-disable-next-line no-multi-assign
+        delta.height = delta.width = 0;
+
+        return module;
+    };
+
+    let addDelta = function(value, side) {
+        if (_.isNumber(value) && _.isNumber(delta[side])) {
+            delta[side] += value;
+        }
+
+        return module;
+    };
+
+    let substractDelta = function(value, side) {
+        if (_.isNumber(value) && _.isNumber(delta[side])) {
+            delta[side] -= value;
+        }
+
+        return module;
+    };
+
+    let destroy = function() {
+        let data = getData();
+        data.element.css({
+            height: '', width: '', top: '', left: ''
+        });
+        removeCallbacks();
+        resetDelta();
+        mode = null;
+    };
+
+    initialize.apply(module, arguments);
+
+    return $.extend(true, module, {
+        align: align,
+        alignByWidthOnly: alignByWidthOnly,
+        alignByHeightOnly: alignByHeightOnly,
+        destroy: destroy,
+        setParams: initialize,
+        setMode: setMode,
+        setElement: setElement,
+        callbacks: {
+            add: addCallback,
+            once: addOnceCallback,
+            remove: removeCallback,
+            removeAll: removeCallbacks
+        },
+        delta: {
+            add: addDelta,
+            substract: substractDelta,
+            reset: resetDelta
+        }
+    });
+};
+
+export default Resizer;
diff --git a/xblocks_contrib/video/static/js/src/00_sjson.js b/xblocks_contrib/video/static/js/src/00_sjson.js
new file mode 100644
index 00000000..99d870ff
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/00_sjson.js
@@ -0,0 +1,108 @@
+'use strict';
+
+let Sjson = function(data) {
+    let sjson = {
+            start: data.start.concat(),
+            text: data.text.concat()
+        },
+        module = {};
+
+    let getter = function(propertyName) {
+        return function() {
+            return sjson[propertyName];
+        };
+    };
+
+    let getStartTimes = getter('start');
+
+    let getCaptions = getter('text');
+
+    let size = function() {
+        return sjson.text.length;
+    };
+
+    function search(time, startTime, endTime) {
+        let start = getStartTimes(),
+            max = size() - 1,
+            min = 0,
+            results,
+            index;
+
+        // if we specify a start and end time to search,
+        // search the filtered list of captions in between
+        // the start / end times.
+        // Else, search the unfiltered list.
+        if (typeof startTime !== 'undefined'
+    && typeof endTime !== 'undefined') {
+            results = filter(startTime, endTime);
+            start = results.start;
+            max = results.captions.length - 1;
+        } else {
+            start = getStartTimes();
+        }
+        while (min < max) {
+            index = Math.ceil((max + min) / 2);
+
+            if (time < start[index]) {
+                max = index - 1;
+            }
+
+            if (time >= start[index]) {
+                min = index;
+            }
+        }
+
+        return min;
+    }
+
+    function filter(start, end) {
+        /* filters captions that occur between inputs
+         * `start` and `end`. Start and end should
+         * be Numbers (doubles) corresponding to the
+         * number of seconds elapsed since the beginning
+         * of the video.
+         *
+         * Returns an object with properties
+         * "start" and "captions" representing
+         * parallel arrays of start times and
+         * their corresponding captions.
+         */
+        let filteredTimes = [];
+        let filteredCaptions = [];
+        let startTimes = getStartTimes();
+        let captions = getCaptions();
+
+        if (startTimes.length !== captions.length) {
+            console.warn('video caption and start time arrays do not match in length');
+        }
+
+        // if end is null, then it's been set to
+        // some erroneous value, so filter using the
+        // entire array as long as it's not empty
+        if (end === null && startTimes.length) {
+            end = startTimes[startTimes.length - 1];
+        }
+
+        _.filter(startTimes, function(currentStartTime, i) {
+            if (currentStartTime >= start && currentStartTime <= end) {
+                filteredTimes.push(currentStartTime);
+                filteredCaptions.push(captions[i]);
+            }
+        });
+
+        return {
+            start: filteredTimes,
+            captions: filteredCaptions
+        };
+    }
+
+    return {
+        getCaptions: getCaptions,
+        getStartTimes: getStartTimes,
+        getSize: size,
+        filter: filter,
+        search: search
+    };
+};
+
+export default Sjson;
diff --git a/xblocks_contrib/video/static/js/src/00_video_storage.js b/xblocks_contrib/video/static/js/src/00_video_storage.js
new file mode 100644
index 00000000..f2293336
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/00_video_storage.js
@@ -0,0 +1,96 @@
+'use strict';
+
+/**
+ * Provides convenient way to store key value pairs.
+ *
+ * @param {string} namespace Namespace that is used to store data.
+ * @return {object} VideoStorage API.
+ */
+let VideoStorage = function(namespace, id) {
+    /**
+     * Adds new value to the storage or rewrites existent.
+     *
+     * @param {string} name Identifier of the data.
+     * @param {any} value Data to store.
+     * @param {boolean} instanceSpecific Data with this flag will be added
+     *     to instance specific storage.
+     */
+    let setItem = function(name, value, instanceSpecific) {
+        if (name) {
+            if (instanceSpecific) {
+                window[namespace][id][name] = value;
+            } else {
+                window[namespace][name] = value;
+            }
+        }
+    };
+
+    /**
+     * Returns the current value associated with the given name.
+     *
+     * @param {string} name Identifier of the data.
+     * @param {boolean} instanceSpecific Data with this flag will be added
+     *     to instance specific storage.
+     * @return {any} The current value associated with the given name.
+     *     If the given key does not exist in the list
+     *     associated with the object then this method must return null.
+     */
+    let getItem = function(name, instanceSpecific) {
+        if (instanceSpecific) {
+            return window[namespace][id][name];
+        } else {
+            return window[namespace][name];
+        }
+    };
+
+    /**
+     * Removes the current value associated with the given name.
+     *
+     * @param {string} name Identifier of the data.
+     * @param {boolean} instanceSpecific Data with this flag will be added
+     *     to instance specific storage.
+     */
+    let removeItem = function(name, instanceSpecific) {
+        if (instanceSpecific) {
+            delete window[namespace][id][name];
+        } else {
+            delete window[namespace][name];
+        }
+    };
+
+    /**
+     * Empties the storage.
+     *
+     */
+    let clear = function() {
+        window[namespace] = {};
+        window[namespace][id] = {};
+    };
+
+    /**
+     * Initializes the module: creates a storage with proper namespace.
+     *
+     * @private
+     */
+    (function initialize() {
+        if (!namespace) {
+            namespace = 'VideoStorage';
+        }
+        if (!id) {
+            // Generate random alpha-numeric string.
+            id = Math.random().toString(36).slice(2);
+        }
+
+        window[namespace] = window[namespace] || {};
+        window[namespace][id] = window[namespace][id] || {};
+    }());
+
+    return {
+        clear: clear,
+        getItem: getItem,
+        removeItem: removeItem,
+        setItem: setItem
+    };
+};
+
+export default VideoStorage;
diff --git a/xblocks_contrib/video/static/js/src/01_initialize.js b/xblocks_contrib/video/static/js/src/01_initialize.js
new file mode 100644
index 00000000..85248b3f
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/01_initialize.js
@@ -0,0 +1,845 @@
+/* eslint-disable no-console, no-param-reassign */
+/**
+ * @file Initialize module works with the JSON config, and sets up various
+ * settings, parameters, variables. After all setup actions are performed, it
+ * invokes the video player to play the specified video. This module must be
+ * invoked first. It provides several functions which do not fit in with other
+ * modules.
+ *
+ * @external VideoPlayer
+ *
+ * @module Initialize
+ */
+
+import VideoPlayer from './03_video_player.js';
+import i18n from './00_i18n.js';
+import _ from 'underscore';
+import moment from 'moment';
+
+/**
+ * @function
+ *
+ * Initialize module exports this function.
+ *
+ * @param {object} state The object containg the state of the video player.
+ *     All other modules, their parameters, public variables, etc. are
+ *     available via this object.
+ * @param {DOM element} element Container of the entire Video DOM element.
+ */
+let Initialize = function(state, element) {
+    _makeFunctionsPublic(state);
+
+    state.initialize(element)
+        .done(function() {
+            if (state.isYoutubeType()) {
+                state.parseSpeed();
+            }
+            // On iPhones and iPods native controls are used.
+            if (/iP(hone|od)/i.test(state.isTouch[0])) {
+                _hideWaitPlaceholder(state);
+                state.el.trigger('initialize', arguments);
+
+                return false;
+            }
+
+            _initializeModules(state, i18n)
+                .done(function() {
+                    // On iPad ready state occurs just after start playing.
+                    // We hide controls before video starts playing.
+                    if (/iPad|Android/i.test(state.isTouch[0])) {
+                        state.el.on('play', _.once(function() {
+                            state.trigger('videoControl.show', null);
+                        }));
+                    } else {
+                        // On PC show controls immediately.
+                        state.trigger('videoControl.show', null);
+                    }
+
+                    _hideWaitPlaceholder(state);
+                    state.el.trigger('initialize', arguments);
+                });
+        });
+};
+
+/* eslint-disable no-use-before-define */
+let methodsDict = {
+    bindTo: bindTo,
+    fetchMetadata: fetchMetadata,
+    getCurrentLanguage: getCurrentLanguage,
+    getDuration: getDuration,
+    getPlayerMode: getPlayerMode,
+    getVideoMetadata: getVideoMetadata,
+    initialize: initialize,
+    isHtml5Mode: isHtml5Mode,
+    isFlashMode: isFlashMode,
+    isYoutubeType: isYoutubeType,
+    parseSpeed: parseSpeed,
+    parseYoutubeStreams: parseYoutubeStreams,
+    setPlayerMode: setPlayerMode,
+    setSpeed: setSpeed,
+    setAutoAdvance: setAutoAdvance,
+    speedToString: speedToString,
+    trigger: trigger,
+    youtubeId: youtubeId,
+    loadHtmlPlayer: loadHtmlPlayer,
+    loadYoutubePlayer: loadYoutubePlayer,
+    loadYouTubeIFrameAPI: loadYouTubeIFrameAPI
+};
+/* eslint-enable no-use-before-define */
+
+let _youtubeApiDeferred = null;
+let _oldOnYouTubeIframeAPIReady;
+
+Initialize.prototype = methodsDict;
+
+export default Initialize;
+
+// ***************************************************************
+// Private functions start here. Private functions start with underscore.
+// ***************************************************************
+
+/**
+ * @function _makeFunctionsPublic
+ *
+ * Functions which will be accessible via 'state' object. When called,
+ * these functions will get the 'state'
+ * object as a context.
+ *
+ * @param {object} state The object containg the state (properties,
+ *     methods, modules) of the Video player.
+ */
+function _makeFunctionsPublic(state) {
+    bindTo(methodsDict, state, state);
+}
+
+// function _renderElements(state)
+//
+//     Create any necessary DOM elements, attach them, and set their
+//     initial configuration. Also make the created DOM elements available
+//     via the 'state' object. Much easier to work this way - you don't
+//     have to do repeated jQuery element selects.
+function _renderElements(state) {
+    // Launch embedding of actual video content, or set it up so that it
+    // will be done as soon as the appropriate video player (YouTube or
+    // stand-alone HTML5) is loaded, and can handle embedding.
+    //
+    // Note that the loading of stand alone HTML5 player API is handled by
+    // Require JS. At the time when we reach this code, the stand alone
+    // HTML5 player is already loaded, so no further testing in that case
+    // is required.
+    let video;
+    let onYTApiReady;
+    let setupOnYouTubeIframeAPIReady;
+
+    if (state.videoType === 'youtube') {
+        state.youtubeApiAvailable = false;
+
+        onYTApiReady = function() {
+            console.log('[Video info]: YouTube API is available and is loaded.');
+            if (state.htmlPlayerLoaded) { return; }
+
+            console.log('[Video info]: Starting YouTube player.');
+            video = VideoPlayer(state);
+
+            state.modules.push(video);
+            state.__dfd__.resolve();
+            state.youtubeApiAvailable = true;
+        };
+
+        if (window.YT) {
+            // If we have a Deferred object responsible for calling OnYouTubeIframeAPIReady
+            // callbacks, make sure that they have all been called by trying to resolve the
+            // Deferred object. Upon resolving, all the OnYouTubeIframeAPIReady will be
+            // called. If the object has been already resolved, the callbacks will not
+            // be called a second time.
+            if (_youtubeApiDeferred) {
+                _youtubeApiDeferred.resolve();
+            }
+
+            window.YT.ready(onYTApiReady);
+        } else {
+            // There is only one global variable window.onYouTubeIframeAPIReady which
+            // is supposed to be a function that will be called by the YouTube API
+            // when it finished initializing. This function will update this global function
+            // so that it resolves our Deferred object, which will call all of the
+            // OnYouTubeIframeAPIReady callbacks.
+            //
+            // If this global function is already defined, we store it first, and make
+            // sure that it gets executed when our Deferred object is resolved.
+            setupOnYouTubeIframeAPIReady = function() {
+                _oldOnYouTubeIframeAPIReady = window.onYouTubeIframeAPIReady || undefined;
+
+                window.onYouTubeIframeAPIReady = function() {
+                    _youtubeApiDeferred.resolve();
+                };
+
+                window.onYouTubeIframeAPIReady.done = _youtubeApiDeferred.done;
+
+                if (_oldOnYouTubeIframeAPIReady) {
+                    window.onYouTubeIframeAPIReady.done(_oldOnYouTubeIframeAPIReady);
+                }
+            };
+
+            // If a Deferred object hasn't been created yet, create one now. It will
+            // be responsible for calling OnYouTubeIframeAPIReady callbacks once the
+            // YouTube API loads. After creating the Deferred object, load the YouTube
+            // API.
+            if (!_youtubeApiDeferred) {
+                _youtubeApiDeferred = $.Deferred();
+                setupOnYouTubeIframeAPIReady();
+            } else if (!window.onYouTubeIframeAPIReady || !window.onYouTubeIframeAPIReady.done) {
+                // The Deferred object could have been already defined in a previous
+                // initialization of the video module. However, since then the global variable
+                // window.onYouTubeIframeAPIReady could have been overwritten. If so,
+                // we should set it up again.
+                setupOnYouTubeIframeAPIReady();
+            }
+
+            // Attach a callback to our Deferred object to be called once the
+            // YouTube API loads.
+            window.onYouTubeIframeAPIReady.done(function() {
+                window.YT.ready(onYTApiReady);
+            });
+        }
+    } else {
+        video = VideoPlayer(state);
+
+        state.modules.push(video);
+        state.__dfd__.resolve();
+        state.htmlPlayerLoaded = true;
+    }
+}
+
+function _waitForYoutubeApi(state) {
+    console.log('[Video info]: Starting to wait for YouTube API to load.');
+    window.setTimeout(function() {
+        // If YouTube API will load OK, it will run `onYouTubeIframeAPIReady`
+        // callback, which will set `state.youtubeApiAvailable` to `true`.
+        // If something goes wrong at this stage, `state.youtubeApiAvailable` is
+        // `false`.
+        if (!state.youtubeApiAvailable) {
+            console.log('[Video info]: YouTube API is not available.');
+            if (!state.htmlPlayerLoaded) {
+                state.loadHtmlPlayer();
+            }
+        }
+        state.el.trigger('youtube_availability', [state.youtubeApiAvailable]);
+    }, state.config.ytTestTimeout);
+}
+
+function loadYouTubeIFrameAPI(scriptTag) {
+    let firstScriptTag = document.getElementsByTagName('script')[0];
+    firstScriptTag.parentNode.insertBefore(scriptTag, firstScriptTag);
+}
+
+// function _parseYouTubeIDs(state)
+//     The function parse YouTube stream ID's.
+//     @return
+//         false: We don't have YouTube video IDs to work with; most likely
+//             we have HTML5 video sources.
+//         true: Parsing of YouTube video IDs went OK, and we can proceed
+//             onwards to play YouTube videos.
+function _parseYouTubeIDs(state) {
+    if (state.parseYoutubeStreams(state.config.streams)) {
+        state.videoType = 'youtube';
+
+        return true;
+    }
+
+    console.log(
+        '[Video info]: Youtube Video IDs are incorrect or absent.'
+    );
+
+    return false;
+}
+
+/**
+ * Extract HLS video URLs from available video URLs.
+ *
+ * @param {object} state The object contaning the state (properties, methods, modules) of the Video player.
+ * @returns Array of available HLS video source urls.
+ */
+function extractHLSVideoSources(state) {
+    return _.filter(state.config.sources, function(source) {
+        return /\.m3u8(\?.*)?$/.test(source);
+    });
+}
+
+// function _prepareHTML5Video(state)
+// The function prepare HTML5 video, parse HTML5
+// video sources etc.
+function _prepareHTML5Video(state) {
+    state.speeds = ['0.75', '1.0', '1.25', '1.50', '2.0'];
+    // If none of the supported video formats can be played and there is no
+    // short-hand video links, than hide the spinner and show error message.
+    if (!state.config.sources.length) {
+        _hideWaitPlaceholder(state);
+        state.el
+            .find('.video-player div')
+            .addClass('hidden');
+        state.el
+            .find('.video-player .video-error')
+            .removeClass('is-hidden');
+
+        return false;
+    }
+
+    state.videoType = 'html5';
+
+    if (!_.keys(state.config.transcriptLanguages).length) {
+        state.config.showCaptions = false;
+    }
+    state.setSpeed(state.speed);
+
+    return true;
+}
+
+function _hideWaitPlaceholder(state) {
+    state.el
+        .addClass('is-initialized')
+        .find('.spinner')
+        .attr({
+            'aria-hidden': 'true',
+            tabindex: -1
+        });
+}
+
+function _setConfigurations(state) {
+    state.setPlayerMode(state.config.mode);
+    // Possible value are: 'visible', 'hiding', and 'invisible'.
+    state.controlState = 'visible';
+    state.controlHideTimeout = null;
+    state.captionState = 'invisible';
+    state.captionHideTimeout = null;
+    state.HLSVideoSources = extractHLSVideoSources(state);
+}
+
+// eslint-disable-next-line no-shadow
+function _initializeModules(state, i18n) {
+    let dfd = $.Deferred(),
+        modulesList = $.map(state.modules, function(module) {
+            let options = state.options[module.moduleName] || {};
+            if (_.isFunction(module)) {
+                return module(state, i18n, options);
+            } else if ($.isPlainObject(module)) {
+                return module;
+            }
+        });
+
+    $.when.apply(null, modulesList)
+        .done(dfd.resolve);
+
+    return dfd.promise();
+}
+
+function _getConfiguration(data, storage) {
+    let isBoolean = function(value) {
+            let regExp = /^true$/i;
+            return regExp.test(value.toString());
+        },
+        // List of keys that will be extracted form the configuration.
+        extractKeys = [],
+        // Compatibility keys used to change names of some parameters in
+        // the final configuration.
+        compatKeys = {
+            start: 'startTime',
+            end: 'endTime'
+        },
+        // Conversions used to pre-process some configuration data.
+        conversions = {
+            showCaptions: isBoolean,
+            autoplay: isBoolean,
+            autohideHtml5: isBoolean,
+            autoAdvance: function(value) {
+                let shouldAutoAdvance = storage.getItem('auto_advance');
+                if (_.isUndefined(shouldAutoAdvance)) {
+                    return isBoolean(value) || false;
+                } else {
+                    return shouldAutoAdvance;
+                }
+            },
+            savedVideoPosition: function(value) {
+                return storage.getItem('savedVideoPosition', true)
+                || Number(value)
+                || 0;
+            },
+            speed: function(value) {
+                return storage.getItem('speed', true) || value;
+            },
+            generalSpeed: function(value) {
+                return storage.getItem('general_speed')
+                || value
+                || '1.0';
+            },
+            transcriptLanguage: function(value) {
+                return storage.getItem('language')
+                || value
+                || 'en';
+            },
+            ytTestTimeout: function(value) {
+                value = parseInt(value, 10);
+
+                if (!isFinite(value)) {
+                    value = 1500;
+                }
+
+                return value;
+            },
+            startTime: function(value) {
+                value = parseInt(value, 10);
+                if (!isFinite(value) || value < 0) {
+                    return 0;
+                }
+
+                return value;
+            },
+            endTime: function(value) {
+                value = parseInt(value, 10);
+
+                if (!isFinite(value) || value === 0) {
+                    return null;
+                }
+
+                return value;
+            }
+        },
+        config = {};
+
+    data = _.extend({
+        startTime: 0,
+        endTime: null,
+        sub: '',
+        streams: ''
+    }, data);
+
+    $.each(data, function(option, value) {
+    // Extract option that is in `extractKeys`.
+        if ($.inArray(option, extractKeys) !== -1) {
+            return;
+        }
+
+        // Change option name to key that is in `compatKeys`.
+        if (compatKeys[option]) {
+            option = compatKeys[option];
+        }
+
+        // Pre-process data.
+        if (conversions[option]) {
+            if (_.isFunction(conversions[option])) {
+                value = conversions[option].call(this, value);
+            } else {
+                throw new TypeError(option + ' is not a function.');
+            }
+        }
+        config[option] = value;
+    });
+
+    return config;
+}
+
+// ***************************************************************
+// Public functions start here.
+// These are available via the 'state' object. Their context ('this'
+// keyword) is the 'state' object. The magic private function that makes
+// them available and sets up their context is makeFunctionsPublic().
+// ***************************************************************
+
+// function bindTo(methodsDict, obj, context, rewrite)
+// Creates a new function with specific context and assigns it to the provided
+// object.
+// eslint-disable-next-line no-shadow
+function bindTo(methodsDict, obj, context, rewrite) {
+    $.each(methodsDict, function(name, method) {
+        if (_.isFunction(method)) {
+            if (_.isUndefined(rewrite)) {
+                rewrite = true;
+            }
+
+            if (_.isUndefined(obj[name]) || rewrite) {
+                obj[name] = _.bind(method, context);
+            }
+        }
+    });
+}
+
+function loadYoutubePlayer() {
+    if (this.htmlPlayerLoaded) { return; }
+
+    console.log(
+        '[Video info]: Fetch metadata for YouTube video.'
+    );
+
+    this.fetchMetadata();
+    this.parseSpeed();
+}
+
+function loadHtmlPlayer() {
+    // When the youtube link doesn't work for any reason
+    // (for example, firewall) any
+    // alternate sources should automatically play.
+    if (!_prepareHTML5Video(this)) {
+        console.log(
+            '[Video info]: Continue loading '
+    + 'YouTube video.'
+        );
+
+        // Non-YouTube sources were not found either.
+
+        this.el.find('.video-player div')
+            .removeClass('hidden');
+        this.el.find('.video-player .video-error')
+            .addClass('is-hidden');
+
+        // If in reality the timeout was to short, try to
+        // continue loading the YouTube video anyways.
+        this.loadYoutubePlayer();
+    } else {
+        console.log(
+            '[Video info]: Start HTML5 player.'
+        );
+
+        // In-browser HTML5 player does not support quality
+        // control.
+        this.el.find('.quality_control').hide();
+        _renderElements(this);
+    }
+}
+
+// function initialize(element)
+// The function set initial configuration and preparation.
+
+function initialize(element) {
+    let self = this,
+        el = this.el,
+        id = this.id,
+        container = el.find('.video-wrapper'),
+        __dfd__ = $.Deferred(),
+        isTouch = onTouchBasedDevice() || '';
+
+    if (isTouch) {
+        el.addClass('is-touch');
+    }
+
+    $.extend(this, {
+        __dfd__: __dfd__,
+        container: container,
+        isFullScreen: false,
+        isTouch: isTouch
+    });
+
+    console.log('[Video info]: Initializing video with id "%s".', id);
+
+    // We store all settings passed to us by the server in one place. These
+    // are "read only", so don't modify them. All variable content lives in
+    // 'state' object.
+    // jQuery .data() return object with keys in lower camelCase format.
+    this.config = $.extend({}, _getConfiguration(this.metadata, this.storage), {
+        element: element,
+        fadeOutTimeout: 1400,
+        captionsFreezeTime: 10000,
+        mode: $.cookie('edX_video_player_mode'),
+        // Available HD qualities will only be accessible once the video has
+        // been played once, via player.getAvailableQualityLevels.
+        availableHDQualities: []
+    });
+
+    if (this.config.endTime < this.config.startTime) {
+        this.config.endTime = null;
+    }
+
+    this.lang = this.config.transcriptLanguage;
+    this.speed = this.speedToString(
+        this.config.speed || this.config.generalSpeed
+    );
+    this.auto_advance = this.config.autoAdvance;
+    this.htmlPlayerLoaded = false;
+    this.duration = this.metadata.duration;
+
+    _setConfigurations(this);
+
+    // If `prioritizeHls` is set to true than `hls` is the primary playback
+    if (this.config.prioritizeHls || !(_parseYouTubeIDs(this))) {
+        // If we do not have YouTube ID's, try parsing HTML5 video sources.
+        if (!_prepareHTML5Video(this)) {
+            __dfd__.reject();
+            // Non-YouTube sources were not found either.
+            return __dfd__.promise();
+        }
+
+        console.log('[Video info]: Start player in HTML5 mode.');
+        _renderElements(this);
+    } else {
+        _renderElements(this);
+
+        _waitForYoutubeApi(this);
+
+        let scriptTag = document.createElement('script');
+
+        scriptTag.src = this.config.ytApiUrl;
+        scriptTag.async = true;
+
+        $(scriptTag).on('load', function() {
+            self.loadYoutubePlayer();
+        });
+        $(scriptTag).on('error', function() {
+            console.log(
+                '[Video info]: YouTube returned an error for '
+        + 'video with id "' + self.id + '".'
+            );
+            // If the video is already loaded in `_waitForYoutubeApi` by the
+            // time we get here, then we shouldn't load it again.
+            if (!self.htmlPlayerLoaded) {
+                self.loadHtmlPlayer();
+            }
+        });
+
+        window.Video.loadYouTubeIFrameAPI(scriptTag);
+    }
+    return __dfd__.promise();
+}
+
+// function parseYoutubeStreams(state, youtubeStreams)
+//
+//     Take a string in the form:
+//         "iCawTYPtehk:0.75,KgpclqP-LBA:1.0,9-2670d5nvU:1.5"
+//     parse it, and make it available via the 'state' object. If we are
+//     not given a string, or it's length is zero, then we return false.
+//
+//     @return
+//         false: We don't have YouTube video IDs to work with; most likely
+//             we have HTML5 video sources.
+//         true: Parsing of YouTube video IDs went OK, and we can proceed
+//             onwards to play YouTube videos.
+function parseYoutubeStreams(youtubeStreams) {
+    if (_.isUndefined(youtubeStreams) || !youtubeStreams.length) {
+        return false;
+    }
+
+    this.videos = {};
+
+    _.each(youtubeStreams.split(/,/), function(video) {
+        let speed;
+        video = video.split(/:/);
+        speed = this.speedToString(video[0]);
+        this.videos[speed] = video[1];
+    }, this);
+
+    return _.isString(this.videos['1.0']);
+}
+
+// function fetchMetadata()
+//
+//     When dealing with YouTube videos, we must fetch meta data that has
+//     certain key facts not available while the video is loading. For
+//     example the length of the video can be determined from the meta
+//     data.
+function fetchMetadata() {
+    let self = this,
+        metadataXHRs = [];
+
+    this.metadata = {};
+
+    metadataXHRs = _.map(this.videos, function(url, speed) {
+        return self.getVideoMetadata(url, function(data) {
+            if (data.items.length > 0) {
+                let metaDataItem = data.items[0];
+                self.metadata[metaDataItem.id] = metaDataItem.contentDetails;
+            }
+        });
+    });
+
+    $.when.apply(this, metadataXHRs).done(function() {
+        self.el.trigger('metadata_received');
+
+        // Not only do we trigger the "metadata_received" event, we also
+        // set a flag to notify that metadata has been received. This
+        // allows for code that will miss the "metadata_received" event
+        // to know that metadata has been received. This is important in
+        // cases when some code will subscribe to the "metadata_received"
+        // event after it has been triggered.
+        self.youtubeMetadataReceived = true;
+    });
+}
+
+// function parseSpeed()
+//
+//     Create a separate array of available speeds.
+function parseSpeed() {
+    this.speeds = _.keys(this.videos).sort();
+}
+
+function setSpeed(newSpeed) {
+    // Possible speeds for each player type.
+    // HTML5 =          [0.75, 1, 1.25, 1.5, 2]
+    // Youtube Flash =  [0.75, 1, 1.25, 1.5]
+    // Youtube HTML5 =  [0.25, 0.5, 1, 1.5, 2]
+    let map = {
+        0.25: '0.75', // Youtube HTML5 -> HTML5 or Youtube Flash
+        '0.50': '0.75', // Youtube HTML5 -> HTML5 or Youtube Flash
+        0.75: '0.50', // HTML5 or Youtube Flash -> Youtube HTML5
+        1.25: '1.50', // HTML5 or Youtube Flash -> Youtube HTML5
+        2.0: '1.50' // HTML5 or Youtube HTML5 -> Youtube Flash
+    };
+
+    if (_.contains(this.speeds, newSpeed)) {
+        this.speed = newSpeed;
+    } else {
+        newSpeed = map[newSpeed];
+        this.speed = _.contains(this.speeds, newSpeed) ? newSpeed : '1.0';
+    }
+    this.speed = parseFloat(this.speed);
+}
+
+function setAutoAdvance(enabled) {
+    this.auto_advance = enabled;
+}
+
+function getVideoMetadata(url, callback) {
+    let youTubeEndpoint;
+    if (!(_.isString(url))) {
+        url = this.videos['1.0'] || '';
+    }
+    // Will hit the API URL to get the youtube video metadata.
+    youTubeEndpoint = this.config.ytMetadataEndpoint; // The new runtime supports anonymous users
+    // and uses an XBlock handler to get YouTube metadata
+    if (!youTubeEndpoint) {
+        // The old runtime has a full/separate LMS API for getting YouTube metadata, but it doesn't
+        // support anonymous users nor videos that play in a sandboxed iframe.
+        youTubeEndpoint = [this.config.lmsRootURL, '/courses/yt_video_metadata', '?id=', url].join('');
+    }
+    return $.ajax({
+        url: youTubeEndpoint,
+        success: _.isFunction(callback) ? callback : null,
+        error: function() {
+            console.warn(
+                'Unable to get youtube video metadata. Some video metadata may be unavailable.'
+            );
+        },
+        notifyOnError: false
+    });
+}
+
+function youtubeId(speed) {
+    let currentSpeed = this.isFlashMode() ? this.speed : '1.0';
+
+    return this.videos[speed]
+    || this.videos[currentSpeed]
+    || this.videos['1.0'];
+}
+
+function getDuration() {
+    try {
+        let safeMoment = typeof moment !== 'undefined' ? moment : window.moment;
+        return safeMoment.duration(this.metadata[this.youtubeId()].duration, safeMoment.ISO_8601).asSeconds();
+    } catch (err) {
+        return _.result(this.metadata[this.youtubeId('1.0')], 'duration') || 0;
+    }
+}
+
+/**
+ * Sets player mode.
+ *
+ * @param {string} mode Mode to set for the video player if it is supported.
+ *                      Otherwise, `html5` is used by default.
+ */
+function setPlayerMode(mode) {
+    let supportedModes = ['html5', 'flash'];
+
+    mode = _.contains(supportedModes, mode) ? mode : 'html5';
+    this.currentPlayerMode = mode;
+}
+
+/**
+ * Returns current player mode.
+ *
+ * @return {string} Returns string that describes player mode
+ */
+function getPlayerMode() {
+    return this.currentPlayerMode;
+}
+
+/**
+ * Checks if current player mode is Flash.
+ *
+ * @return {boolean} Returns `true` if current mode is `flash`, otherwise
+ *                   it returns `false`
+ */
+function isFlashMode() {
+    return this.getPlayerMode() === 'flash';
+}
+
+/**
+ * Checks if current player mode is Html5.
+ *
+ * @return {boolean} Returns `true` if current mode is `html5`, otherwise
+ *                   it returns `false`
+ */
+function isHtml5Mode() {
+    return this.getPlayerMode() === 'html5';
+}
+
+function isYoutubeType() {
+    return this.videoType === 'youtube';
+}
+
+function speedToString(speed) {
+    return parseFloat(speed).toFixed(2).replace(/\.00$/, '.0');
+}
+
+function getCurrentLanguage() {
+    let keys = _.keys(this.config.transcriptLanguages);
+
+    if (keys.length) {
+        if (!_.contains(keys, this.lang)) {
+            if (_.contains(keys, 'en')) {
+                this.lang = 'en';
+            } else {
+                this.lang = keys.pop();
+            }
+        }
+    } else {
+        return null;
+    }
+
+    return this.lang;
+}
+
+/*
+ * The trigger() function will assume that the @objChain is a complete
+ * chain with a method (function) at the end. It will call this function.
+ * So for example, when trigger() is called like so:
+ *
+ *     state.trigger('videoPlayer.pause', {'param1': 10});
+ *
+ * Then trigger() will execute:
+ *
+ *     state.videoPlayer.pause({'param1': 10});
+ */
+function trigger(objChain) {
+    let extraParameters = Array.prototype.slice.call(arguments, 1),
+        i, tmpObj, chain;
+
+    // Remember that 'this' is the 'state' object.
+    tmpObj = this;
+    chain = objChain.split('.');
+
+    // At the end of the loop the variable 'tmpObj' will either be the
+    // correct object/function to trigger/invoke. If the 'chain' chain of
+    // object is incorrect (one of the link is non-existent), then the loop
+    // will immediately exit.
+    while (chain.length) {
+        i = chain.shift();
+
+        if (tmpObj.hasOwnProperty(i)) {
+            tmpObj = tmpObj[i];
+        } else {
+            // An incorrect object chain was specified.
+
+            return false;
+        }
+    }
+
+    tmpObj.apply(this, extraParameters);
+
+    return true;
+}
diff --git a/xblocks_contrib/video/static/js/src/025_focus_grabber.js b/xblocks_contrib/video/static/js/src/025_focus_grabber.js
new file mode 100644
index 00000000..48ec5527
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/025_focus_grabber.js
@@ -0,0 +1,132 @@
+/*
+ * 025_focus_grabber.js
+ *
+ * Purpose: Provide a way to focus on autohidden Video controls.
+ *
+ *
+ * Because in HTML player mode we have a feature of autohiding controls on
+ * mouse inactivity, sometimes focus is lost from the currently selected
+ * control. What's more, when all controls are autohidden, we can't get to any
+ * of them because by default browser does not place hidden elements on the
+ * focus chain.
+ *
+ * To get around this minor annoyance, this module will manage 2 placeholder
+ * elements that will be invisible to the user's eye, but visible to the
+ * browser. This will allow for a sneaky stealing of focus and placing it where
+ * we need (on hidden controls).
+ *
+ * This code has been moved to a separate module because it provides a concrete
+ * block of functionality that can be turned on (off).
+ */
+
+/*
+ * "If you want to climb a mountain, begin at the top."
+ *
+ * ~ Zen saying
+ */
+
+
+
+// FocusGrabber module.
+let FocusGrabber = function(state) {
+    let dfd = $.Deferred();
+
+    state.focusGrabber = {};
+
+    _makeFunctionsPublic(state);
+    _renderElements(state);
+    _bindHandlers(state);
+
+    dfd.resolve();
+    return dfd.promise();
+};
+
+// Private functions.
+
+function _makeFunctionsPublic(state) {
+    let methodsDict = {
+        disableFocusGrabber: disableFocusGrabber,
+        enableFocusGrabber: enableFocusGrabber,
+        onFocus: onFocus
+    };
+
+    state.bindTo(methodsDict, state.focusGrabber, state);
+}
+
+function _renderElements(state) {
+    state.focusGrabber.elFirst = state.el.find('.focus_grabber.first');
+    state.focusGrabber.elLast = state.el.find('.focus_grabber.last');
+
+    // From the start, the Focus Grabber must be disabled so that
+    // tabbing (switching focus) does not land the user on one of the
+    // placeholder elements (elFirst, elLast).
+    state.focusGrabber.disableFocusGrabber();
+}
+
+function _bindHandlers(state) {
+    state.focusGrabber.elFirst.on('focus', state.focusGrabber.onFocus);
+    state.focusGrabber.elLast.on('focus', state.focusGrabber.onFocus);
+
+    // When the video container element receives programmatic focus, then
+    // on un-focus ('blur' event) we should trigger a 'mousemove' event so
+    // as to reveal autohidden controls.
+    state.el.on('blur', function() {
+        state.el.trigger('mousemove');
+    });
+}
+
+// Public functions.
+
+function enableFocusGrabber() {
+    let tabIndex;
+
+    // When the Focus Grabber is being enabled, there are two different
+    // scenarios:
+    //
+    //     1.) Currently focused element was inside the video player.
+    //     2.) Currently focused element was somewhere else on the page.
+    //
+    // In the first case we must make sure that the video player doesn't
+    // loose focus, even though the controls are autohidden.
+    if ($(document.activeElement).parents().hasClass('video')) {
+        tabIndex = -1;
+    } else {
+        tabIndex = 0;
+    }
+
+    this.focusGrabber.elFirst.attr('tabindex', tabIndex);
+    this.focusGrabber.elLast.attr('tabindex', tabIndex);
+
+    // Don't loose focus. We are inside video player on some control, but
+    // because we can't remain focused on a hidden element, we will shift
+    // focus to the main video element.
+    //
+    // Once the main element will receive the un-focus ('blur') event, a
+    // 'mousemove' event will be triggered, and the video controls will
+    // receive focus once again.
+    if (tabIndex === -1) {
+        this.el.focus();
+
+        this.focusGrabber.elFirst.attr('tabindex', 0);
+        this.focusGrabber.elLast.attr('tabindex', 0);
+    }
+}
+
+function disableFocusGrabber() {
+    // Only programmatic focusing on these elements will be available.
+    // We don't want the user to focus on them (for example with the 'Tab'
+    // key).
+    this.focusGrabber.elFirst.attr('tabindex', -1);
+    this.focusGrabber.elLast.attr('tabindex', -1);
+}
+
+function onFocus(event, params) {
+    // Once the Focus Grabber placeholder elements will gain focus, we will
+    // trigger 'mousemove' event so that the autohidden controls will
+    // become visible.
+    this.el.trigger('mousemove');
+
+    this.focusGrabber.disableFocusGrabber();
+}
+
+export default FocusGrabber;
diff --git a/xblocks_contrib/video/static/js/src/02_html5_hls_video.js b/xblocks_contrib/video/static/js/src/02_html5_hls_video.js
new file mode 100644
index 00000000..094b6d87
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/02_html5_hls_video.js
@@ -0,0 +1,151 @@
+/* eslint-disable no-console, no-param-reassign */
+/**
+ * HTML5 video player module to support HLS video playback.
+ *
+ */
+
+'use strict';
+
+import _ from 'underscore';
+import HTML5Video from './02_html5_video.js';
+import HLS from 'hls';
+
+let HLSVideo = {};
+
+HLSVideo.Player = (function() {
+    /**
+     * Initialize HLS video player.
+     *
+     * @param {jQuery} el  Reference to video player container element
+     * @param {Object} config  Contains common config for video player
+     */
+    function Player(el, config) {
+        let self = this;
+
+        this.config = config;
+
+        // do common initialization independent of player type
+        this.init(el, config);
+
+        // set a default audio codec if not provided, this helps reduce issues
+        // switching audio codecs during playback
+        if (!this.config.defaultAudioCodec) {
+            this.config.defaultAudioCodec = "mp4a.40.5";
+        }
+
+        _.bindAll(this, 'playVideo', 'pauseVideo', 'onReady');
+
+        // If we have only HLS sources and browser doesn't support HLS then show error message.
+        if (config.HLSOnlySources && !config.canPlayHLS) {
+            this.showErrorMessage(null, '.video-hls-error');
+            return;
+        }
+
+        this.config.state.el.on('initialize', _.once(function() {
+            console.log('[HLS Video]: HLS Player initialized');
+            self.showPlayButton();
+        }));
+
+        // Safari has native support to play HLS videos
+        if (config.browserIsSafari) {
+            this.videoEl.attr('src', config.videoSources[0]);
+        } else {
+            // load auto start if auto_advance is enabled
+            if (config.state.auto_advance) {
+                this.hls = new HLS({autoStartLoad: true});
+            } else {
+                this.hls = new HLS({autoStartLoad: false});
+            }
+            this.hls.loadSource(config.videoSources[0]);
+            this.hls.attachMedia(this.video);
+
+            this.hls.on(HLS.Events.ERROR, this.onError.bind(this));
+
+            this.hls.on(HLS.Events.MANIFEST_PARSED, function(event, data) {
+                console.log(
+                    '[HLS Video]: MANIFEST_PARSED, qualityLevelsInfo: ',
+                    data.levels.map(function(level) {
+                        return {
+                            bitrate: level.bitrate,
+                            resolution: level.width + 'x' + level.height
+                        };
+                    })
+                );
+                self.config.onReadyHLS();
+            });
+            this.hls.on(HLS.Events.LEVEL_SWITCHED, function(event, data) {
+                let level = self.hls.levels[data.level];
+                console.log(
+                    '[HLS Video]: LEVEL_SWITCHED, qualityLevelInfo: ',
+                    {
+                        bitrate: level.bitrate,
+                        resolution: level.width + 'x' + level.height
+                    }
+                );
+            });
+        }
+    }
+
+    Player.prototype = Object.create(HTML5Video.Player.prototype);
+    Player.prototype.constructor = Player;
+
+    Player.prototype.playVideo = function() {
+        HTML5Video.Player.prototype.updatePlayerLoadingState.apply(this, ['show']);
+        if (!this.config.browserIsSafari) {
+            this.hls.startLoad();
+        }
+        HTML5Video.Player.prototype.playVideo.apply(this);
+    };
+
+    Player.prototype.pauseVideo = function() {
+        HTML5Video.Player.prototype.pauseVideo.apply(this);
+        HTML5Video.Player.prototype.updatePlayerLoadingState.apply(this, ['hide']);
+    };
+
+    Player.prototype.onPlaying = function() {
+        HTML5Video.Player.prototype.onPlaying.apply(this);
+        HTML5Video.Player.prototype.updatePlayerLoadingState.apply(this, ['hide']);
+    };
+
+    Player.prototype.onReady = function() {
+        this.config.events.onReady(null);
+    };
+
+    /**
+     * Handler for HLS video errors. This only takes care of fatal erros, non-fatal errors
+     * are automatically handled by hls.js
+     *
+     * @param {String} event `hlsError`
+     * @param {Object} data  Contains the information regarding error occurred.
+     */
+    Player.prototype.onError = function(event, data) {
+        if (data.fatal) {
+            switch (data.type) {
+            case HLS.ErrorTypes.NETWORK_ERROR:
+                console.error(
+                    '[HLS Video]: Fatal network error encountered, try to recover. Details: %s',
+                    data.details
+                );
+                this.hls.startLoad();
+                break;
+            case HLS.ErrorTypes.MEDIA_ERROR:
+                console.error(
+                    '[HLS Video]: Fatal media error encountered, try to recover. Details: %s',
+                    data.details
+                );
+                this.hls.recoverMediaError();
+                break;
+            default:
+                console.error(
+                    '[HLS Video]: Unrecoverable error encountered. Details: %s',
+                    data.details
+                );
+                break;
+            }
+        }
+    };
+
+    return Player;
+}());
+
+export default HLSVideo;
diff --git a/xblocks_contrib/video/static/js/src/02_html5_video.js b/xblocks_contrib/video/static/js/src/02_html5_video.js
new file mode 100644
index 00000000..83937205
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/02_html5_video.js
@@ -0,0 +1,380 @@
+/* eslint-disable no-console, no-param-reassign */
+/**
+ * @file HTML5 video player module. Provides methods to control the in-browser
+ * HTML5 video player.
+ *
+ * The goal was to write this module so that it closely resembles the YouTube
+ * API. The main reason for this is because initially the edX video player
+ * supported only YouTube videos. When HTML5 support was added, for greater
+ * compatibility, and to reduce the amount of code that needed to be modified,
+ * it was decided to write a similar API as the one provided by YouTube.
+ *
+ * @module HTML5Video
+ */
+
+import _ from 'underscore';
+
+let HTML5Video = {};
+
+HTML5Video.Player = (function() {
+    /*
+     * Constructor function for HTML5 Video player.
+     *
+     * @param {String|Object} el A DOM element where the HTML5 player will
+     * be inserted (as returned by jQuery(selector) function), or a
+     * selector string which will be used to select an element. This is a
+     * required parameter.
+     *
+     * @param config - An object whose properties will be used as
+     * configuration options for the HTML5 video player. This is an
+     * optional parameter. In the case if this parameter is missing, or
+     * some of the config object's properties are missing, defaults will be
+     * used. The available options (and their defaults) are as
+     * follows:
+     *
+     *     config = {
+     *
+     *        videoSources: [],   // An array with properties being video
+     *                            // sources. The property name is the
+     *                            // video format of the source. Supported
+     *                            // video formats are: 'mp4', 'webm', and
+     *                            // 'ogg'.
+     *        poster:             Video poster URL
+     *
+     *        browserIsSafari:    Flag to tell if current browser is Safari
+     *
+     *        events: {           // Object's properties identify the
+     *                            // events that the API fires, and the
+     *                            // functions (event listeners) that the
+     *                            // API will call when those events occur.
+     *                            // If value is null, or property is not
+     *                            // specified, then no callback will be
+     *                            // called for that event.
+     *
+     *              onReady: null,
+     *              onStateChange: null
+     *          }
+     *     }
+     */
+    function Player(el, config) {
+        let errorMessage, lastSource, sourceList;
+
+        // Create HTML markup for individual sources of the HTML5 <video> element.
+        sourceList = $.map(config.videoSources, function(source) {
+            return [
+                '<source ',
+                'src="', source,
+                // Following hack allows to open the same video twice
+                // https://code.google.com/p/chromium/issues/detail?id=31014
+                // Check whether the url already has a '?' inside, and if so,
+                // use '&' instead of '?' to prevent breaking the url's integrity.
+                (source.indexOf('?') === -1 ? '?' : '&'),
+                (new Date()).getTime(), '" />'
+            ].join('');
+        });
+
+        // do common initialization independent of player type
+        this.init(el, config);
+
+        // Create HTML markup for the <video> element, populating it with
+        // sources from previous step. Set playback not supported error message.
+        errorMessage = [
+            gettext('This browser cannot play .mp4, .ogg, or .webm files.'),
+            gettext('Try using a different browser, such as Google Chrome.')
+        ].join('');
+        this.video.innerHTML = sourceList.join('') + errorMessage;
+
+        lastSource = this.videoEl.find('source').last();
+        lastSource.on('error', this.showErrorMessage.bind(this));
+        lastSource.on('error', this.onError.bind(this));
+        this.videoEl.on('error', this.onError.bind(this));
+    }
+
+    Player.prototype.showPlayButton = function() {
+        this.videoOverlayEl.removeClass('is-hidden');
+    };
+
+    Player.prototype.hidePlayButton = function() {
+        this.videoOverlayEl.addClass('is-hidden');
+    };
+
+    Player.prototype.showLoading = function() {
+        this.el
+            .removeClass('is-initialized')
+            .find('.spinner')
+            .removeAttr('tabindex')
+            .attr({'aria-hidden': 'false'});
+    };
+
+    Player.prototype.hideLoading = function() {
+        this.el
+            .addClass('is-initialized')
+            .find('.spinner')
+            .attr({'aria-hidden': 'false', tabindex: -1});
+    };
+
+    Player.prototype.updatePlayerLoadingState = function(state) {
+        if (state === 'show') {
+            this.hidePlayButton();
+            this.showLoading();
+        } else if (state === 'hide') {
+            this.hideLoading();
+        }
+    };
+
+    Player.prototype.callStateChangeCallback = function() {
+        if ($.isFunction(this.config.events.onStateChange)) {
+            this.config.events.onStateChange({
+                data: this.playerState
+            });
+        }
+    };
+
+    Player.prototype.pauseVideo = function() {
+        this.video.pause();
+    };
+
+    Player.prototype.seekTo = function(value) {
+        if (
+            typeof value === 'number'
+            && value <= this.video.duration
+            && value >= 0
+        ) {
+            this.video.currentTime = value;
+        }
+    };
+
+    Player.prototype.setVolume = function(value) {
+        if (typeof value === 'number' && value <= 100 && value >= 0) {
+            this.video.volume = value * 0.01;
+        }
+    };
+
+    Player.prototype.getCurrentTime = function() {
+        return this.video.currentTime;
+    };
+
+    Player.prototype.playVideo = function() {
+        this.video.play();
+    };
+
+    Player.prototype.getPlayerState = function() {
+        return this.playerState;
+    };
+
+    Player.prototype.getVolume = function() {
+        return this.video.volume;
+    };
+
+    Player.prototype.getDuration = function() {
+        if (isNaN(this.video.duration)) {
+            return 0;
+        }
+
+        return this.video.duration;
+    };
+
+    Player.prototype.setPlaybackRate = function(value) {
+        let newSpeed = parseFloat(value);
+
+        if (isFinite(newSpeed)) {
+            if (this.video.playbackRate !== value) {
+                this.video.playbackRate = value;
+            }
+        }
+    };
+
+    Player.prototype.getAvailablePlaybackRates = function() {
+        return [0.75, 1.0, 1.25, 1.5, 2.0];
+    };
+
+    // eslint-disable-next-line no-underscore-dangle
+    Player.prototype._getLogs = function() {
+        return this.logs;
+    };
+
+    Player.prototype.showErrorMessage = function(event, css) {
+        let cssSelecter = css || '.video-player .video-error';
+        this.el
+            .find('.video-player div')
+            .addClass('hidden')
+            .end()
+            .find(cssSelecter)
+            .removeClass('is-hidden')
+            .end()
+            .addClass('is-initialized')
+            .find('.spinner')
+            .attr({
+                'aria-hidden': 'true',
+                tabindex: -1
+            });
+    };
+
+    Player.prototype.onError = function() {
+        if ($.isFunction(this.config.events.onError)) {
+            this.config.events.onError();
+        }
+    };
+
+    Player.prototype.destroy = function() {
+        this.video.removeEventListener('loadedmetadata', this.onLoadedMetadata, false);
+        this.video.removeEventListener('play', this.onPlay, false);
+        this.video.removeEventListener('playing', this.onPlaying, false);
+        this.video.removeEventListener('pause', this.onPause, false);
+        this.video.removeEventListener('ended', this.onEnded, false);
+        this.el
+            .find('.video-player div')
+            .removeClass('is-hidden')
+            .end()
+            .find('.video-player .video-error')
+            .addClass('is-hidden')
+            .end()
+            .removeClass('is-initialized')
+            .find('.spinner')
+            .attr({'aria-hidden': 'false'});
+        this.videoEl.off('remove');
+        this.videoEl.remove();
+    };
+
+    Player.prototype.onReady = function() {
+        this.config.events.onReady(null);
+        this.showPlayButton();
+    };
+
+    Player.prototype.onLoadedMetadata = function() {
+        this.playerState = HTML5Video.PlayerState.PAUSED;
+        if ($.isFunction(this.config.events.onReady)) {
+            this.onReady();
+        }
+    };
+
+    Player.prototype.onPlay = function() {
+        this.playerState = HTML5Video.PlayerState.BUFFERING;
+        this.callStateChangeCallback();
+        this.videoOverlayEl.addClass('is-hidden');
+    };
+
+    Player.prototype.onPlaying = function() {
+        this.playerState = HTML5Video.PlayerState.PLAYING;
+        this.callStateChangeCallback();
+        this.videoOverlayEl.addClass('is-hidden');
+    };
+
+    Player.prototype.onPause = function() {
+        this.playerState = HTML5Video.PlayerState.PAUSED;
+        this.callStateChangeCallback();
+        this.showPlayButton();
+    };
+
+    Player.prototype.onEnded = function() {
+        this.playerState = HTML5Video.PlayerState.ENDED;
+        this.callStateChangeCallback();
+    };
+
+    Player.prototype.init = function(el, config) {
+        let isTouch = window.onTouchBasedDevice() || '',
+            events = ['loadstart', 'progress', 'suspend', 'abort', 'error',
+                'emptied', 'stalled', 'play', 'pause', 'loadedmetadata',
+                'loadeddata', 'waiting', 'playing', 'canplay', 'canplaythrough',
+                'seeking', 'seeked', 'timeupdate', 'ended', 'ratechange',
+                'durationchange', 'volumechange'
+            ],
+            self = this,
+            callback;
+
+        this.config = config;
+        this.logs = [];
+        this.el = $(el);
+
+        // Because of problems with creating video element via jquery
+        // (http://bugs.jquery.com/ticket/9174) we create it using native JS.
+        this.video = document.createElement('video');
+
+        // Get the jQuery object and set error event handlers
+        this.videoEl = $(this.video);
+
+        // Video player overlay play button
+        this.videoOverlayEl = this.el.find('.video-wrapper .btn-play');
+
+        // The player state is used by other parts of the VideoPlayer to
+        // determine what the video is currently doing.
+        this.playerState = HTML5Video.PlayerState.UNSTARTED;
+
+        _.bindAll(this, 'onLoadedMetadata', 'onPlay', 'onPlaying', 'onPause', 'onEnded');
+
+        // Attach a 'click' event on the <video> element. It will cause the
+        // video to pause/play.
+        callback = function() {
+            let PlayerState = HTML5Video.PlayerState;
+
+            if (self.playerState === PlayerState.PLAYING) {
+                self.playerState = PlayerState.PAUSED;
+                self.pauseVideo();
+            } else {
+                self.playerState = PlayerState.PLAYING;
+                self.playVideo();
+            }
+        };
+        this.videoEl.on('click', callback);
+        this.videoOverlayEl.on('click', callback);
+
+        this.debug = false;
+        $.each(events, function(index, eventName) {
+            self.video.addEventListener(eventName, function() {
+                self.logs.push({
+                    'event name': eventName,
+                    state: self.playerState
+                });
+
+                if (self.debug) {
+                    console.log(
+                        'event name:', eventName,
+                        'state:', self.playerState,
+                        'readyState:', self.video.readyState,
+                        'networkState:', self.video.networkState
+                    );
+                }
+
+                el.trigger('html5:' + eventName, arguments);
+            });
+        });
+
+        // When the <video> tag has been processed by the browser, and it
+        // is ready for playback, notify other parts of the VideoPlayer,
+        // and initially pause the video.
+        this.video.addEventListener('loadedmetadata', this.onLoadedMetadata, false);
+        this.video.addEventListener('play', this.onPlay, false);
+        this.video.addEventListener('playing', this.onPlaying, false);
+        this.video.addEventListener('pause', this.onPause, false);
+        this.video.addEventListener('ended', this.onEnded, false);
+
+        if (/iP(hone|od)/i.test(isTouch[0])) {
+            this.videoEl.prop('controls', true);
+        }
+
+        // Set video poster
+        if (this.config.poster) {
+            this.videoEl.prop('poster', this.config.poster);
+        }
+
+        // Place the <video> element on the page.
+        this.videoEl.appendTo(el.find('.video-player > div:first-child'));
+    };
+
+    return Player;
+})();
+
+// The YouTube API presents several constants which describe the player's
+// state at a given moment. HTML5Video API will copy these constants so
+// that code which uses both the YouTube API and this API doesn't have to
+// change.
+HTML5Video.PlayerState = {
+    UNSTARTED: -1,
+    ENDED: 0,
+    PLAYING: 1,
+    PAUSED: 2,
+    BUFFERING: 3,
+    CUED: 5
+};
+
+export default HTML5Video;
diff --git a/xblocks_contrib/video/static/js/src/035_video_accessible_menu.js b/xblocks_contrib/video/static/js/src/035_video_accessible_menu.js
new file mode 100644
index 00000000..ae285815
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/035_video_accessible_menu.js
@@ -0,0 +1,65 @@
+'use strict';
+
+import _ from 'underscore';
+
+/**
+ * Video Download Transcript control module.
+ * @exports video/035_video_accessible_menu.js
+ * @constructor
+ * @param {jquery Element} element
+ * @param {Object} options
+ */
+let VideoTranscriptDownloadHandler = function(element, options) {
+    if (!(this instanceof VideoTranscriptDownloadHandler)) {
+        return new VideoTranscriptDownloadHandler(element, options);
+    }
+
+    _.bindAll(this, 'clickHandler');
+
+    this.container = element;
+    this.options = options || {};
+
+    if (this.container.find('.wrapper-downloads .wrapper-download-transcripts')) {
+        this.initialize();
+    }
+
+    return false;
+};
+
+VideoTranscriptDownloadHandler.prototype = {
+    // Initializes the module.
+    initialize: function() {
+        this.value = this.options.storage.getItem('transcript_download_format');
+        this.el = this.container.find('.list-download-transcripts');
+        this.el.on('click', '.btn-link', this.clickHandler);
+    },
+
+    // Event handler. We delay link clicks until the file type is set
+    clickHandler: function(event) {
+        let that = this;
+        let fileType;
+        let data;
+        let downloadUrl;
+
+        event.preventDefault();
+
+        fileType = $(event.target).data('value');
+        data = {transcript_download_format: fileType};
+        downloadUrl = $(event.target).attr('href');
+
+        $.ajax({
+            url: this.options.saveStateUrl,
+            type: 'POST',
+            dataType: 'json',
+            data: data,
+            success: function() {
+                that.options.storage.setItem('transcript_download_format', fileType);
+            },
+            complete: function() {
+                document.location.href = downloadUrl;
+            }
+        });
+    }
+};
+
+export default VideoTranscriptDownloadHandler;
diff --git a/xblocks_contrib/video/static/js/src/036_video_social_sharing.js b/xblocks_contrib/video/static/js/src/036_video_social_sharing.js
new file mode 100644
index 00000000..0ce61ba3
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/036_video_social_sharing.js
@@ -0,0 +1,85 @@
+// eslint-disable-next-line lines-around-directive
+'use strict';
+
+import _ from 'underscore';
+
+
+/**
+ * Video Social Sharing control module.
+ * @exports video/036_video_social_sharing.js
+ * @constructor
+ * @param {jquery Element} element
+ * @param {Object} options
+ */
+let VideoSocialSharingHandler = function(element, options) {
+    if (!(this instanceof VideoSocialSharingHandler)) {
+        return new VideoSocialSharingHandler(element, options);
+    }
+
+    _.bindAll(this, 'clickHandler');
+    _.bindAll(this, 'copyHandler');
+    _.bindAll(this, 'hideHandler');
+    _.bindAll(this, 'showHandler');
+
+    this.container = element;
+
+    if (this.container.find('.wrapper-downloads .wrapper-social-share')) {
+        this.initialize();
+    }
+
+    return false;
+};
+
+VideoSocialSharingHandler.prototype = {
+
+    // Initializes the module.
+    initialize: function() {
+        this.el = this.container.find('.wrapper-social-share');
+        this.baseVideoUrl = this.el.data('url');
+        this.course_id = this.container.data('courseId');
+        this.block_id = this.container.data('blockId');
+        this.el.on('click', '.social-share-link', this.clickHandler);
+
+        this.closeBtn = this.el.find('.close-btn');
+        this.toggleBtn = this.el.find('.social-toggle-btn');
+        this.copyBtn = this.el.find('.public-video-copy-btn');
+        this.shareContainer = this.el.find('.container-social-share');
+        this.closeBtn.on('click', this.hideHandler);
+        this.toggleBtn.on('click', this.showHandler);
+        this.copyBtn.on('click', this.copyHandler);
+    },
+
+    // Fire an analytics event on share button click.
+    clickHandler: function(event) {
+        let source = $(event.currentTarget).data('source');
+        this.sendAnalyticsEvent(source);
+    },
+
+    hideHandler: function(event) {
+        this.shareContainer.hide();
+        this.toggleBtn.show();
+    },
+
+    showHandler: function(event) {
+        this.shareContainer.show();
+        this.toggleBtn.hide();
+    },
+
+    copyHandler: function(event) {
+        navigator.clipboard.writeText(this.copyBtn.data('url'));
+    },
+
+    // Send an analytics event for share button tracking.
+    sendAnalyticsEvent: function(source) {
+        window.analytics.track(
+            'edx.social.video.share_button.clicked',
+            {
+                source,
+                video_block_id: this.container.data('blockId'),
+                course_id: this.container.data('courseId'),
+            }
+        );
+    }
+};
+
+export default VideoSocialSharingHandler;
diff --git a/xblocks_contrib/video/static/js/src/037_video_transcript_feedback.js b/xblocks_contrib/video/static/js/src/037_video_transcript_feedback.js
new file mode 100644
index 00000000..c5c1830b
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/037_video_transcript_feedback.js
@@ -0,0 +1,240 @@
+// VideoTranscriptFeedbackHandler module.
+'use strict';
+
+import _ from 'underscore';
+
+/**
+ * @desc VideoTranscriptFeedback module exports a function.
+ *
+ * @type {function}
+ * @access public
+ *
+ * @param {object} state - The object containing the state of the video
+ *     player. All other modules, their parameters, public variables, etc.
+ *     are available via this object.
+ *
+ * @this {object} The global window object.
+ *
+ */
+
+let VideoTranscriptFeedback = function(state) {
+    if (!(this instanceof VideoTranscriptFeedback)) {
+        return new VideoTranscriptFeedback(state);
+    }
+
+    _.bindAll(this, 'destroy', 'getFeedbackForCurrentTranscript', 'markAsPositiveFeedback', 'markAsNegativeFeedback', 'markAsEmptyFeedback',
+        'selectThumbsUp', 'selectThumbsDown', 'unselectThumbsUp', 'unselectThumbsDown', 'thumbsUpClickHandler', 'thumbsDownClickHandler',
+        'sendFeedbackForCurrentTranscript', 'onHideLanguageMenu', 'getCurrentLanguage', 'loadAndSetVisibility', 'showWidget', 'hideWidget'
+    );
+
+    this.state = state;
+    this.state.videoTranscriptFeedback = this;
+    this.currentTranscriptLanguage = this.state.lang;
+    this.transcriptLanguages = this.state.config.transcriptLanguages;
+
+    if (this.state.el.find('.wrapper-transcript-feedback').length) {
+        this.initialize();
+    }
+
+    return false;
+};
+
+VideoTranscriptFeedback.prototype = {
+    destroy: function () {
+        this.state.el.off(this.events);
+    },
+
+    initialize: function () {
+        this.el = this.state.el.find('.wrapper-transcript-feedback');
+
+        this.videoId = this.el.data('video-id');
+        this.userId = this.el.data('user-id');
+        this.aiTranslationsUrl = this.state.config.aiTranslationsUrl;
+
+        this.thumbsUpButton = this.el.find('.thumbs-up-btn');
+        this.thumbsDownButton = this.el.find('.thumbs-down-btn');
+        this.thumbsUpButton.on('click', this.thumbsUpClickHandler);
+        this.thumbsDownButton.on('click', this.thumbsDownClickHandler);
+
+        this.events = {
+            'language_menu:hide': this.onHideLanguageMenu,
+            destroy: this.destroy
+        };
+        this.loadAndSetVisibility();
+        this.bindHandlers();
+    },
+
+    bindHandlers: function () {
+        this.state.el.on(this.events);
+    },
+
+    getFeedbackForCurrentTranscript: function () {
+        let self = this;
+        let url = self.aiTranslationsUrl + '/transcript-feedback' + '?transcript_language=' + self.currentTranscriptLanguage + '&video_id=' + self.videoId + '&user_id=' + self.userId;
+
+        $.ajax({
+            url: url,
+            type: 'GET',
+            success: function (data) {
+                if (data && data.value === true) {
+                    self.markAsPositiveFeedback();
+                    self.currentFeedback = true;
+                } else {
+                    if (data && data.value === false) {
+                        self.markAsNegativeFeedback();
+                        self.currentFeedback = false;
+                    } else {
+                        self.markAsEmptyFeedback();
+                        self.currentFeedback = null;
+                    }
+                }
+            },
+            error: function (error) {
+                self.markAsEmptyFeedback();
+                self.currentFeedback = null;
+            }
+        });
+    },
+
+    markAsPositiveFeedback: function () {
+        this.selectThumbsUp();
+        this.unselectThumbsDown();
+    },
+
+    markAsNegativeFeedback: function () {
+        this.selectThumbsDown();
+        this.unselectThumbsUp();
+    },
+
+    markAsEmptyFeedback: function () {
+        this.unselectThumbsUp();
+        this.unselectThumbsDown();
+    },
+
+    selectThumbsUp: function () {
+        let thumbsUpIcon = this.thumbsUpButton.find('.thumbs-up-icon');
+        if (thumbsUpIcon[0].classList.contains('fa-thumbs-o-up')) {
+            thumbsUpIcon[0].classList.remove("fa-thumbs-o-up");
+            thumbsUpIcon[0].classList.add("fa-thumbs-up");
+        }
+    },
+
+    selectThumbsDown: function () {
+        let thumbsDownIcon = this.thumbsDownButton.find('.thumbs-down-icon');
+        if (thumbsDownIcon[0].classList.contains('fa-thumbs-o-down')) {
+            thumbsDownIcon[0].classList.remove("fa-thumbs-o-down");
+            thumbsDownIcon[0].classList.add("fa-thumbs-down");
+        }
+    },
+
+    unselectThumbsUp: function () {
+        let thumbsUpIcon = this.thumbsUpButton.find('.thumbs-up-icon');
+        if (thumbsUpIcon[0].classList.contains('fa-thumbs-up')) {
+            thumbsUpIcon[0].classList.remove("fa-thumbs-up");
+            thumbsUpIcon[0].classList.add("fa-thumbs-o-up");
+        }
+    },
+
+    unselectThumbsDown: function () {
+        let thumbsDownIcon = this.thumbsDownButton.find('.thumbs-down-icon');
+        if (thumbsDownIcon[0].classList.contains('fa-thumbs-down')) {
+            thumbsDownIcon[0].classList.remove("fa-thumbs-down");
+            thumbsDownIcon[0].classList.add("fa-thumbs-o-down");
+        }
+    },
+
+    thumbsUpClickHandler: function () {
+        if (this.currentFeedback) {
+            this.sendFeedbackForCurrentTranscript(null);
+        } else {
+            this.sendFeedbackForCurrentTranscript(true);
+        }
+    },
+
+    thumbsDownClickHandler: function () {
+        if (this.currentFeedback === false) {
+            this.sendFeedbackForCurrentTranscript(null);
+        } else {
+            this.sendFeedbackForCurrentTranscript(false);
+        }
+    },
+
+    sendFeedbackForCurrentTranscript: function (feedbackValue) {
+        let self = this;
+        let url = self.aiTranslationsUrl + '/transcript-feedback/';
+        $.ajax({
+            url: url,
+            type: 'POST',
+            dataType: 'json',
+            data: {
+                transcript_language: self.currentTranscriptLanguage,
+                video_id: self.videoId,
+                user_id: self.userId,
+                value: feedbackValue,
+            },
+            success: function (data) {
+                if (data && data.value === true) {
+                    self.markAsPositiveFeedback();
+                    self.currentFeedback = true;
+                } else {
+                    if (data && data.value === false) {
+                        self.markAsNegativeFeedback();
+                        self.currentFeedback = false;
+                    } else {
+                        self.markAsEmptyFeedback();
+                        self.currentFeedback = null;
+                    }
+                }
+            },
+            error: function () {
+                self.markAsEmptyFeedback();
+                self.currentFeedback = null;
+            }
+        });
+    },
+
+    onHideLanguageMenu: function () {
+        let newLanguageSelected = this.getCurrentLanguage();
+        if (this.currentTranscriptLanguage !== newLanguageSelected) {
+            this.currentTranscriptLanguage = this.getCurrentLanguage();
+            this.loadAndSetVisibility();
+        }
+    },
+
+    getCurrentLanguage: function () {
+        let language = this.state.lang;
+        return language;
+    },
+
+    loadAndSetVisibility: function () {
+        let self = this;
+        let url = self.aiTranslationsUrl + '/video-transcript' + '?transcript_language=' + self.currentTranscriptLanguage + '&video_id=' + self.videoId;
+
+        $.ajax({
+            url: url,
+            type: 'GET',
+            async: false,
+            success: function (data) {
+                if (data && data.status === 'Completed') {
+                    self.showWidget();
+                    self.getFeedbackForCurrentTranscript();
+                } else {
+                    self.hideWidget();
+                }
+            },
+            error: function (error) {
+                self.hideWidget();
+            }
+        });
+    },
+
+    showWidget: function () {
+        this.el.show();
+    },
+
+    hideWidget: function () {
+        this.el.hide();
+    }
+};
+
+export default VideoTranscriptFeedback;
diff --git a/xblocks_contrib/video/static/js/src/03_video_player.js b/xblocks_contrib/video/static/js/src/03_video_player.js
new file mode 100644
index 00000000..a8914e20
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/03_video_player.js
@@ -0,0 +1,911 @@
+/* eslint-disable no-console, no-param-reassign */
+import HTML5Video from './02_html5_video.js';
+import HTML5HLSVideo from './02_html5_hls_video.js';
+import Resizer from './00_resizer.js';
+import HLS from 'hls';
+import _ from 'underscore';
+import * as Time from './utils/time.js';
+
+let dfd = $.Deferred();
+
+let VideoPlayer = function(state) {
+    state.videoPlayer = {};
+    _makeFunctionsPublic(state);
+    _initialize(state);
+    // No callbacks to DOM events (click, mousemove, etc.).
+
+    return dfd.promise();
+};
+
+let methodsDict = {
+    destroy: destroy,
+    duration: duration,
+    handlePlaybackQualityChange: handlePlaybackQualityChange,
+
+    // Added for finer graded seeking control.
+    // Please see:
+    //     https://developers.google.com/youtube/js_api_reference#Events
+    isBuffering: isBuffering,
+    // https://developers.google.com/youtube/js_api_reference#cueVideoById
+    isCued: isCued,
+
+    isEnded: isEnded,
+    isPlaying: isPlaying,
+    isUnstarted: isUnstarted,
+    onCaptionSeek: onSeek,
+    onEnded: onEnded,
+    onError: onError,
+    onPause: onPause,
+    onPlay: onPlay,
+    runTimer: runTimer,
+    stopTimer: stopTimer,
+    onLoadMetadataHtml5: onLoadMetadataHtml5,
+    onPlaybackQualityChange: onPlaybackQualityChange,
+    onReady: onReady,
+    onSlideSeek: onSeek,
+    onSpeedChange: onSpeedChange,
+    onAutoAdvanceChange: onAutoAdvanceChange,
+    onStateChange: onStateChange,
+    onUnstarted: onUnstarted,
+    onVolumeChange: onVolumeChange,
+    pause: pause,
+    play: play,
+    seekTo: seekTo,
+    setPlaybackRate: setPlaybackRate,
+    update: update,
+    figureOutStartEndTime: figureOutStartEndTime,
+    figureOutStartingTime: figureOutStartingTime,
+    updatePlayTime: updatePlayTime
+};
+/* eslint-enable no-use-before-define */
+
+VideoPlayer.prototype = methodsDict;
+
+export default VideoPlayer;
+
+// ***************************************************************
+// Private functions start here.
+// ***************************************************************
+
+// function _makeFunctionsPublic(state)
+//
+//     Functions which will be accessible via 'state' object. When called,
+//     these functions will get the 'state' object as a context.
+function _makeFunctionsPublic(state) {
+    let debouncedF = _.debounce(
+        function(params) {
+            // Can't cancel a queued debounced function on destroy
+            if (state.videoPlayer) {
+                return onSeek.call(this, params);
+            }
+        }.bind(state),
+        300
+    );
+
+    state.bindTo(methodsDict, state.videoPlayer, state);
+
+    state.videoPlayer.onSlideSeek = debouncedF;
+    state.videoPlayer.onCaptionSeek = debouncedF;
+}
+
+// Updates players state, once metadata is loaded for html5 player.
+function onLoadMetadataHtml5() {
+    let player = this.videoPlayer.player.videoEl;
+    let videoWidth = player[0].videoWidth || player.width();
+    let videoHeight = player[0].videoHeight || player.height();
+
+    _resize(this, videoWidth, videoHeight);
+    _updateVcrAndRegion(this);
+}
+
+// function _initialize(state)
+//
+//     Create any necessary DOM elements, attach them, and set their
+//     initial configuration. Also make the created DOM elements available
+//     via the 'state' object. Much easier to work this way - you don't
+//     have to do repeated jQuery element selects.
+// eslint-disable-next-line no-underscore-dangle
+function _initialize(state) {
+    let youTubeId;
+    let player;
+    let userAgent;
+    let commonPlayerConfig;
+    let eventToBeTriggered = 'loadedmetadata';
+
+    // The function is called just once to apply pre-defined configurations
+    // by student before video starts playing. Waits until the video's
+    // metadata is loaded, which normally happens just after the video
+    // starts playing. Just after that configurations can be applied.
+    state.videoPlayer.ready = _.once(function() {
+        if (!state.isFlashMode() && state.speed != '1.0') {
+            state.videoPlayer.setPlaybackRate(state.speed);
+        }
+    });
+
+    if (state.isYoutubeType()) {
+        state.videoPlayer.PlayerState = YT.PlayerState;
+        state.videoPlayer.PlayerState.UNSTARTED = -1;
+    } else {
+        state.videoPlayer.PlayerState = HTML5Video.PlayerState;
+    }
+
+    state.videoPlayer.currentTime = 0;
+
+    state.videoPlayer.goToStartTime = true;
+    state.videoPlayer.stopAtEndTime = true;
+
+    state.videoPlayer.playerVars = {
+        controls: 0,
+        wmode: 'transparent',
+        rel: 0,
+        showinfo: 0,
+        enablejsapi: 1,
+        modestbranding: 1,
+        cc_load_policy: 0
+    };
+
+    if (!state.isFlashMode()) {
+        state.videoPlayer.playerVars.html5 = 1;
+    }
+
+    // Detect the current browser for several browser-specific work-arounds.
+    userAgent = navigator.userAgent.toLowerCase();
+    state.browserIsFirefox = userAgent.indexOf('firefox') > -1;
+    state.browserIsChrome = userAgent.indexOf('chrome') > -1;
+    // Chrome includes both "Chrome" and "Safari" in the user agent.
+    state.browserIsSafari = (userAgent.indexOf('safari') > -1
+                     && !state.browserIsChrome);
+
+    // Browser can play HLS videos if either `Media Source Extensions`
+    // feature is supported or browser is safari (native HLS support)
+    state.canPlayHLS = state.HLSVideoSources.length > 0 && (HLS.isSupported() || state.browserIsSafari);
+    state.HLSOnlySources = state.config.sources.length > 0
+                   && state.config.sources.length === state.HLSVideoSources.length;
+
+    commonPlayerConfig = {
+        playerVars: state.videoPlayer.playerVars,
+        videoSources: state.config.sources,
+        poster: state.config.poster,
+        browserIsSafari: state.browserIsSafari,
+        events: {
+            onReady: state.videoPlayer.onReady,
+            onStateChange: state.videoPlayer.onStateChange,
+            onError: state.videoPlayer.onError
+        }
+    };
+
+    if (state.videoType === 'html5') {
+        if (state.canPlayHLS || state.HLSOnlySources) {
+            state.videoPlayer.player = new HTML5HLSVideo.Player(
+                state.el,
+                _.extend({}, commonPlayerConfig, {
+                    state: state,
+                    onReadyHLS: function() { dfd.resolve(); },
+                    videoSources: state.HLSVideoSources,
+                    canPlayHLS: state.canPlayHLS,
+                    HLSOnlySources: state.HLSOnlySources
+                })
+            );
+            // `loadedmetadata` event triggered too early on Safari due
+            // to which correct video dimensions were not calculated
+            eventToBeTriggered = state.browserIsSafari ? 'loadeddata' : eventToBeTriggered;
+        } else {
+            state.videoPlayer.player = new HTML5Video.Player(state.el, commonPlayerConfig);
+        }
+        // eslint-disable-next-line no-multi-assign
+        player = state.videoEl = state.videoPlayer.player.videoEl;
+        player[0].addEventListener(eventToBeTriggered, state.videoPlayer.onLoadMetadataHtml5, false);
+        player.on('remove', state.videoPlayer.destroy);
+    } else {
+        youTubeId = state.youtubeId();
+
+        state.videoPlayer.player = new YT.Player(state.id, {
+            playerVars: state.videoPlayer.playerVars,
+            videoId: youTubeId,
+            events: {
+                onReady: state.videoPlayer.onReady,
+                onStateChange: state.videoPlayer.onStateChange,
+                onPlaybackQualityChange: state.videoPlayer.onPlaybackQualityChange,
+                onError: state.videoPlayer.onError
+            }
+        });
+
+        state.el.on('initialize', function() {
+            // eslint-disable-next-line no-shadow, no-multi-assign
+            let player = state.videoEl = state.el.find('iframe');
+            let videoWidth = player.attr('width') || player.width();
+            let videoHeight = player.attr('height') || player.height();
+
+            player.on('remove', state.videoPlayer.destroy);
+
+            _resize(state, videoWidth, videoHeight);
+            _updateVcrAndRegion(state, true);
+        });
+    }
+
+    if (state.isTouch) {
+        dfd.resolve();
+    }
+}
+
+function _updateVcrAndRegion(state, isYoutube) {
+    // eslint-disable-next-line no-shadow
+    let update = function(state) {
+        // eslint-disable-next-line no-shadow
+        let duration = state.videoPlayer.duration();
+        let time = state.videoPlayer.figureOutStartingTime(duration);
+
+        // Update the VCR.
+        state.trigger(
+            'videoControl.updateVcrVidTime',
+            {
+                time: time,
+                duration: duration
+            }
+        );
+
+        // Update the time slider.
+        state.trigger(
+            'videoProgressSlider.updateStartEndTimeRegion',
+            {
+                duration: duration
+            }
+        );
+        state.trigger(
+            'videoProgressSlider.updatePlayTime',
+            {
+                time: time,
+                duration: duration
+            }
+        );
+    };
+
+    // After initialization, update the VCR with total time.
+    // At this point only the metadata duration is available (not
+    // very precise), but it is better than having 00:00:00 for
+    // total time.
+    if (state.youtubeMetadataReceived || !isYoutube) {
+        // Metadata was already received, and is available.
+        update(state);
+    } else {
+        // We wait for metadata to arrive, before we request the update
+        // of the VCR video time, and of the start-end time region.
+        // Metadata contains duration of the video.
+        state.el.on('metadata_received', function() {
+            update(state);
+        });
+    }
+}
+
+function _resize(state, videoWidth, videoHeight) {
+    state.resizer = new Resizer({
+        element: state.videoEl,
+        elementRatio: videoWidth / videoHeight,
+        container: state.container
+    })
+        .callbacks.once(function() {
+            state.el.trigger('caption:resize');
+        })
+        .setMode('width');
+
+    // Update captions size when controls becomes visible on iPad or Android
+    if (/iPad|Android/i.test(state.isTouch[0])) {
+        state.el.on('controls:show', function() {
+            state.el.trigger('caption:resize');
+        });
+    }
+
+    $(window).on('resize.video', _.debounce(function() {
+        state.trigger('videoFullScreen.updateControlsHeight', null);
+        state.el.trigger('caption:resize');
+        state.resizer.align();
+    }, 100));
+}
+
+// function _restartUsingFlash(state)
+//
+//     When we are about to play a YouTube video in HTML5 mode and discover
+//     that we only have one available playback rate, we will switch to
+//     Flash mode. In Flash speed switching is done by reloading videos
+//     recorded at different frame rates.
+function _restartUsingFlash(state) {
+    // Remove from the page current iFrame with HTML5 video.
+    state.videoPlayer.player.destroy();
+
+    state.setPlayerMode('flash');
+
+    console.log('[Video info]: Changing YouTube player mode to "flash".');
+
+    // Removed configuration option that requests the HTML5 mode.
+    delete state.videoPlayer.playerVars.html5;
+
+    // Request for the creation of a new Flash player
+    state.videoPlayer.player = new YT.Player(state.id, {
+        playerVars: state.videoPlayer.playerVars,
+        videoId: state.youtubeId(),
+        events: {
+            onReady: state.videoPlayer.onReady,
+            onStateChange: state.videoPlayer.onStateChange,
+            onPlaybackQualityChange: state.videoPlayer.onPlaybackQualityChange,
+            onError: state.videoPlayer.onError
+        }
+    });
+
+    _updateVcrAndRegion(state, true);
+    state.el.trigger('caption:fetch');
+    state.resizer.setElement(state.el.find('iframe')).align();
+}
+
+// ***************************************************************
+// Public functions start here.
+// These are available via the 'state' object. Their context ('this'
+// keyword) is the 'state' object. The magic private function that makes
+// them available and sets up their context is makeFunctionsPublic().
+// ***************************************************************
+
+function destroy() {
+    let player = this.videoPlayer.player;
+    this.el.removeClass([
+        'is-unstarted', 'is-playing', 'is-paused', 'is-buffered',
+        'is-ended', 'is-cued'
+    ].join(' '));
+    $(window).off('.video');
+    this.el.trigger('destroy');
+    this.el.off();
+    this.videoPlayer.stopTimer();
+    if (this.resizer && this.resizer.destroy) {
+        this.resizer.destroy();
+    }
+    if (player && player.video) {
+        player.video.removeEventListener('loadedmetadata', this.videoPlayer.onLoadMetadataHtml5, false);
+    }
+    if (player && _.isFunction(player.destroy)) {
+        player.destroy();
+    }
+    if (this.canPlayHLS && player.hls) {
+        player.hls.destroy();
+    }
+    delete this.videoPlayer;
+}
+
+function pause() {
+    if (this.videoPlayer.player.pauseVideo) {
+        this.videoPlayer.player.pauseVideo();
+    }
+}
+
+function play() {
+    if (this.videoPlayer.player.playVideo) {
+        if (this.videoPlayer.isEnded()) {
+            // When the video will start playing again from the start, the
+            // start-time and end-time will come back into effect.
+            this.videoPlayer.goToStartTime = true;
+        }
+
+        this.videoPlayer.player.playVideo();
+    }
+}
+
+// This function gets the video's current play position in time
+// (currentTime) and its duration.
+// It is called at a regular interval when the video is playing.
+function update(time) {
+    this.videoPlayer.currentTime = time || this.videoPlayer.player.getCurrentTime();
+
+    if (isFinite(this.videoPlayer.currentTime)) {
+        this.videoPlayer.updatePlayTime(this.videoPlayer.currentTime);
+
+        // We need to pause the video if current time is smaller (or equal)
+        // than end-time. Also, we must make sure that this is only done
+        // once per video playing from start to end.
+        if (
+            this.videoPlayer.endTime !== null
+    && this.videoPlayer.endTime <= this.videoPlayer.currentTime
+        ) {
+            this.videoPlayer.pause();
+
+            this.trigger('videoProgressSlider.notifyThroughHandleEnd', {
+                end: true
+            });
+
+            this.el.trigger('stop');
+        }
+        this.el.trigger('timeupdate', [this.videoPlayer.currentTime]);
+    }
+}
+
+function setPlaybackRate(newSpeed) {
+    this.videoPlayer.player.setPlaybackRate(newSpeed);
+}
+
+function onSpeedChange(newSpeed) {
+    let time = this.videoPlayer.currentTime;
+
+    if (this.isFlashMode()) {
+        this.videoPlayer.currentTime = Time.convert(
+            time,
+            parseFloat(this.speed),
+            newSpeed
+        );
+    }
+
+    newSpeed = parseFloat(newSpeed);
+    this.setSpeed(newSpeed);
+    this.videoPlayer.setPlaybackRate(newSpeed);
+}
+
+function onAutoAdvanceChange(enabled) {
+    this.setAutoAdvance(enabled);
+}
+
+// Every 200 ms, if the video is playing, we call the function update, via
+// clearInterval. This interval is called updateInterval.
+// It is created on a onPlay event. Cleared on a onPause event.
+// Reinitialized on a onSeek event.
+function onSeek(params) {
+    let time = params.time,
+        type = params.type,
+        oldTime = this.videoPlayer.currentTime;
+    // After the user seeks, the video will start playing from
+    // the sought point, and stop playing at the end.
+    this.videoPlayer.goToStartTime = false;
+
+    this.videoPlayer.seekTo(time);
+
+    this.el.trigger('seek', [time, oldTime, type]);
+}
+
+function seekTo(time) {
+    // eslint-disable-next-line no-shadow
+    let duration = this.videoPlayer.duration();
+
+    if ((typeof time !== 'number') || (time > duration) || (time < 0)) {
+        return false;
+    }
+
+    this.el.off('play.seek');
+
+    if (this.videoPlayer.isPlaying()) {
+        this.videoPlayer.stopTimer();
+    }
+    let isUnplayed = this.videoPlayer.isUnstarted()
+             || this.videoPlayer.isCued();
+
+    // Use `cueVideoById` method for youtube video that is not played before.
+    if (isUnplayed && this.isYoutubeType()) {
+        this.videoPlayer.player.cueVideoById(this.youtubeId(), time);
+    } else {
+        // Youtube video cannot be rewinded during bufferization, so wait to
+        // finish bufferization and then rewind the video.
+        if (this.isYoutubeType() && this.videoPlayer.isBuffering()) {
+            this.el.on('play.seek', function() {
+                this.videoPlayer.player.seekTo(time, true);
+            }.bind(this));
+        } else {
+            // Otherwise, just seek the video
+            this.videoPlayer.player.seekTo(time, true);
+        }
+    }
+
+    this.videoPlayer.updatePlayTime(time, true);
+
+    // the timer is stopped above; restart it.
+    if (this.videoPlayer.isPlaying()) {
+        this.videoPlayer.runTimer();
+    }
+    // Update the the current time when user seek. (YoutubePlayer)
+    this.videoPlayer.currentTime = time;
+}
+
+function runTimer() {
+    if (!this.videoPlayer.updateInterval) {
+        this.videoPlayer.updateInterval = window.setInterval(
+            this.videoPlayer.update, 200
+        );
+
+        this.videoPlayer.update();
+    }
+}
+
+function stopTimer() {
+    window.clearInterval(this.videoPlayer.updateInterval);
+    delete this.videoPlayer.updateInterval;
+}
+
+function onEnded() {
+    let time = this.videoPlayer.duration();
+
+    this.trigger('videoProgressSlider.notifyThroughHandleEnd', {
+        end: true
+    });
+
+    if (this.videoPlayer.skipOnEndedStartEndReset) {
+        this.videoPlayer.skipOnEndedStartEndReset = undefined;
+    }
+    // Sometimes `onEnded` events fires when `currentTime` not equal
+    // `duration`. In this case, slider doesn't reach the end point of
+    // timeline.
+    this.videoPlayer.updatePlayTime(time);
+
+    // Emit 'pause_video' event when a video ends if Player is of Youtube
+    if (this.isYoutubeType()) {
+        this.el.trigger('pause', arguments);
+    }
+    this.el.trigger('ended', arguments);
+}
+
+function onPause() {
+    this.videoPlayer.stopTimer();
+    this.el.trigger('pause', arguments);
+}
+
+function onPlay() {
+    this.videoPlayer.runTimer();
+    this.trigger('videoProgressSlider.notifyThroughHandleEnd', {
+        end: false
+    });
+    this.videoPlayer.ready();
+    this.el.trigger('play', arguments);
+}
+
+function onUnstarted() { }
+
+function handlePlaybackQualityChange(value) {
+    this.videoPlayer.player.setPlaybackQuality(value);
+}
+
+function onPlaybackQualityChange() {
+    let quality;
+
+    quality = this.videoPlayer.player.getPlaybackQuality();
+
+    this.trigger('videoQualityControl.onQualityChange', quality);
+    this.el.trigger('qualitychange', arguments);
+}
+
+function onReady() {
+    let _this = this,
+        availablePlaybackRates, baseSpeedSubs,
+        player, videoWidth, videoHeight;
+
+    dfd.resolve();
+
+    this.el.on('speedchange', function(event, speed) {
+        _this.videoPlayer.onSpeedChange(speed);
+    });
+
+    this.el.on('autoadvancechange', function(event, enabled) {
+        _this.videoPlayer.onAutoAdvanceChange(enabled);
+    });
+
+    this.el.on('volumechange volumechange:silent', function(event, volume) {
+        _this.videoPlayer.onVolumeChange(volume);
+    });
+
+    availablePlaybackRates = this.videoPlayer.player
+        .getAvailablePlaybackRates();
+
+    // Because of problems with muting sound outside of range 0.25 and
+    // 5.0, we should filter our available playback rates.
+    // Issues:
+    //   https://code.google.com/p/chromium/issues/detail?id=264341
+    //   https://bugzilla.mozilla.org/show_bug.cgi?id=840745
+    //   https://developer.mozilla.org/en-US/docs/DOM/HTMLMediaElement
+
+    availablePlaybackRates = _.filter(
+        availablePlaybackRates,
+        function(item) {
+            let speed = Number(item);
+            return speed > 0.25 && speed <= 5;
+        }
+    );
+
+    // Because of a recent change in the YouTube API (not documented), sometimes
+    // HTML5 mode loads after Flash mode has been loaded. In this case we have
+    // multiple speeds available but the variable `this.currentPlayerMode` is
+    // set to "flash". This is impossible because in Flash mode we can have
+    // only one speed available. Therefore we must execute the following code
+    // block if we have multiple speeds or if `this.currentPlayerMode` is set to
+    // "html5". If any of the two conditions are true, we then set the variable
+    // `this.currentPlayerMode` to "html5".
+    //
+    // For more information, please see the PR that introduced this change:
+    //     https://github.com/openedx/edx-platform/pull/2841
+    if (
+        (this.isHtml5Mode() || availablePlaybackRates.length > 1)
+&& this.isYoutubeType()
+    ) {
+        if (availablePlaybackRates.length === 1 && !this.isTouch) {
+            // This condition is needed in cases when Firefox version is
+            // less than 20. In those versions HTML5 playback could only
+            // happen at 1 speed (no speed changing). Therefore, in this
+            // case, we need to switch back to Flash.
+            //
+            // This might also happen in other browsers, therefore when we
+            // have 1 speed available, we fall back to Flash.
+
+            _restartUsingFlash(this);
+            return false;
+        } else if (availablePlaybackRates.length > 1) {
+            this.setPlayerMode('html5');
+
+            // We need to synchronize available frame rates with the ones
+            // that the user specified.
+
+            baseSpeedSubs = this.videos['1.0'];
+            // this.videos is a dictionary containing various frame rates
+            // and their associated subs.
+
+            // First clear the dictionary.
+            $.each(this.videos, function(index, value) {
+                delete _this.videos[index];
+            });
+            this.speeds = [];
+            // Recreate it with the supplied frame rates.
+            $.each(availablePlaybackRates, function(index, value) {
+                let key = value.toFixed(2).replace(/\.00$/, '.0');
+
+                _this.videos[key] = baseSpeedSubs;
+                _this.speeds.push(key);
+            });
+
+            this.setSpeed(this.speed);
+            this.el.trigger('speed:render', [this.speeds, this.speed]);
+        }
+    }
+
+    if (this.isFlashMode()) {
+        this.setSpeed(this.speed);
+        this.el.trigger('speed:set', [this.speed]);
+    }
+
+    if (this.isHtml5Mode()) {
+        this.videoPlayer.player.setPlaybackRate(this.speed);
+    }
+
+    // eslint-disable-next-line no-shadow
+    let duration = this.videoPlayer.duration(),
+        time = this.videoPlayer.figureOutStartingTime(duration);
+
+    // this.duration will be set initially only if duration is coming from edx-val
+    this.duration = this.duration || duration;
+
+    if (time > 0 && this.videoPlayer.goToStartTime) {
+        this.videoPlayer.seekTo(time);
+    }
+
+    this.el.trigger('ready', arguments);
+
+    if (this.config.autoplay) {
+        this.videoPlayer.play();
+    }
+}
+
+function onStateChange(event) {
+    this.el.removeClass([
+        'is-unstarted', 'is-playing', 'is-paused', 'is-buffered',
+        'is-ended', 'is-cued'
+    ].join(' '));
+
+    // eslint-disable-next-line default-case
+    switch (event.data) {
+    case this.videoPlayer.PlayerState.UNSTARTED:
+        this.el.addClass('is-unstarted');
+        this.videoPlayer.onUnstarted();
+        break;
+    case this.videoPlayer.PlayerState.PLAYING:
+        this.el.addClass('is-playing');
+        this.videoPlayer.onPlay();
+        break;
+    case this.videoPlayer.PlayerState.PAUSED:
+        this.el.addClass('is-paused');
+        this.videoPlayer.onPause();
+        break;
+    case this.videoPlayer.PlayerState.BUFFERING:
+        this.el.addClass('is-buffered');
+        this.el.trigger('buffering');
+        break;
+    case this.videoPlayer.PlayerState.ENDED:
+        this.el.addClass('is-ended');
+        this.videoPlayer.onEnded();
+        break;
+    case this.videoPlayer.PlayerState.CUED:
+        this.el.addClass('is-cued');
+        if (this.isFlashMode()) {
+            this.videoPlayer.play();
+        }
+        break;
+    }
+}
+
+function onError(code) {
+    this.el.trigger('error', [code]);
+}
+
+// eslint-disable-next-line no-shadow
+function figureOutStartEndTime(duration) {
+    let videoPlayer = this.videoPlayer;
+
+    videoPlayer.startTime = this.config.startTime;
+    if (videoPlayer.startTime >= duration) {
+        videoPlayer.startTime = 0;
+    } else if (this.isFlashMode()) {
+        videoPlayer.startTime /= Number(this.speed);
+    }
+
+    videoPlayer.endTime = this.config.endTime;
+    if (
+        videoPlayer.endTime <= videoPlayer.startTime
+            || videoPlayer.endTime >= duration
+    ) {
+        videoPlayer.endTime = null;
+    } else if (this.isFlashMode()) {
+        videoPlayer.endTime /= Number(this.speed);
+    }
+}
+
+// eslint-disable-next-line no-shadow
+function figureOutStartingTime(duration) {
+    let savedVideoPosition = this.config.savedVideoPosition,
+
+        // Default starting time is 0. This is the case when
+        // there is not start-time, no previously saved position,
+        // or one (or both) of those values is incorrect.
+        time = 0,
+
+        startTime, endTime;
+
+    this.videoPlayer.figureOutStartEndTime(duration);
+
+    startTime = this.videoPlayer.startTime;
+    endTime = this.videoPlayer.endTime;
+
+    if (startTime > 0) {
+        if (
+            startTime < savedVideoPosition
+&& (endTime > savedVideoPosition || endTime === null)
+
+// We do not want to jump to the end of the video.
+// We subtract 1 from the duration for a 1 second
+// safety net.
+&& savedVideoPosition < duration - 1
+        ) {
+            time = savedVideoPosition;
+        } else {
+            time = startTime;
+        }
+    } else if (
+        savedVideoPosition > 0
+&& (endTime > savedVideoPosition || endTime === null)
+
+// We do not want to jump to the end of the video.
+// We subtract 1 from the duration for a 1 second
+// safety net.
+&& savedVideoPosition < duration - 1
+    ) {
+        time = savedVideoPosition;
+    }
+
+    return time;
+}
+
+function updatePlayTime(time, skip_seek) {
+    let videoPlayer = this.videoPlayer,
+        endTime = this.videoPlayer.duration(),
+        youTubeId;
+
+    if (this.config.endTime) {
+        endTime = Math.min(this.config.endTime, endTime);
+    }
+
+    this.trigger(
+        'videoProgressSlider.updatePlayTime',
+        {
+            time: time,
+            duration: endTime
+        }
+    );
+
+    this.trigger(
+        'videoControl.updateVcrVidTime',
+        {
+            time: time,
+            duration: endTime
+        }
+    );
+
+    this.el.trigger('caption:update', [time]);
+}
+
+function isEnded() {
+    let playerState = this.videoPlayer.player.getPlayerState(),
+        ENDED = this.videoPlayer.PlayerState.ENDED;
+
+    return playerState === ENDED;
+}
+
+function isPlaying() {
+    let playerState = this.videoPlayer.player.getPlayerState();
+
+    return playerState === this.videoPlayer.PlayerState.PLAYING;
+}
+
+function isBuffering() {
+    let playerState = this.videoPlayer.player.getPlayerState();
+
+    return playerState === this.videoPlayer.PlayerState.BUFFERING;
+}
+
+function isCued() {
+    let playerState = this.videoPlayer.player.getPlayerState();
+
+    return playerState === this.videoPlayer.PlayerState.CUED;
+}
+
+function isUnstarted() {
+    let playerState = this.videoPlayer.player.getPlayerState();
+
+    return playerState === this.videoPlayer.PlayerState.UNSTARTED;
+}
+
+/*
+ * Return the duration of the video in seconds.
+ *
+ * First, try to use the native player API call to get the duration.
+ * If the value returned by the native function is not valid, resort to
+ * the value stored in the metadata for the video. Note that the metadata
+ * is available only for YouTube videos.
+ *
+ * IMPORTANT! It has been observed that sometimes, after initial playback
+ * of the video, when operations "pause" and "play" are performed (in that
+ * sequence), the function will start returning a slightly different value.
+ *
+ * For example: While playing for the first time, the function returns 31.
+ * After pausing the video and then resuming once more, the function will
+ * start returning 31.950656.
+ *
+ * This instability is internal to the player API (or browser internals).
+ */
+function duration() {
+    let dur;
+
+    // Sometimes the YouTube API doesn't finish instantiating all of it's
+    // methods, but the execution point arrives here.
+    //
+    // This happens when you have start-time and end-time set, and click "Edit"
+    // in Studio, and then "Save". The Video editor dialog closes, the
+    // video reloads, but the start-end range is not visible.
+    if (this.videoPlayer.player.getDuration) {
+        dur = this.videoPlayer.player.getDuration();
+    }
+
+    // For YouTube videos, before the video starts playing, the API
+    // function player.getDuration() will return 0. This means that the VCR
+    // will show total time as 0 when the page just loads (before the user
+    // clicks the Play button).
+    //
+    // We can do betterin a case when dur is 0 (or less than 0). We can ask
+    // the getDuration() function for total time, which will query the
+    // metadata for a duration.
+    //
+    // Be careful! Often the metadata duration is not very precise. It
+    // might differ by one or two seconds against the actual time as will
+    // be reported later on by the player.getDuration() API function.
+    if (!isFinite(dur) || dur <= 0) {
+        if (this.isYoutubeType()) {
+            dur = this.getDuration();
+        }
+    }
+
+    // Just in case the metadata is garbled, or something went wrong, we
+    // have a final check.
+    if (!isFinite(dur) || dur <= 0) {
+        dur = 0;
+    }
+
+    return Math.floor(dur);
+}
+
+function onVolumeChange(volume) {
+    this.videoPlayer.player.setVolume(volume);
+}
diff --git a/xblocks_contrib/video/static/js/src/04_video_control.js b/xblocks_contrib/video/static/js/src/04_video_control.js
new file mode 100644
index 00000000..d928aeb6
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/04_video_control.js
@@ -0,0 +1,164 @@
+'use strict';
+
+import * as Time from './utils/time.js';
+
+// VideoControl module.
+let VideoControl = function(state) {
+    let dfd = $.Deferred();
+
+    state.videoControl = {};
+
+    _makeFunctionsPublic(state);
+    _renderElements(state);
+    _bindHandlers(state);
+
+    dfd.resolve();
+    return dfd.promise();
+};
+
+// ***************************************************************
+// Private functions start here.
+// ***************************************************************
+
+// function _makeFunctionsPublic(state)
+//
+//     Functions which will be accessible via 'state' object. When called, these functions will
+//     get the 'state' object as a context.
+function _makeFunctionsPublic(state) {
+    let methodsDict = {
+        destroy: destroy,
+        hideControls: hideControls,
+        show: show,
+        showControls: showControls,
+        focusFirst: focusFirst,
+        updateVcrVidTime: updateVcrVidTime
+    };
+
+    state.bindTo(methodsDict, state.videoControl, state);
+}
+
+function destroy() {
+    this.el.off({
+        mousemove: this.videoControl.showControls,
+        keydown: this.videoControl.showControls,
+        destroy: this.videoControl.destroy,
+        initialize: this.videoControl.focusFirst
+    });
+
+    this.el.off('controls:show');
+    if (this.controlHideTimeout) {
+        clearTimeout(this.controlHideTimeout);
+    }
+    delete this.videoControl;
+}
+
+// function _renderElements(state)
+//
+//     Create any necessary DOM elements, attach them, and set their initial configuration. Also
+//     make the created DOM elements available via the 'state' object. Much easier to work this
+//     way - you don't have to do repeated jQuery element selects.
+function _renderElements(state) {
+    state.videoControl.el = state.el.find('.video-controls');
+    state.videoControl.vidTimeEl = state.videoControl.el.find('.vidtime');
+
+    if ((state.videoType === 'html5') && (state.config.autohideHtml5)) {
+        state.videoControl.fadeOutTimeout = state.config.fadeOutTimeout;
+
+        state.videoControl.el.addClass('html5');
+        state.controlHideTimeout = setTimeout(state.videoControl.hideControls, state.videoControl.fadeOutTimeout);
+    }
+}
+
+// function _bindHandlers(state)
+//
+//     Bind any necessary function callbacks to DOM events (click, mousemove, etc.).
+function _bindHandlers(state) {
+    if ((state.videoType === 'html5') && (state.config.autohideHtml5)) {
+        state.el.on({
+            mousemove: state.videoControl.showControls,
+            keydown: state.videoControl.showControls
+        });
+    }
+
+    if (state.config.focusFirstControl) {
+        state.el.on('initialize', state.videoControl.focusFirst);
+    }
+    state.el.on('destroy', state.videoControl.destroy);
+}
+
+// ***************************************************************
+// Public functions start here.
+// These are available via the 'state' object. Their context ('this' keyword) is the 'state' object.
+// The magic private function that makes them available and sets up their context is makeFunctionsPublic().
+// ***************************************************************
+
+function focusFirst() {
+    this.videoControl.el.find('.vcr a, .vcr button').first().focus();
+}
+
+function show() {
+    this.videoControl.el.removeClass('is-hidden');
+    this.el.trigger('controls:show', arguments);
+}
+
+function showControls(event) {
+    if (!this.controlShowLock) {
+        if (!this.captionsHidden) {
+            return;
+        }
+
+        this.controlShowLock = true;
+
+        if (this.controlState === 'invisible') {
+            this.videoControl.el.show();
+            this.controlState = 'visible';
+        } else if (this.controlState === 'hiding') {
+            this.videoControl.el.stop(true, false).css('opacity', 1).show();
+            this.controlState = 'visible';
+        } else if (this.controlState === 'visible') {
+            clearTimeout(this.controlHideTimeout);
+        }
+
+        this.controlHideTimeout = setTimeout(this.videoControl.hideControls, this.videoControl.fadeOutTimeout);
+        this.controlShowLock = false;
+    }
+}
+
+function hideControls() {
+    let _this = this;
+
+    this.controlHideTimeout = null;
+
+    if (!this.captionsHidden) {
+        return;
+    }
+
+    this.controlState = 'hiding';
+    this.videoControl.el.fadeOut(this.videoControl.fadeOutTimeout, function() {
+        _this.controlState = 'invisible';
+        // If the focus was on the video control or the volume control,
+        // then we must make sure to close these dialogs. Otherwise, after
+        // next autofocus, these dialogs will be open, but the focus will
+        // not be on them.
+        _this.videoVolumeControl.el.removeClass('open');
+        _this.videoSpeedControl.el.removeClass('open');
+
+        _this.focusGrabber.enableFocusGrabber();
+    });
+}
+
+function updateVcrVidTime(params) {
+    let endTime = (this.config.endTime !== null) ? this.config.endTime : params.duration,
+        startTime, currentTime;
+    // in case endTime is accidentally specified as being greater than the video
+    endTime = Math.min(endTime, params.duration);
+    startTime = this.config.startTime > 0 ? this.config.startTime : 0;
+    // if it's a subsection of video, use the clip duration as endTime
+    if (startTime && this.config.endTime) {
+        endTime = this.config.endTime - startTime;
+    }
+    currentTime = startTime ? params.time - startTime : params.time;
+    this.videoControl.vidTimeEl.text(Time.format(currentTime) + ' / ' + Time.format(endTime));
+}
+
+export default VideoControl;
diff --git a/xblocks_contrib/video/static/js/src/04_video_full_screen.js b/xblocks_contrib/video/static/js/src/04_video_full_screen.js
new file mode 100644
index 00000000..4dd3f85e
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/04_video_full_screen.js
@@ -0,0 +1,309 @@
+import HtmlUtils from 'edx-ui-toolkit/js/utils/html-utils';
+
+let template = [
+    '<button class="control add-fullscreen" aria-disabled="false" title="',
+    gettext('Fill browser'),
+    '" aria-label="',
+    gettext('Fill browser'),
+    '">',
+    '<span class="icon fa fa-arrows-alt" aria-hidden="true"></span>',
+    '</button>'
+].join('');
+
+// The following properties and functions enable cross-browser use of the
+// the Fullscreen Web API.
+//
+//     function getVendorPrefixed(property)
+//     function getFullscreenElement()
+//     function exitFullscreen()
+//     function requestFullscreen(element, options)
+//
+//     For more information about the Fullscreen Web API see MDN:
+//     https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
+let prefixedFullscreenProperties = (function() {
+    if ('fullscreenEnabled' in document) {
+        return {
+            fullscreenElement: 'fullscreenElement',
+            fullscreenEnabled: 'fullscreenEnabled',
+            requestFullscreen: 'requestFullscreen',
+            exitFullscreen: 'exitFullscreen',
+            fullscreenchange: 'fullscreenchange',
+            fullscreenerror: 'fullscreenerror'
+        };
+    }
+    if ('webkitFullscreenEnabled' in document) {
+        return {
+            fullscreenElement: 'webkitFullscreenElement',
+            fullscreenEnabled: 'webkitFullscreenEnabled',
+            requestFullscreen: 'webkitRequestFullscreen',
+            exitFullscreen: 'webkitExitFullscreen',
+            fullscreenchange: 'webkitfullscreenchange',
+            fullscreenerror: 'webkitfullscreenerror'
+        };
+    }
+    if ('mozFullScreenEnabled' in document) {
+        return {
+            fullscreenElement: 'mozFullScreenElement',
+            fullscreenEnabled: 'mozFullScreenEnabled',
+            requestFullscreen: 'mozRequestFullScreen',
+            exitFullscreen: 'mozCancelFullScreen',
+            fullscreenchange: 'mozfullscreenchange',
+            fullscreenerror: 'mozfullscreenerror'
+        };
+    }
+    if ('msFullscreenEnabled' in document) {
+        return {
+            fullscreenElement: 'msFullscreenElement',
+            fullscreenEnabled: 'msFullscreenEnabled',
+            requestFullscreen: 'msRequestFullscreen',
+            exitFullscreen: 'msExitFullscreen',
+            fullscreenchange: 'MSFullscreenChange',
+            fullscreenerror: 'MSFullscreenError'
+        };
+    }
+    return {};
+}());
+
+function getVendorPrefixed(property) {
+    return prefixedFullscreenProperties[property];
+}
+
+function getFullscreenElement() {
+    return document[getVendorPrefixed('fullscreenElement')];
+}
+
+function exitFullscreen() {
+    if (document[getVendorPrefixed('exitFullscreen')]) {
+        return document[getVendorPrefixed('exitFullscreen')]();
+    }
+    return null;
+}
+
+function requestFullscreen(element, options) {
+    if (element[getVendorPrefixed('requestFullscreen')]) {
+        return element[getVendorPrefixed('requestFullscreen')](options);
+    }
+    return null;
+}
+
+// ***************************************************************
+// Private functions start here.
+// ***************************************************************
+
+function destroy() {
+    $(document).off('keyup', this.videoFullScreen.exitHandler);
+    this.videoFullScreen.fullScreenEl.remove();
+    this.el.off({
+        destroy: this.videoFullScreen.destroy
+    });
+    document.removeEventListener(
+        getVendorPrefixed('fullscreenchange'),
+        this.videoFullScreen.handleFullscreenChange
+    );
+    if (this.isFullScreen) {
+        this.videoFullScreen.exit();
+    }
+    delete this.videoFullScreen;
+}
+
+// function renderElements(state)
+//
+//     Create any necessary DOM elements, attach them, and set their initial configuration. Also
+//     make the created DOM elements available via the 'state' object. Much easier to work this
+//     way - you don't have to do repeated jQuery element selects.
+function renderElements(state) {
+    /* eslint-disable no-param-reassign */
+    state.videoFullScreen.fullScreenEl = $(template);
+    state.videoFullScreen.sliderEl = state.el.find('.slider');
+    state.videoFullScreen.fullScreenState = false;
+    HtmlUtils.append(state.el.find('.secondary-controls'), HtmlUtils.HTML(state.videoFullScreen.fullScreenEl));
+    state.videoFullScreen.updateControlsHeight();
+    /* eslint-enable no-param-reassign */
+}
+
+// function bindHandlers(state)
+//
+//     Bind any necessary function callbacks to DOM events (click, mousemove, etc.).
+function bindHandlers(state) {
+    state.videoFullScreen.fullScreenEl.on('click', state.videoFullScreen.toggleHandler);
+    state.el.on({
+        destroy: state.videoFullScreen.destroy
+    });
+    $(document).on('keyup', state.videoFullScreen.exitHandler);
+    document.addEventListener(
+        getVendorPrefixed('fullscreenchange'),
+        state.videoFullScreen.handleFullscreenChange
+    );
+}
+
+function getControlsHeight(controls, slider) {
+    return controls.height() + 0.5 * slider.height();
+}
+
+// ***************************************************************
+// Public functions start here.
+// These are available via the 'state' object. Their context ('this' keyword) is the 'state' object.
+// The magic private function that makes them available and sets up their context is makeFunctionsPublic().
+// ***************************************************************
+
+function handleFullscreenChange() {
+    if (getFullscreenElement() !== this.el[0] && this.isFullScreen) {
+        // The video was fullscreen so this event must relate to this video
+        this.videoFullScreen.handleExit();
+    }
+}
+
+function updateControlsHeight() {
+    let controls = this.el.find('.video-controls');
+    let slider = this.videoFullScreen.sliderEl;
+    this.videoFullScreen.height = getControlsHeight(controls, slider);
+    return this.videoFullScreen.height;
+}
+
+function notifyParent(fullscreenOpen) {
+    if (window !== window.parent) {
+        // This is used by the Learning MFE to know about changing fullscreen mode.
+        // The MFE is then able to respond appropriately and scroll window to the previous position.
+        window.parent.postMessage({
+            type: 'plugin.videoFullScreen',
+            payload: {
+                open: fullscreenOpen
+            }
+        }, document.referrer
+        );
+    }
+}
+
+/**
+ * Event handler to toggle fullscreen mode.
+ * @param {jquery Event} event
+ */
+function toggleHandler(event) {
+    event.preventDefault();
+    this.videoCommands.execute('toggleFullScreen');
+}
+
+function handleExit() {
+    let fullScreenClassNameEl = this.el.add(document.documentElement);
+    let closedCaptionsEl = this.el.find('.closed-captions');
+
+    if (this.isFullScreen === false) {
+        return;
+    }
+
+    // eslint-disable-next-line no-multi-assign
+    this.videoFullScreen.fullScreenState = this.isFullScreen = false;
+    fullScreenClassNameEl.removeClass('video-fullscreen');
+    $(window).scrollTop(this.scrollPos);
+    this.videoFullScreen.fullScreenEl
+        .attr({title: gettext('Fill browser'), 'aria-label': gettext('Fill browser')})
+        .find('.icon')
+        .removeClass('fa-compress')
+        .addClass('fa-arrows-alt');
+
+    $(closedCaptionsEl).css({top: '70%', left: '5%'});
+    if (this.resizer) {
+        this.resizer.delta.reset().setMode('width');
+    }
+    this.el.trigger('fullscreen', [this.isFullScreen]);
+
+    this.videoFullScreen.notifyParent(false);
+}
+
+function handleEnter() {
+    let fullScreenClassNameEl = this.el.add(document.documentElement);
+    let closedCaptionsEl = this.el.find('.closed-captions');
+
+    if (this.isFullScreen === true) {
+        return;
+    }
+
+    this.videoFullScreen.notifyParent(true);
+
+    // eslint-disable-next-line no-multi-assign
+    this.videoFullScreen.fullScreenState = this.isFullScreen = true;
+    fullScreenClassNameEl.addClass('video-fullscreen');
+    this.videoFullScreen.fullScreenEl
+        .attr({title: gettext('Exit full browser'), 'aria-label': gettext('Exit full browser')})
+        .find('.icon')
+        .removeClass('fa-arrows-alt')
+        .addClass('fa-compress');
+
+    $(closedCaptionsEl).css({top: '70%', left: '5%'});
+    if (this.resizer) {
+        this.resizer.delta.substract(this.videoFullScreen.updateControlsHeight(), 'height').setMode('both');
+    }
+    this.el.trigger('fullscreen', [this.isFullScreen]);
+}
+
+function exit() {
+    if (getFullscreenElement() === this.el[0]) {
+        exitFullscreen();
+    } else {
+        // Else some other element is fullscreen or the fullscreen api does not exist.
+        this.videoFullScreen.handleExit();
+    }
+}
+
+function enter() {
+    this.scrollPos = $(window).scrollTop();
+    this.videoFullScreen.handleEnter();
+    requestFullscreen(this.el[0]);
+}
+
+/** Toggle fullscreen mode. */
+function toggle() {
+    if (this.videoFullScreen.fullScreenState) {
+        this.videoFullScreen.exit();
+    } else {
+        this.videoFullScreen.enter();
+    }
+}
+
+/**
+ * Event handler to exit from fullscreen mode.
+ * @param {jquery Event} event
+ */
+function exitHandler(event) {
+    if ((this.isFullScreen) && (event.keyCode === 27)) {
+        event.preventDefault();
+        this.videoCommands.execute('toggleFullScreen');
+    }
+}
+
+// function makeFunctionsPublic(state)
+//
+//     Functions which will be accessible via 'state' object. When called, these functions will
+//     get the 'state' object as a context.
+function makeFunctionsPublic(state) {
+    let methodsDict = {
+        destroy: destroy,
+        enter: enter,
+        exit: exit,
+        exitHandler: exitHandler,
+        handleExit: handleExit,
+        handleEnter: handleEnter,
+        handleFullscreenChange: handleFullscreenChange,
+        toggle: toggle,
+        toggleHandler: toggleHandler,
+        updateControlsHeight: updateControlsHeight,
+        notifyParent: notifyParent
+    };
+
+    state.bindTo(methodsDict, state.videoFullScreen, state);
+}
+
+// VideoControl() function - what this module "exports".
+export default function(state) {
+    let dfd = $.Deferred();
+
+    // eslint-disable-next-line no-param-reassign
+    state.videoFullScreen = {};
+
+    makeFunctionsPublic(state);
+    renderElements(state);
+    bindHandlers(state);
+
+    dfd.resolve();
+    return dfd.promise();
+}
diff --git a/xblocks_contrib/video/static/js/src/05_video_quality_control.js b/xblocks_contrib/video/static/js/src/05_video_quality_control.js
new file mode 100644
index 00000000..1d2c6b16
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/05_video_quality_control.js
@@ -0,0 +1,176 @@
+'use strict';
+
+import HtmlUtils from 'edx-ui-toolkit/js/utils/html-utils';
+import _ from 'underscore';
+
+
+let template = HtmlUtils.interpolateHtml(
+    HtmlUtils.HTML([
+        '<button class="control quality-control is-hidden" aria-disabled="false" title="',
+        '{highDefinition}',
+        '">',
+        '<span class="icon icon-hd" aria-hidden="true">HD</span>',
+        '<span class="sr text-translation">',
+        '{highDefinition}',
+        '</span>&nbsp;',
+        '<span class="sr control-text">',
+        '{off}',
+        '</span>',
+        '</button>'
+    ].join('')),
+    {
+        highDefinition: gettext('High Definition'),
+        off: gettext('off')
+    }
+);
+
+// VideoQualityControl() function - what this module "exports".
+let VideoQualityControl = function(state) {
+    let dfd = $.Deferred();
+
+    // Changing quality for now only works for YouTube videos.
+    if (state.videoType !== 'youtube') {
+        return;
+    }
+
+    state.videoQualityControl = {};
+
+    _makeFunctionsPublic(state);
+    _renderElements(state);
+    _bindHandlers(state);
+
+    dfd.resolve();
+    return dfd.promise();
+};
+
+// ***************************************************************
+// Private functions start here.
+// ***************************************************************
+
+// function _makeFunctionsPublic(state)
+//
+//     Functions which will be accessible via 'state' object. When called, these functions will
+//     get the 'state' object as a context.
+function _makeFunctionsPublic(state) {
+    let methodsDict = {
+        destroy: destroy,
+        fetchAvailableQualities: fetchAvailableQualities,
+        onQualityChange: onQualityChange,
+        showQualityControl: showQualityControl,
+        toggleQuality: toggleQuality
+    };
+
+    state.bindTo(methodsDict, state.videoQualityControl, state);
+}
+
+function destroy() {
+    this.videoQualityControl.el.off({
+        click: this.videoQualityControl.toggleQuality,
+        destroy: this.videoQualityControl.destroy
+    });
+    this.el.off('.quality');
+    this.videoQualityControl.el.remove();
+    delete this.videoQualityControl;
+}
+
+// function _renderElements(state)
+//
+//     Create any necessary DOM elements, attach them, and set their initial configuration. Also
+//     make the created DOM elements available via the 'state' object. Much easier to work this
+//     way - you don't have to do repeated jQuery element selects.
+function _renderElements(state) {
+    // eslint-disable-next-line no-multi-assign
+    let element = state.videoQualityControl.el = $(template.toString());
+    state.videoQualityControl.quality = 'large';
+    HtmlUtils.append(state.el.find('.secondary-controls'), HtmlUtils.HTML(element));
+}
+
+// function _bindHandlers(state)
+//
+//     Bind any necessary function callbacks to DOM events (click, mousemove, etc.).
+function _bindHandlers(state) {
+    state.videoQualityControl.el.on('click',
+        state.videoQualityControl.toggleQuality
+    );
+    state.el.on('play.quality', _.once(
+        state.videoQualityControl.fetchAvailableQualities
+    ));
+
+    state.el.on('destroy.quality', state.videoQualityControl.destroy);
+}
+
+// ***************************************************************
+// Public functions start here.
+// These are available via the 'state' object. Their context ('this' keyword) is the 'state' object.
+// The magic private function that makes them available and sets up their context is makeFunctionsPublic().
+// ***************************************************************
+
+/*
+ * @desc Shows quality control. This function will only be called if HD
+ *       qualities are available.
+ *
+ * @public
+ */
+function showQualityControl() {
+    this.videoQualityControl.el.removeClass('is-hidden');
+}
+
+// This function can only be called once as _.once has been used.
+/*
+ * @desc Get the available qualities from YouTube API. Possible values are:
+         ['highres', 'hd1080', 'hd720', 'large', 'medium', 'small'].
+         HD are: ['highres', 'hd1080', 'hd720'].
+ *
+ * @public
+ */
+function fetchAvailableQualities() {
+    let qualities = this.videoPlayer.player.getAvailableQualityLevels();
+
+    this.config.availableHDQualities = _.intersection(
+        qualities, ['highres', 'hd1080', 'hd720']
+    );
+
+    // HD qualities are available, show video quality control.
+    if (this.config.availableHDQualities.length > 0) {
+        this.trigger('videoQualityControl.showQualityControl');
+        this.trigger('videoQualityControl.onQualityChange', this.videoQualityControl.quality);
+    }
+    // On initialization, force the video quality to be 'large' instead of
+    // 'default'. Otherwise, the player will sometimes switch to HD
+    // automatically, for example when the iframe resizes itself.
+    this.trigger('videoPlayer.handlePlaybackQualityChange',
+        this.videoQualityControl.quality
+    );
+}
+
+function onQualityChange(value) {
+    let controlStateStr;
+    this.videoQualityControl.quality = value;
+    if (_.contains(this.config.availableHDQualities, value)) {
+        controlStateStr = gettext('on');
+        this.videoQualityControl.el
+            .addClass('active')
+            .find('.control-text')
+            .text(controlStateStr);
+    } else {
+        controlStateStr = gettext('off');
+        this.videoQualityControl.el
+            .removeClass('active')
+            .find('.control-text')
+            .text(controlStateStr);
+    }
+}
+
+// This function toggles the quality of video only if HD qualities are
+// available.
+function toggleQuality(event) {
+    let value = this.videoQualityControl.quality;
+    let isHD = _.contains(this.config.availableHDQualities, value);
+    let newQuality = isHD ? 'large' : 'highres';
+
+    event.preventDefault();
+
+    this.trigger('videoPlayer.handlePlaybackQualityChange', newQuality);
+}
+
+export default VideoQualityControl;
diff --git a/xblocks_contrib/video/static/js/src/06_video_progress_slider.js b/xblocks_contrib/video/static/js/src/06_video_progress_slider.js
new file mode 100644
index 00000000..93375084
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/06_video_progress_slider.js
@@ -0,0 +1,360 @@
+/*
+"This is as true in everyday life as it is in battle: we are given one life
+and the decision is ours whether to wait for circumstances to make up our
+mind, or whether to act, and in acting, to live."
+— Omar N. Bradley
+ */
+
+// VideoProgressSlider module.
+let template = [
+    '<div class="slider" role="application" title="',
+    gettext('Video position. Press space to toggle playback'),
+    '"></div>'
+].join('');
+
+// VideoProgressSlider() function - what this module "exports".
+export default function(state) {
+    let dfd = $.Deferred();
+
+    state.videoProgressSlider = {};
+    _makeFunctionsPublic(state);
+    _renderElements(state);
+
+    dfd.resolve();
+    return dfd.promise();
+}
+
+// ***************************************************************
+// Private functions start here.
+// ***************************************************************
+
+// function _makeFunctionsPublic(state)
+//
+//     Functions which will be accessible via 'state' object. When called,
+//     these functions will get the 'state' object as a context.
+
+/* eslint-disable no-use-before-define */
+function _makeFunctionsPublic(state) {
+    let methodsDict = {
+        destroy: destroy,
+        buildSlider: buildSlider,
+        getRangeParams: getRangeParams,
+        onSlide: onSlide,
+        onStop: onStop,
+        updatePlayTime: updatePlayTime,
+        updateStartEndTimeRegion: updateStartEndTimeRegion,
+        notifyThroughHandleEnd: notifyThroughHandleEnd,
+        getTimeDescription: getTimeDescription,
+        focusSlider: focusSlider
+    };
+
+    state.bindTo(methodsDict, state.videoProgressSlider, state);
+}
+
+function destroy() {
+    this.videoProgressSlider.el.removeAttr('tabindex').slider('destroy');
+    this.el.off('destroy', this.videoProgressSlider.destroy);
+    delete this.videoProgressSlider;
+}
+
+function bindHandlers(state) {
+    state.videoProgressSlider.el.on('keypress', sliderToggle.bind(state));
+    state.el.on('destroy', state.videoProgressSlider.destroy);
+}
+/* eslint-enable no-use-before-define */
+
+// function _renderElements(state)
+//
+//     Create any necessary DOM elements, attach them, and set their
+//     initial configuration. Also make the created DOM elements available
+//     via the 'state' object. Much easier to work this way - you don't
+//     have to do repeated jQuery element selects.
+function _renderElements(state) {
+    state.videoProgressSlider.el = $(template);
+
+    state.el.find('.video-controls').prepend(state.videoProgressSlider.el);
+    state.videoProgressSlider.buildSlider();
+    _buildHandle(state);
+    bindHandlers(state);
+}
+
+function _buildHandle(state) {
+    state.videoProgressSlider.handle = state.videoProgressSlider.el
+        .find('.ui-slider-handle');
+
+    // ARIA
+    // We just want the knob to be selectable with keyboard
+    state.videoProgressSlider.el.attr({
+        tabindex: -1
+    });
+
+    // Let screen readers know that this div, representing the slider
+    // handle, behaves as a slider named 'video position'.
+    state.videoProgressSlider.handle.attr({
+        role: 'slider',
+        'aria-disabled': false,
+        'aria-valuetext': getTimeDescription(state.videoProgressSlider
+            .slider.slider('option', 'value')),
+        'aria-valuemax': state.videoPlayer.duration(),
+        'aria-valuemin': '0',
+        'aria-valuenow': state.videoPlayer.currentTime,
+        tabindex: '0',
+        'aria-label': gettext('Video position. Press space to toggle playback')
+    });
+}
+
+// ***************************************************************
+// Public functions start here.
+// These are available via the 'state' object. Their context ('this'
+// keyword) is the 'state' object. The magic private function that makes
+// them available and sets up their context is makeFunctionsPublic().
+// ***************************************************************
+
+function buildSlider() {
+    let sliderContents = edx.HtmlUtils.joinHtml(
+        edx.HtmlUtils.HTML('<div class="ui-slider-handle progress-handle"></div>')
+    );
+
+    // xss-lint: disable=javascript-jquery-append
+    this.videoProgressSlider.el.append(sliderContents.text);
+
+    this.videoProgressSlider.slider = this.videoProgressSlider.el
+        .slider({
+            range: 'min',
+            min: this.config.startTime,
+            max: this.config.endTime,
+            slide: this.videoProgressSlider.onSlide,
+            stop: this.videoProgressSlider.onStop,
+            step: 5
+        });
+
+    this.videoProgressSlider.sliderProgress = this.videoProgressSlider
+        .slider
+        .find('.ui-slider-range.ui-widget-header.ui-slider-range-min');
+}
+
+// Rebuild the slider start-end range (if it doesn't take up the
+// whole slider). Remember that endTime === null means the end-time
+// is set to the end of video by default.
+function updateStartEndTimeRegion(params) {
+    let start, end, duration, rangeParams;
+
+    // We must have a duration in order to determine the area of range.
+    // It also must be non-zero.
+    if (!params.duration) {
+        return;
+    } else {
+        duration = params.duration;
+    }
+
+    start = this.config.startTime;
+    end = this.config.endTime;
+
+    if (start > duration) {
+        start = 0;
+    } else if (this.isFlashMode()) {
+        start /= Number(this.speed);
+    }
+
+    // If end is set to null, or it is greater than the duration of the
+    // video, then we set it to the end of the video.
+    if (end === null || end > duration) {
+        end = duration;
+    } else if (this.isFlashMode()) {
+        end /= Number(this.speed);
+    }
+
+    // Don't build a range if it takes up the whole slider.
+    if (start === 0 && end === duration) {
+        return;
+    }
+
+    // Because JavaScript has weird rounding rules when a series of
+    // mathematical operations are performed in a single statement, we will
+    // split everything up into smaller statements.
+    //
+    // This will ensure that visually, the start-end range aligns nicely
+    // with actual starting and ending point of the video.
+
+    rangeParams = getRangeParams(start, end, duration);
+}
+
+function getRangeParams(startTime, endTime, duration) {
+    let step = 100 / duration;
+    let left = startTime * step;
+    let width = endTime * step - left;
+
+    return {
+        left: left + '%',
+        width: width + '%'
+    };
+}
+
+function onSlide(event, ui) {
+    let time = ui.value;
+    let endTime = this.videoPlayer.duration();
+
+    if (this.config.endTime) {
+        endTime = Math.min(this.config.endTime, endTime);
+    }
+
+    this.videoProgressSlider.frozen = true;
+
+    // Remember the seek to value so that we don't repeat ourselves on the
+    // 'stop' slider event.
+    this.videoProgressSlider.lastSeekValue = time;
+
+    this.trigger(
+        'videoControl.updateVcrVidTime',
+        {
+            time: time,
+            duration: endTime
+        }
+    );
+
+    this.trigger(
+        'videoPlayer.onSlideSeek',
+        {type: 'onSlideSeek', time: time}
+    );
+
+    // ARIA
+    this.videoProgressSlider.handle.attr(
+        'aria-valuetext', getTimeDescription(this.videoPlayer.currentTime)
+    );
+}
+
+function onStop(event, ui) {
+    let _this = this;
+
+    this.videoProgressSlider.frozen = true;
+
+    // Only perform a seek if we haven't made a seek for the new slider value.
+    // This is necessary so that if the user only clicks on the slider, without
+    // dragging it, then only one seek is made, even when a 'slide' and a 'stop'
+    // events are triggered on the slider.
+    if (this.videoProgressSlider.lastSeekValue !== ui.value) {
+        this.trigger(
+            'videoPlayer.onSlideSeek',
+            {type: 'onSlideSeek', time: ui.value}
+        );
+    }
+
+    // ARIA
+    this.videoProgressSlider.handle.attr(
+        'aria-valuetext', getTimeDescription(this.videoPlayer.currentTime)
+    );
+
+    setTimeout(function() {
+        _this.videoProgressSlider.frozen = false;
+    }, 200);
+}
+
+function updatePlayTime(params) {
+    let time = Math.floor(params.time);
+    // params.duration could accidentally be construed as a floating
+    // point double. Since we're displaying this number, round down
+    // to nearest second
+    let endTime = Math.floor(params.duration);
+
+    if (this.config.endTime !== null) {
+        endTime = Math.min(this.config.endTime, endTime);
+    }
+
+    if (
+        this.videoProgressSlider.slider
+        && !this.videoProgressSlider.frozen
+    ) {
+        this.videoProgressSlider.slider
+            .slider('option', 'max', endTime)
+            .slider('option', 'value', time);
+    }
+
+    // Update aria values.
+    this.videoProgressSlider.handle.attr({
+        'aria-valuemax': endTime,
+        'aria-valuenow': time
+    });
+}
+
+// When the video stops playing (either because the end was reached, or
+// because endTime was reached), the screen reader must be notified that
+// the video is no longer playing. We do this by a little trick. Setting
+// the title attribute of the slider know to "video ended", and focusing
+// on it. The screen reader will read the attr text.
+//
+// The user can then tab their way forward, landing on the next control
+// element, the Play button.
+//
+// @param params  -  object with property `end`. If set to true, the
+//                   function must set the title attribute to
+//                   `video ended`;
+//                   if set to false, the function must reset the attr to
+//                   it's original state.
+//
+// This function will be triggered from VideoPlayer methods onEnded(),
+// onPlay(), and update() (update method handles endTime).
+function notifyThroughHandleEnd(params) {
+    if (params.end) {
+        this.videoProgressSlider.handle
+            .attr('title', gettext('Video ended'))
+            .focus();
+    } else {
+        this.videoProgressSlider.handle
+            .attr('title', gettext('Video position'));
+    }
+}
+
+// Returns a string describing the current time of video in
+// `%d hours %d minutes %d seconds` format.
+function getTimeDescription(time) {
+    let seconds = Math.floor(time);
+    let minutes = Math.floor(seconds / 60);
+    let hours = Math.floor(minutes / 60);
+    let i18n = function(value, word) {
+        let msg;
+
+        // eslint-disable-next-line default-case
+        switch (word) {
+        case 'hour':
+            msg = ngettext('%(value)s hour', '%(value)s hours', value);
+            break;
+        case 'minute':
+            msg = ngettext('%(value)s minute', '%(value)s minutes', value);
+            break;
+        case 'second':
+            msg = ngettext('%(value)s second', '%(value)s seconds', value);
+            break;
+        }
+        return interpolate(msg, {value: value}, true);
+    };
+
+    seconds %= 60;
+    minutes %= 60;
+
+    if (hours) {
+        return i18n(hours, 'hour') + ' '
+        + i18n(minutes, 'minute') + ' '
+        + i18n(seconds, 'second');
+    } else if (minutes) {
+        return i18n(minutes, 'minute') + ' '
+        + i18n(seconds, 'second');
+    }
+
+    return i18n(seconds, 'second');
+}
+
+// Shift focus to the progress slider container element.
+function focusSlider() {
+    this.videoProgressSlider.handle.attr(
+        'aria-valuetext', getTimeDescription(this.videoPlayer.currentTime)
+    );
+    this.videoProgressSlider.el.trigger('focus');
+}
+
+// Toggle video playback when the spacebar is pushed.
+function sliderToggle(e) {
+    if (e.which === 32) {
+        e.preventDefault();
+        this.videoCommands.execute('togglePlayback');
+    }
+}
diff --git a/xblocks_contrib/video/static/js/src/07_video_volume_control.js b/xblocks_contrib/video/static/js/src/07_video_volume_control.js
new file mode 100644
index 00000000..68924d15
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/07_video_volume_control.js
@@ -0,0 +1,554 @@
+'use strict';
+
+import HtmlUtils from 'edx-ui-toolkit/js/utils/html-utils';
+
+/**
+ * Video volume control module.
+ * @exports video/07_video_volume_control.js
+ * @constructor
+ * @param {Object} state The object containing the state of the video
+ * @param {Object} i18n The object containing strings with translations.
+ * @return {jquery Promise}
+ */
+let VideoVolumeControl = function (state, i18n) {
+    if (!(this instanceof VideoVolumeControl)) {
+        return new VideoVolumeControl(state, i18n);
+    }
+
+    _.bindAll(this, 'keyDownHandler', 'updateVolumeSilently',
+        'onVolumeChangeHandler', 'openMenu', 'closeMenu',
+        'toggleMuteHandler', 'keyDownButtonHandler', 'destroy'
+    );
+    this.state = state;
+    this.state.videoVolumeControl = this;
+    this.i18n = i18n;
+    this.initialize();
+
+    return $.Deferred().resolve().promise();
+};
+
+
+VideoVolumeControl.prototype = {
+    /** Minimum value for the volume slider. */
+    min: 0,
+    /** Maximum value for the volume slider. */
+    max: 100,
+    /** Step to increase/decrease volume level via keyboard. */
+    step: 20,
+
+    videoVolumeControlHtml: HtmlUtils.interpolateHtml(
+        HtmlUtils.HTML([
+            '<div class="volume" role="application">',
+            '<p class="sr instructions">',
+            '{volumeInstructions}',
+            '</p>',
+            '<button class="control" aria-disabled="false"',
+            '" aria-expanded="false" title="',
+            '{adjustVideoVolume}',
+            '" aria-label="',
+            '{adjustVideoVolume}',
+            '">',
+            '<span class="icon fa fa-volume-up" aria-hidden="true"></span>',
+            '</button>',
+            '<div class="volume-slider-container" aria-hidden="true" title="',
+            '{adjustVideoVolume}',
+            '">',
+            '<div class="volume-slider" ',
+            'role="slider"',
+            'aria-orientation="vertical" ',
+            'aria-valuemin="0" ',
+            'aria-valuemax="100" ',
+            'aria-valuenow="" ',
+            'aria-label="',
+            '{volumeText}',
+            '"></div>',
+            '</div>',
+            '</div>'].join('')),
+        {
+            volumeInstructions: gettext('Click on this button to mute or unmute this video or press UP or DOWN buttons to increase or decrease volume level.'), // eslint-disable-line max-len
+            adjustVideoVolume: gettext('Adjust video volume'),
+            volumeText: gettext('Volume')
+        }
+    ),
+
+    destroy: function () {
+        this.volumeSlider.slider('destroy');
+        this.state.el.find('iframe').removeAttr('tabindex');
+        this.a11y.destroy();
+        // eslint-disable-next-line no-multi-assign
+        this.cookie = this.a11y = null;
+        this.closeMenu();
+
+        this.state.el
+            .off('play.volume')
+            .off({
+                keydown: this.keyDownHandler,
+                volumechange: this.onVolumeChangeHandler
+            });
+        this.el.off({
+            mouseenter: this.openMenu,
+            mouseleave: this.closeMenu
+        });
+        this.button.off({
+            mousedown: this.toggleMuteHandler,
+            keydown: this.keyDownButtonHandler,
+            focus: this.openMenu,
+            blur: this.closeMenu
+        });
+        this.el.remove();
+        delete this.state.videoVolumeControl;
+    },
+
+    /** Initializes the module. */
+    initialize: function () {
+        let volume;
+
+        if (this.state.isTouch) {
+            // iOS doesn't support volume change
+            return false;
+        }
+
+        this.el = $(this.videoVolumeControlHtml.toString());
+        // Youtube iframe react on key buttons and has his own handlers.
+        // So, we disallow focusing on iframe.
+        this.state.el.find('iframe').attr('tabindex', -1);
+        this.button = this.el.children('.control');
+        this.cookie = new CookieManager(this.min, this.max);
+        this.a11y = new Accessibility(
+            this.button, this.min, this.max, this.i18n
+        );
+        volume = this.cookie.getVolume();
+        this.storedVolume = this.max;
+
+        this.render();
+        this.bindHandlers();
+        this.setVolume(volume, true, false);
+        this.checkMuteButtonStatus(volume);
+    },
+
+    /**
+     * Creates any necessary DOM elements, attach them, and set their,
+     * initial configuration.
+     */
+    render: function () {
+        let container = this.el.find('.volume-slider'),
+            instructionsId = 'volume-instructions-' + this.state.id;
+
+        HtmlUtils.append(container, HtmlUtils.HTML('<div class="ui-slider-handle volume-handle"></div>'));
+
+        this.volumeSlider = container.slider({
+            orientation: 'vertical',
+            range: 'min',
+            min: this.min,
+            max: this.max,
+            slide: this.onSlideHandler.bind(this)
+        });
+
+        // We provide an independent behavior to adjust volume level.
+        // Therefore, we do not need redundant focusing on slider in TAB
+        // order.
+        container.find('.volume-handle').attr('tabindex', -1);
+        this.state.el.find('.secondary-controls').append(this.el);
+
+        // set dynamic id for instruction element to avoid collisions
+        this.el.find('.instructions').attr('id', instructionsId);
+        this.button.attr('aria-describedby', instructionsId);
+    },
+
+    /** Bind any necessary function callbacks to DOM events. */
+    bindHandlers: function () {
+        this.state.el.on({
+            'play.volume': _.once(this.updateVolumeSilently),
+            volumechange: this.onVolumeChangeHandler
+        });
+        this.state.el.find('.volume').on({
+            mouseenter: this.openMenu,
+            mouseleave: this.closeMenu
+        });
+        this.button.on({
+            keydown: this.keyDownHandler,
+            click: false,
+            mousedown: this.toggleMuteHandler,
+            focus: this.openMenu,
+            blur: this.closeMenu
+        });
+        this.state.el.on('destroy', this.destroy);
+    },
+
+    /**
+     * Updates volume level without updating view and triggering
+     * `volumechange` event.
+     */
+    updateVolumeSilently: function () {
+        this.state.el.trigger(
+            'volumechange:silent', [this.getVolume()]
+        );
+    },
+
+    /**
+     * Returns current volume level.
+     * @return {Number}
+     */
+    getVolume: function () {
+        return this.volume;
+    },
+
+    /**
+     * Sets current volume level.
+     * @param {Number} volume Suggested volume level
+     * @param {Boolean} [silent] Sets the new volume level without
+     * triggering `volumechange` event and updating the cookie.
+     * @param {Boolean} [withoutSlider] Disables updating the slider.
+     */
+    setVolume: function (volume, silent, withoutSlider) {
+        if (volume === this.getVolume()) {
+            return false;
+        }
+
+        this.volume = volume;
+        this.a11y.update(this.getVolume());
+
+        if (!withoutSlider) {
+            this.updateSliderView(this.getVolume());
+        }
+
+        if (!silent) {
+            this.cookie.setVolume(this.getVolume());
+            this.state.el.trigger('volumechange', [this.getVolume()]);
+        }
+    },
+
+    /** Increases current volume level using previously defined step. */
+    increaseVolume: function () {
+        let volume = Math.min(this.getVolume() + this.step, this.max);
+
+        this.setVolume(volume, false, false);
+        this.el.find('.volume-slider')
+            .attr('aria-valuenow', volume);
+    },
+
+    /** Decreases current volume level using previously defined step. */
+    decreaseVolume: function () {
+        let volume = Math.max(this.getVolume() - this.step, this.min);
+
+        this.setVolume(volume, false, false);
+        this.el.find('.volume-slider')
+            .attr('aria-valuenow', volume);
+    },
+
+    /** Updates volume slider view. */
+    updateSliderView: function (volume) {
+        this.volumeSlider.slider('value', volume);
+        this.el.find('.volume-slider')
+            .attr('aria-valuenow', volume);
+    },
+
+    /**
+     * Mutes or unmutes volume.
+     * @param {Number} muteStatus Flag to mute/unmute volume.
+     */
+    mute: function (muteStatus) {
+        let volume;
+
+        this.updateMuteButtonView(muteStatus);
+
+        if (muteStatus) {
+            this.storedVolume = this.getVolume() || this.max;
+        }
+
+        volume = muteStatus ? 0 : this.storedVolume;
+        this.setVolume(volume, false, false);
+        this.el.find('.volume-slider')
+            .attr('aria-valuenow', volume);
+    },
+
+    /**
+     * Returns current volume state (is it muted or not?).
+     * @return {Boolean}
+     */
+    getMuteStatus: function () {
+        return this.getVolume() === 0;
+    },
+
+    /**
+     * Updates the volume button view.
+     * @param {Boolean} isMuted Flag to use muted or unmuted view.
+     */
+    updateMuteButtonView: function (isMuted) {
+        let action = isMuted ? 'addClass' : 'removeClass';
+
+        this.el[action]('is-muted');
+
+        if (isMuted) {
+            this.el
+                .find('.control .icon')
+                .removeClass('fa-volume-up')
+                .addClass('fa-volume-off');
+        } else {
+            this.el
+                .find('.control .icon')
+                .removeClass('fa-volume-off')
+                .addClass('fa-volume-up');
+        }
+    },
+
+    /** Toggles the state of the volume button. */
+    toggleMute: function () {
+        this.mute(!this.getMuteStatus());
+    },
+
+    /**
+     * Checks and updates the state of the volume button relatively to
+     * volume level.
+     * @param {Number} volume Volume level.
+     */
+    checkMuteButtonStatus: function (volume) {
+        if (volume <= this.min) {
+            this.updateMuteButtonView(true);
+            this.state.el.off('volumechange.is-muted');
+            this.state.el.on('volumechange.is-muted', _.once(function () {
+                this.updateMuteButtonView(false);
+            }.bind(this)));
+        }
+    },
+
+    /** Opens volume menu. */
+    openMenu: function () {
+        this.el.addClass('is-opened');
+        this.button.attr('aria-expanded', 'true');
+    },
+
+    /** Closes speed menu. */
+    closeMenu: function () {
+        this.el.removeClass('is-opened');
+        this.button.attr('aria-expanded', 'false');
+    },
+
+    /**
+     * Keydown event handler for the video container.
+     * @param {jquery Event} event
+     */
+    keyDownHandler: function (event) {
+        // ALT key is used to change (alternate) the function of
+        // other pressed keys. In this case, do nothing.
+        if (event.altKey) {
+            return true;
+        }
+
+        if ($(event.target).hasClass('ui-slider-handle')) {
+            return true;
+        }
+
+        let KEY = $.ui.keyCode,
+            keyCode = event.keyCode;
+
+        // eslint-disable-next-line default-case
+        switch (keyCode) {
+            case KEY.UP:
+                // Shift + Arrows keyboard shortcut might be used by
+                // screen readers. In this case, do nothing.
+                if (event.shiftKey) {
+                    return true;
+                }
+
+                this.increaseVolume();
+                return false;
+            case KEY.DOWN:
+                // Shift + Arrows keyboard shortcut might be used by
+                // screen readers. In this case, do nothing.
+                if (event.shiftKey) {
+                    return true;
+                }
+
+                this.decreaseVolume();
+                return false;
+
+            case KEY.SPACE:
+            case KEY.ENTER:
+                // Shift + Enter keyboard shortcut might be used by
+                // screen readers. In this case, do nothing.
+                if (event.shiftKey) {
+                    return true;
+                }
+
+                this.toggleMute();
+                return false;
+        }
+
+        return true;
+    },
+
+    /**
+     * Keydown event handler for the volume button.
+     * @param {jquery Event} event
+     */
+    keyDownButtonHandler: function (event) {
+        // ALT key is used to change (alternate) the function of
+        // other pressed keys. In this case, do nothing.
+        if (event.altKey) {
+            return true;
+        }
+
+        let KEY = $.ui.keyCode,
+            keyCode = event.keyCode;
+
+        // eslint-disable-next-line default-case
+        switch (keyCode) {
+            case KEY.ENTER:
+            case KEY.SPACE:
+                this.toggleMute();
+                return false;
+        }
+
+        return true;
+    },
+
+    /**
+     * onSlide callback for the video slider.
+     * @param {jquery Event} event
+     * @param {jqueryuiSlider ui} ui
+     */
+    onSlideHandler: function (event, ui) {
+        this.setVolume(ui.value, false, true);
+        this.el.find('.volume-slider')
+            .attr('aria-valuenow', ui.volume);
+    },
+
+    /**
+     * Mousedown event handler for the volume button.
+     * @param {jquery Event} event
+     */
+    toggleMuteHandler: function (event) {
+        this.toggleMute();
+        event.preventDefault();
+    },
+
+    /**
+     * Volumechange event handler.
+     * @param {jquery Event} event
+     * @param {Number} volume Volume level.
+     */
+    onVolumeChangeHandler: function (event, volume) {
+        this.checkMuteButtonStatus(volume);
+    }
+};
+
+
+/**
+ * Module responsible for the accessibility of volume controls.
+ * @constructor
+ * @private
+ * @param {jquery $} button The volume button.
+ * @param {Number} min Minimum value for the volume slider.
+ * @param {Number} max Maximum value for the volume slider.
+ * @param {Object} i18n The object containing strings with translations.
+ */
+let Accessibility = function(button, min, max, i18n) {
+    this.min = min;
+    this.max = max;
+    this.button = button;
+    this.i18n = i18n;
+
+    this.initialize();
+};
+
+
+Accessibility.prototype = {
+    destroy: function () {
+        this.liveRegion.remove();
+    },
+
+    /** Initializes the module. */
+    initialize: function () {
+        this.liveRegion = $('<div />', {
+            class: 'sr video-live-region',
+            'aria-hidden': 'false',
+            'aria-live': 'polite'
+        });
+
+        this.button.after(HtmlUtils.HTML(this.liveRegion).toString());
+    },
+
+    /**
+     * Updates text of the live region.
+     * @param {Number} volume Volume level.
+     */
+    update: function (volume) {
+        this.liveRegion.text([
+            this.getVolumeDescription(volume),
+            this.i18n.Volume + '.'
+        ].join(' '));
+
+        $(this.button).parent().find('.volume-slider')
+            .attr('aria-valuenow', volume);
+    },
+
+    /**
+     * Returns a string describing the level of volume.
+     * @param {Number} volume Volume level.
+     */
+    getVolumeDescription: function (volume) {
+        if (volume === 0) {
+            return this.i18n.Muted;
+        } else if (volume <= 20) {
+            return this.i18n['Very low'];
+        } else if (volume <= 40) {
+            return this.i18n.Low;
+        } else if (volume <= 60) {
+            return this.i18n.Average;
+        } else if (volume <= 80) {
+            return this.i18n.Loud;
+        } else if (volume <= 99) {
+            return this.i18n['Very loud'];
+        }
+
+        return this.i18n.Maximum;
+    }
+};
+
+
+/**
+ * Module responsible for the work with volume cookie.
+ * @constructor
+ * @private
+ * @param {Number} min Minimum value for the volume slider.
+ * @param {Number} max Maximum value for the volume slider.
+ */
+let CookieManager = function (min, max) {
+    this.min = min;
+    this.max = max;
+    this.cookieName = 'video_player_volume_level';
+};
+
+
+CookieManager.prototype = {
+    /**
+     * Returns volume level from the cookie.
+     * @return {Number} Volume level.
+     */
+    getVolume: function () {
+        let volume = parseInt($.cookie(this.cookieName), 10);
+
+        if (_.isFinite(volume)) {
+            volume = Math.max(volume, this.min);
+            volume = Math.min(volume, this.max);
+        } else {
+            volume = this.max;
+        }
+
+        return volume;
+    },
+
+    /**
+     * Updates volume cookie.
+     * @param {Number} volume Volume level.
+     */
+    setVolume: function (value) {
+        $.cookie(this.cookieName, value, {
+            expires: 3650,
+            path: '/'
+        });
+    }
+};
+
+export default VideoVolumeControl;
diff --git a/xblocks_contrib/video/static/js/src/08_video_auto_advance_control.js b/xblocks_contrib/video/static/js/src/08_video_auto_advance_control.js
new file mode 100644
index 00000000..7d350ee2
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/08_video_auto_advance_control.js
@@ -0,0 +1,134 @@
+'use strict';
+
+import HtmlUtils from 'edx-ui-toolkit/js/utils/html-utils';
+import _ from 'underscore';
+
+
+/**
+ * Auto advance control module.
+ * @exports video/08_video_auto_advance_control.js
+ * @constructor
+ * @param {object} state The object containing the state of the video player.
+ * @return {jquery Promise}
+ */
+let AutoAdvanceControl = function(state) {
+    if (!(this instanceof AutoAdvanceControl)) {
+        return new AutoAdvanceControl(state);
+    }
+
+    _.bindAll(this, 'onClick', 'destroy', 'autoPlay', 'autoAdvance');
+    this.state = state;
+    this.state.videoAutoAdvanceControl = this;
+    this.initialize();
+
+    return $.Deferred().resolve().promise();
+};
+
+AutoAdvanceControl.prototype = {
+    template: HtmlUtils.interpolateHtml(
+        HtmlUtils.HTML([
+            '<button class="control auto-advance" aria-disabled="false" title="',
+            '{autoAdvanceText}',
+            '">',
+            '<span class="label" aria-hidden="true">',
+            '{autoAdvanceText}',
+            '</span>',
+            '</button>'].join('')),
+        {
+            autoAdvanceText: gettext('Auto-advance')
+        }
+    ).toString(),
+
+    destroy: function() {
+        this.el.off({
+            click: this.onClick
+        });
+        this.el.remove();
+        this.state.el.off({
+            ready: this.autoPlay,
+            ended: this.autoAdvance,
+            destroy: this.destroy
+        });
+        delete this.state.videoAutoAdvanceControl;
+    },
+
+    /** Initializes the module. */
+    initialize: function() {
+        let state = this.state;
+
+        this.el = $(this.template);
+        this.render();
+        this.setAutoAdvance(state.auto_advance);
+        this.bindHandlers();
+
+        return true;
+    },
+
+    /**
+     * Creates any necessary DOM elements, attach them, and set their,
+     * initial configuration.
+     * @param {boolean} enabled Whether auto advance is enabled
+     */
+    render: function() {
+        this.state.el.find('.secondary-controls').prepend(this.el);
+    },
+
+    /**
+     * Bind any necessary function callbacks to DOM events (click,
+     * mousemove, etc.).
+     */
+    bindHandlers: function() {
+        this.el.on({
+            click: this.onClick
+        });
+        this.state.el.on({
+            ready: this.autoPlay,
+            ended: this.autoAdvance,
+            destroy: this.destroy
+        });
+    },
+
+    onClick: function(event) {
+        let enabled = !this.state.auto_advance;
+        event.preventDefault();
+        this.setAutoAdvance(enabled);
+        this.el.trigger('autoadvancechange', [enabled]);
+    },
+
+    /**
+     * Sets or unsets auto advance.
+     * @param {boolean} enabled Sets auto advance.
+     */
+    setAutoAdvance: function(enabled) {
+        if (enabled) {
+            this.el.addClass('active');
+        } else {
+            this.el.removeClass('active');
+        }
+    },
+
+    autoPlay: function() {
+        // Only autoplay the video if it's the first component of the unit.
+        // If a unit has more than one video, no more than one will autoplay.
+        let isFirstComponent = this.state.el.parents('.vert-0').length === 1;
+        if (this.state.auto_advance && isFirstComponent) {
+            this.state.videoCommands.execute('play');
+        }
+    },
+
+    autoAdvance: function() {
+        // We are posting a message to the MFE and then let the eventlistener
+        // in the MFE handle the action taken.
+        if (this.state.auto_advance) {
+            if (window !== window.parent) {
+                window.parent.postMessage({
+                  type: 'plugin.autoAdvance',
+                  payload: {}
+                }, document.referrer
+              );
+            }
+        }
+    }
+};
+
+export default AutoAdvanceControl;
diff --git a/xblocks_contrib/video/static/js/src/08_video_speed_control.js b/xblocks_contrib/video/static/js/src/08_video_speed_control.js
new file mode 100644
index 00000000..f8a5ce3e
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/08_video_speed_control.js
@@ -0,0 +1,417 @@
+'use strict';
+
+import Iterator from './00_iterator.js';
+import HtmlUtils from 'edx-ui-toolkit/js/utils/html-utils';
+
+/**
+ * Video speed control module.
+ * @exports video/08_video_speed_control.js
+ * @constructor
+ * @param {object} state The object containing the state of the video player.
+ * @return {jquery Promise}
+ */
+function VideoSpeedControl(state) {
+    if (!(this instanceof VideoSpeedControl)) {
+        return new VideoSpeedControl(state);
+    }
+
+    _.bindAll(this, 'onSetSpeed', 'onRenderSpeed', 'clickLinkHandler',
+        'keyDownLinkHandler', 'mouseEnterHandler', 'mouseLeaveHandler',
+        'clickMenuHandler', 'keyDownMenuHandler', 'destroy'
+    );
+    this.state = state;
+    this.state.videoSpeedControl = this;
+    this.initialize();
+
+    return $.Deferred().resolve().promise();
+};
+
+VideoSpeedControl.prototype = {
+    template: [
+        '<div class="speeds menu-container" role="application">',
+        '<p class="sr instructions">',
+        gettext('Press UP to enter the speed menu then use the UP and DOWN arrow keys to navigate the different speeds, then press ENTER to change to the selected speed.'), // eslint-disable-line max-len, indent
+        '</p>',
+        '<button class="control speed-button" aria-disabled="false" aria-expanded="false"',
+        'title="',
+        gettext('Adjust video speed'),
+        '">',
+        '<span>',
+        '<span class="icon fa fa-caret-right" aria-hidden="true"></span>',
+        '</span>',
+        '<span class="label">',
+        gettext('Speed'),
+        ' </span>',
+        '<span class="value"></span>',
+        '</button>',
+        '<ol class="video-speeds menu"></ol>',
+        '</div>'
+    ].join(''),
+
+    destroy: function () {
+        this.el.off({
+            mouseenter: this.mouseEnterHandler,
+            mouseleave: this.mouseLeaveHandler,
+            click: this.clickMenuHandler,
+            keydown: this.keyDownMenuHandler
+        });
+
+        this.state.el.off({
+            'speed:set': this.onSetSpeed,
+            'speed:render': this.onRenderSpeed
+        });
+        this.closeMenu(true);
+        this.speedsContainer.remove();
+        this.el.remove();
+        delete this.state.videoSpeedControl;
+    },
+
+    /** Initializes the module. */
+    initialize: function () {
+        let state = this.state;
+
+        if (!this.isPlaybackRatesSupported(state)) {
+            console.log(
+                '[Video info]: playbackRate is not supported.'
+            );
+
+            return false;
+        }
+        this.el = $(this.template);
+        this.speedsContainer = this.el.find('.video-speeds');
+        this.speedButton = this.el.find('.speed-button');
+        this.render(state.speeds, state.speed);
+        this.setSpeed(state.speed, true, true);
+        this.bindHandlers();
+
+        return true;
+    },
+
+    /**
+     * Creates any necessary DOM elements, attach them, and set their,
+     * initial configuration.
+     * @param {array} speeds List of speeds available for the player.
+     * @param {string} currentSpeed The current speed set to the player.
+     */
+    render: function (speeds, currentSpeed) {
+        let speedsContainer = this.speedsContainer,
+            reversedSpeeds = speeds.concat().reverse(),
+            instructionsId = 'speed-instructions-' + this.state.id,
+            speedsList = $.map(reversedSpeeds, function (speed) {
+                return HtmlUtils.interpolateHtml(
+                    HtmlUtils.HTML(
+                        [
+                            '<li data-speed="{speed}">',
+                            '<button class="control speed-option" tabindex="-1" aria-pressed="false">',
+                            '{speed}x',
+                            '</button>',
+                            '</li>'
+                        ].join('')
+                    ),
+                    {
+                        speed: speed
+                    }
+                ).toString();
+            });
+
+        HtmlUtils.setHtml(
+            speedsContainer,
+            HtmlUtils.HTML(speedsList)
+        );
+        this.speedLinks = new Iterator(speedsContainer.find('.speed-option'));
+        HtmlUtils.prepend(
+            this.state.el.find('.secondary-controls'),
+            HtmlUtils.HTML(this.el)
+        );
+        this.setActiveSpeed(currentSpeed);
+
+        // set dynamic id for instruction element to avoid collisions
+        this.el.find('.instructions').attr('id', instructionsId);
+        this.speedButton.attr('aria-describedby', instructionsId);
+    },
+
+    /**
+     * Bind any necessary function callbacks to DOM events (click,
+     * mousemove, etc.).
+     */
+    bindHandlers: function () {
+        // Attach various events handlers to the speed menu button.
+        this.el.on({
+            mouseenter: this.mouseEnterHandler,
+            mouseleave: this.mouseLeaveHandler,
+            click: this.openMenu,
+            keydown: this.keyDownMenuHandler
+        });
+
+        // Attach click and keydown event handlers to the individual speed
+        // entries.
+        this.speedsContainer.on({
+            click: this.clickLinkHandler,
+            keydown: this.keyDownLinkHandler
+        }, '.speed-option');
+
+        this.state.el.on({
+            'speed:set': this.onSetSpeed,
+            'speed:render': this.onRenderSpeed
+        });
+        this.state.el.on('destroy', this.destroy);
+    },
+
+    onSetSpeed: function (event, speed) {
+        this.setSpeed(speed, true);
+    },
+
+    onRenderSpeed: function (event, speeds, currentSpeed) {
+        this.render(speeds, currentSpeed);
+    },
+
+    /**
+     * Check if playbackRate supports by browser. If browser supports, 1.0
+     * should be returned by playbackRate property. In this case, function
+     * return True. Otherwise, False will be returned.
+     * iOS doesn't support speed change.
+     * @param {object} state The object containing the state of the video
+     * player.
+     * @return {boolean}
+     *   true: Browser support playbackRate functionality.
+     *   false: Browser doesn't support playbackRate functionality.
+     */
+    isPlaybackRatesSupported: function (state) {
+        let isHtml5 = state.videoType === 'html5',
+            isTouch = state.isTouch,
+            video = document.createElement('video');
+
+        // eslint-disable-next-line no-extra-boolean-cast
+        return !isTouch || (isHtml5 && !Boolean(video.playbackRate));
+    },
+
+    /**
+     * Opens speed menu.
+     * @param {boolean} [bindEvent] Click event will be attached on window.
+     */
+    openMenu: function (bindEvent) {
+        // When speed entries have focus, the menu stays open on
+        // mouseleave. A clickHandler is added to the window
+        // element to have clicks close the menu when they happen
+        // outside of it.
+        if (bindEvent) {
+            $(window).on('click.speedMenu', this.clickMenuHandler);
+        }
+
+        this.el.addClass('is-opened');
+        this.speedButton
+            .attr('tabindex', -1)
+            .attr('aria-expanded', 'true');
+    },
+
+    /**
+     * Closes speed menu.
+     * @param {boolean} [unBindEvent] Click event will be detached from window.
+     */
+    closeMenu: function (unBindEvent) {
+        // Remove the previously added clickHandler from window element.
+        if (unBindEvent) {
+            $(window).off('click.speedMenu');
+        }
+
+        this.el.removeClass('is-opened');
+        this.speedButton
+            .attr('tabindex', 0)
+            .attr('aria-expanded', 'false');
+    },
+
+    /**
+     * Sets new current speed for the speed control and triggers `speedchange`
+     * event if needed.
+     * @param {string|number} speed Speed to be set.
+     * @param {boolean} [silent] Sets the new speed without triggering
+     * `speedchange` event.
+     * @param {boolean} [forceUpdate] Updates the speed even if it's
+     * not differs from current speed.
+     */
+    setSpeed: function (speed, silent, forceUpdate) {
+        let newSpeed = this.state.speedToString(speed);
+        if (newSpeed !== this.currentSpeed || forceUpdate) {
+            this.speedsContainer
+                .find('li')
+                .siblings("li[data-speed='" + newSpeed + "']");
+
+            this.speedButton.find('.value').text(newSpeed + 'x');
+            this.currentSpeed = newSpeed;
+
+            if (!silent) {
+                this.el.trigger('speedchange', [newSpeed, this.state.speed]);
+            }
+        }
+
+        this.resetActiveSpeed();
+        this.setActiveSpeed(newSpeed);
+    },
+
+    resetActiveSpeed: function () {
+        let speedOptions = this.speedsContainer.find('li');
+
+        $(speedOptions).each(function (index, el) {
+            $(el).removeClass('is-active')
+                .find('.speed-option')
+                .attr('aria-pressed', 'false');
+        });
+    },
+
+    setActiveSpeed: function (speed) {
+        let speedOption = this.speedsContainer.find('li[data-speed="' + this.state.speedToString(speed) + '"]');
+
+        speedOption.addClass('is-active')
+            .find('.speed-option')
+            .attr('aria-pressed', 'true');
+
+        this.speedButton.attr('title', gettext('Video speed: ') + this.state.speedToString(speed) + 'x');
+    },
+
+    /**
+     * Click event handler for the menu.
+     * @param {jquery Event} event
+     */
+    clickMenuHandler: function () {
+        this.closeMenu();
+
+        return false;
+    },
+
+    /**
+     * Click event handler for speed links.
+     * @param {jquery Event} event
+     */
+    clickLinkHandler: function (event) {
+        let el = $(event.currentTarget).parent(),
+            speed = $(el).data('speed');
+
+        this.resetActiveSpeed();
+        this.setActiveSpeed(speed);
+        this.state.videoCommands.execute('speed', speed);
+        this.closeMenu(true);
+
+        return false;
+    },
+
+    /**
+     * Mouseenter event handler for the menu.
+     * @param {jquery Event} event
+     */
+    mouseEnterHandler: function () {
+        this.openMenu();
+
+        return false;
+    },
+
+    /**
+     * Mouseleave event handler for the menu.
+     * @param {jquery Event} event
+     */
+    mouseLeaveHandler: function () {
+        // Only close the menu is no speed entry has focus.
+        if (!this.speedLinks.list.is(':focus')) {
+            this.closeMenu();
+        }
+
+        return false;
+    },
+
+    /**
+     * Keydown event handler for the menu.
+     * @param {jquery Event} event
+     */
+    keyDownMenuHandler: function (event) {
+        let KEY = $.ui.keyCode,
+            keyCode = event.keyCode;
+
+        // eslint-disable-next-line default-case
+        switch (keyCode) {
+            // Open menu and focus on last element of list above it.
+            case KEY.ENTER:
+            case KEY.SPACE:
+            case KEY.UP:
+                this.openMenu(true);
+                this.speedLinks.last().focus();
+                break;
+            // Close menu.
+            case KEY.ESCAPE:
+                this.closeMenu(true);
+                break;
+        }
+        // We do not stop propagation and default behavior on a TAB
+        // keypress.
+        return event.keyCode === KEY.TAB;
+    },
+
+    /**
+     * Keydown event handler for speed links.
+     * @param {jquery Event} event
+     */
+    keyDownLinkHandler: function (event) {
+        // ALT key is used to change (alternate) the function of
+        // other pressed keys. In this, do nothing.
+        if (event.altKey) {
+            return true;
+        }
+
+        let KEY = $.ui.keyCode,
+            self = this,
+            parent = $(event.currentTarget).parent(),
+            index = parent.index(),
+            speed = parent.data('speed');
+
+        // eslint-disable-next-line default-case
+        switch (event.keyCode) {
+            // Close menu.
+            case KEY.TAB:
+                // Closes menu after 25ms delay to change `tabindex` after
+                // finishing default behavior.
+                setTimeout(function () {
+                    self.closeMenu(true);
+                }, 25);
+
+                return true;
+            // Close menu and give focus to speed control.
+            case KEY.ESCAPE:
+                this.closeMenu(true);
+                this.speedButton.focus();
+
+                return false;
+            // Scroll up menu, wrapping at the top. Keep menu open.
+            case KEY.UP:
+                // Shift + Arrows keyboard shortcut might be used by
+                // screen readers. In this, do nothing.
+                if (event.shiftKey) {
+                    return true;
+                }
+
+                this.speedLinks.prev(index).focus();
+                return false;
+            // Scroll down  menu, wrapping at the bottom. Keep menu
+            // open.
+            case KEY.DOWN:
+                // Shift + Arrows keyboard shortcut might be used by
+                // screen readers. In this, do nothing.
+                if (event.shiftKey) {
+                    return true;
+                }
+
+                this.speedLinks.next(index).focus();
+                return false;
+            // Close menu, give focus to speed control and change
+            // speed.
+            case KEY.ENTER:
+            case KEY.SPACE:
+                this.closeMenu(true);
+                this.speedButton.focus();
+                this.setSpeed(this.state.speedToString(speed));
+
+                return false;
+        }
+
+        return true;
+    }
+};
+
+export default VideoSpeedControl;
diff --git a/xblocks_contrib/video/static/js/src/095_video_context_menu.js b/xblocks_contrib/video/static/js/src/095_video_context_menu.js
new file mode 100644
index 00000000..42544738
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/095_video_context_menu.js
@@ -0,0 +1,698 @@
+import _ from 'underscore';
+import Component from './00_component.js';
+
+let AbstractItem = Component.extend({
+    initialize: function (options) {
+        this.options = $.extend(true, {
+            label: '',
+            prefix: 'edx-',
+            dataAttrs: {menu: this},
+            attrs: {},
+            items: [],
+            callback: $.noop,
+            initialize: $.noop
+        }, options);
+
+        this.id = _.uniqueId();
+        this.element = this.createElement();
+        this.element.attr(this.options.attrs).data(this.options.dataAttrs);
+        this.children = [];
+        this.delegateEvents();
+        this.options.initialize.call(this, this);
+    },
+    destroy: function () {
+        _.invoke(this.getChildren(), 'destroy');
+        this.undelegateEvents();
+        this.getElement().remove();
+    },
+    open: function () {
+        this.getElement().addClass('is-opened');
+        return this;
+    },
+    close: function () {
+    },
+    closeSiblings: function () {
+        _.invoke(this.getSiblings(), 'close');
+        return this;
+    },
+    getElement: function () {
+        return this.element;
+    },
+    addChild: function (child) {
+        let firstChild = null,
+            lastChild = null;
+        if (this.hasChildren()) {
+            lastChild = this.getLastChild();
+            lastChild.next = child;
+            firstChild = this.getFirstChild();
+            firstChild.prev = child;
+        }
+        child.parent = this;
+        child.next = firstChild;
+        child.prev = lastChild;
+        this.children.push(child);
+        return this;
+    },
+    getChildren: function () {
+        // Returns the copy.
+        return this.children.concat();
+    },
+    hasChildren: function () {
+        return this.getChildren().length > 0;
+    },
+    getFirstChild: function () {
+        return _.first(this.children);
+    },
+    getLastChild: function () {
+        return _.last(this.children);
+    },
+    bindEvent: function (element, events, handler) {
+        $(element).on(this.addNamespace(events), handler);
+        return this;
+    },
+    getNext: function () {
+        let item = this.next;
+        while (item.isHidden() && this.id !== item.id) {
+            item = item.next;
+        }
+        return item;
+    },
+    getPrev: function () {
+        let item = this.prev;
+        while (item.isHidden() && this.id !== item.id) {
+            item = item.prev;
+        }
+        return item;
+    },
+    createElement: function () {
+        return null;
+    },
+    getRoot: function () {
+        let item = this;
+        while (item.parent) {
+            item = item.parent;
+        }
+        return item;
+    },
+    populateElement: function () {
+    },
+    focus: function () {
+        this.getElement().focus();
+        this.closeSiblings();
+        return this;
+    },
+    isHidden: function () {
+        return this.getElement().is(':hidden');
+    },
+    getSiblings: function () {
+        let items = [],
+            item = this;
+        while (item.next && item.next.id !== this.id) {
+            item = item.next;
+            items.push(item);
+        }
+        return items;
+    },
+    select: function () {
+    },
+    unselect: function () {
+    },
+    setLabel: function () {
+    },
+    itemHandler: function () {
+    },
+    keyDownHandler: function () {
+    },
+    delegateEvents: function () {
+    },
+    undelegateEvents: function () {
+        this.getElement().off('.' + this.id);
+    },
+    addNamespace: function (events) {
+        return _.map(events.split(/\s+/), function (event) {
+            return event + '.' + this.id;
+        }, this).join(' ');
+    }
+});
+
+let AbstractMenu = AbstractItem.extend({
+    delegateEvents: function () {
+        this.bindEvent(this.getElement(), 'keydown mouseleave mouseover', this.itemHandler.bind(this))
+            .bindEvent(this.getElement(), 'contextmenu', function (event) {
+                event.preventDefault();
+            });
+        return this;
+    },
+
+    populateElement: function () {
+        let fragment = document.createDocumentFragment();
+
+        _.each(this.getChildren(), function (child) {
+            fragment.appendChild(child.populateElement()[0]);
+        }, this);
+
+        this.appendContent([fragment]);
+        this.isRendered = true;
+        return this.getElement();
+    },
+
+    close: function () {
+        this.closeChildren();
+        this.getElement().removeClass('is-opened');
+        return this;
+    },
+
+    closeChildren: function () {
+        _.invoke(this.getChildren(), 'close');
+        return this;
+    },
+
+    itemHandler: function (event) {
+        event.preventDefault();
+        let item = $(event.target).data('menu');
+        // eslint-disable-next-line default-case
+        switch (event.type) {
+            case 'keydown':
+                this.keyDownHandler.call(this, event, item);
+                break;
+            case 'mouseover':
+                this.mouseOverHandler.call(this, event, item);
+                break;
+            case 'mouseleave':
+                this.mouseLeaveHandler.call(this, event, item);
+                break;
+        }
+    },
+
+    keyDownHandler: function () {
+    },
+    mouseOverHandler: function () {
+    },
+    mouseLeaveHandler: function () {
+    }
+});
+
+let Menu = AbstractMenu.extend({
+    initialize: function (options, contextmenuElement, container) {
+        this.contextmenuElement = $(contextmenuElement);
+        this.container = $(container);
+        this.overlay = this.getOverlay();
+        AbstractMenu.prototype.initialize.apply(this, arguments);
+        this.build(this, this.options.items);
+    },
+
+    createElement: function () {
+        return $('<ol />', {
+            class: ['contextmenu', this.options.prefix + 'contextmenu'].join(' '),
+            role: 'menu',
+            tabindex: -1
+        });
+    },
+
+    delegateEvents: function () {
+        AbstractMenu.prototype.delegateEvents.call(this);
+        this.bindEvent(this.contextmenuElement, 'contextmenu', this.contextmenuHandler.bind(this))
+            .bindEvent(window, 'resize', _.debounce(this.close.bind(this), 100));
+        return this;
+    },
+
+    destroy: function () {
+        AbstractMenu.prototype.destroy.call(this);
+        this.overlay.destroy();
+        this.contextmenuElement.removeData('contextmenu');
+        return this;
+    },
+
+    undelegateEvents: function () {
+        AbstractMenu.prototype.undelegateEvents.call(this);
+        this.contextmenuElement.off(this.addNamespace('contextmenu'));
+        this.overlay.undelegateEvents();
+        return this;
+    },
+
+    appendContent: function (content) {
+        let $content = $(content);
+        this.getElement().append($content);
+        return this;
+    },
+
+    addChild: function () {
+        AbstractMenu.prototype.addChild.apply(this, arguments);
+        this.next = this.getFirstChild();
+        this.prev = this.getLastChild();
+        return this;
+    },
+
+    build: function (container, items) {
+        _.each(items, function (item) {
+            let child;
+            if (_.has(item, 'items')) {
+                child = this.build((new Submenu(item, this.contextmenuElement)), item.items);
+            } else {
+                child = new MenuItem(item);
+            }
+            container.addChild(child);
+        }, this);
+        return container;
+    },
+
+    focus: function () {
+        this.getElement().focus();
+        return this;
+    },
+
+    open: function () {
+        let $menu = (this.isRendered) ? this.getElement() : this.populateElement();
+        this.container.append($menu);
+        AbstractItem.prototype.open.call(this);
+        this.overlay.show(this.container);
+        return this;
+    },
+
+    close: function () {
+        AbstractMenu.prototype.close.call(this);
+        this.getElement().detach();
+        this.overlay.hide();
+        return this;
+    },
+
+    position: function (event) {
+        this.getElement().position({
+            my: 'left top',
+            of: event,
+            collision: 'flipfit flipfit',
+            within: this.contextmenuElement
+        });
+
+        return this;
+    },
+
+    pointInContainerBox: function (x, y) {
+        let containerOffset = this.contextmenuElement.offset(),
+            containerBox = {
+                x0: containerOffset.left,
+                y0: containerOffset.top,
+                x1: containerOffset.left + this.contextmenuElement.outerWidth(),
+                y1: containerOffset.top + this.contextmenuElement.outerHeight()
+            };
+        return containerBox.x0 <= x && x <= containerBox.x1 && containerBox.y0 <= y && y <= containerBox.y1;
+    },
+
+    getOverlay: function () {
+        return new Overlay(
+            this.close.bind(this),
+            function (event) {
+                event.preventDefault();
+                if (this.pointInContainerBox(event.pageX, event.pageY)) {
+                    this.position(event).focus();
+                    this.closeChildren();
+                } else {
+                    this.close();
+                }
+            }.bind(this)
+        );
+    },
+
+    contextmenuHandler: function (event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.open().position(event).focus();
+    },
+
+    keyDownHandler: function (event, item) {
+        let KEY = $.ui.keyCode,
+            keyCode = event.keyCode;
+
+        // eslint-disable-next-line default-case
+        switch (keyCode) {
+            case KEY.UP:
+                item.getPrev().focus();
+                event.stopPropagation();
+                break;
+            case KEY.DOWN:
+                item.getNext().focus();
+                event.stopPropagation();
+                break;
+            case KEY.TAB:
+                event.stopPropagation();
+                break;
+            case KEY.ESCAPE:
+                this.close();
+                break;
+        }
+
+        return false;
+    }
+});
+
+let Overlay = Component.extend({
+    ns: '.overlay',
+    initialize: function (clickHandler, contextmenuHandler) {
+        this.element = $('<div />', {
+            class: 'overlay'
+        });
+        this.clickHandler = clickHandler;
+        this.contextmenuHandler = contextmenuHandler;
+    },
+
+    destroy: function () {
+        this.getElement().remove();
+        this.undelegateEvents();
+    },
+
+    getElement: function () {
+        return this.element;
+    },
+
+    hide: function () {
+        this.getElement().detach();
+        this.undelegateEvents();
+        return this;
+    },
+
+    show: function (container) {
+        let $elem = $(this.getElement());
+        $(container).append($elem);
+        this.delegateEvents();
+        return this;
+    },
+
+    delegateEvents: function () {
+        let self = this;
+        $(document)
+            .on('click' + this.ns, function () {
+                if (_.isFunction(self.clickHandler)) {
+                    self.clickHandler.apply(this, arguments);
+                }
+                self.hide();
+            })
+            .on('contextmenu' + this.ns, function () {
+                if (_.isFunction(self.contextmenuHandler)) {
+                    self.contextmenuHandler.apply(this, arguments);
+                }
+            });
+        return this;
+    },
+
+    undelegateEvents: function () {
+        $(document).off(this.ns);
+        return this;
+    }
+});
+
+let Submenu = AbstractMenu.extend({
+    initialize: function (options, contextmenuElement) {
+        this.contextmenuElement = contextmenuElement;
+        AbstractMenu.prototype.initialize.apply(this, arguments);
+    },
+
+    createElement: function () {
+        let $spanElem,
+            $listElem,
+            $element = $('<li />', {
+                class: ['submenu-item', 'menu-item', this.options.prefix + 'submenu-item'].join(' '),
+                'aria-expanded': 'false',
+                'aria-haspopup': 'true',
+                'aria-labelledby': 'submenu-item-label-' + this.id,
+                role: 'menuitem',
+                tabindex: -1
+            });
+
+        $spanElem = $('<span />', {
+            id: 'submenu-item-label-' + this.id,
+            text: this.options.label
+        });
+        this.label = $spanElem.appendTo($element);
+
+        $listElem = $('<ol />', {
+            class: ['submenu', this.options.prefix + 'submenu'].join(' '),
+            role: 'menu'
+        });
+
+        this.list = $listElem.appendTo($element);
+
+        return $element;
+    },
+
+    appendContent: function (content) {
+        let $content = $(content);
+        this.list.append($content);
+        return this;
+    },
+
+    setLabel: function (label) {
+        this.label.text(label);
+        return this;
+    },
+
+    openKeyboard: function () {
+        if (this.hasChildren()) {
+            this.open();
+            this.getFirstChild().focus();
+        }
+        return this;
+    },
+
+    keyDownHandler: function (event) {
+        let KEY = $.ui.keyCode,
+            keyCode = event.keyCode;
+
+        // eslint-disable-next-line default-case
+        switch (keyCode) {
+            case KEY.LEFT:
+                this.close().focus();
+                event.stopPropagation();
+                break;
+            case KEY.RIGHT:
+            case KEY.ENTER:
+            case KEY.SPACE:
+                this.openKeyboard();
+                event.stopPropagation();
+                break;
+        }
+
+        return false;
+    },
+
+    open: function () {
+        AbstractMenu.prototype.open.call(this);
+        this.getElement().attr({'aria-expanded': 'true'});
+        this.position();
+        return this;
+    },
+
+    close: function () {
+        AbstractMenu.prototype.close.call(this);
+        this.getElement().attr({'aria-expanded': 'false'});
+        return this;
+    },
+
+    position: function () {
+        this.list.position({
+            my: 'left top',
+            at: 'right top',
+            of: this.getElement(),
+            collision: 'flipfit flipfit',
+            within: this.contextmenuElement
+        });
+        return this;
+    },
+
+    mouseOverHandler: function () {
+        clearTimeout(this.timer);
+        this.timer = setTimeout(this.open.bind(this), 200);
+        this.focus();
+    },
+
+    mouseLeaveHandler: function () {
+        clearTimeout(this.timer);
+        this.timer = setTimeout(this.close.bind(this), 200);
+        this.focus();
+    }
+});
+
+let MenuItem = AbstractItem.extend({
+    createElement: function () {
+        let classNames = [
+            'menu-item', this.options.prefix + 'menu-item',
+            this.options.isSelected ? 'is-selected' : ''
+        ].join(' ');
+
+        return $('<li />', {
+            class: classNames,
+            'aria-selected': this.options.isSelected ? 'true' : 'false',
+            role: 'menuitem',
+            tabindex: -1,
+            text: this.options.label
+        });
+    },
+
+    populateElement: function () {
+        return this.getElement();
+    },
+
+    delegateEvents: function () {
+        this.bindEvent(this.getElement(), 'click keydown contextmenu mouseover', this.itemHandler.bind(this));
+        return this;
+    },
+
+    setLabel: function (label) {
+        this.getElement().text(label);
+        return this;
+    },
+
+    select: function (event) {
+        this.options.callback.call(this, event, this, this.options);
+        this.getElement()
+            .addClass('is-selected')
+            .attr({'aria-selected': 'true'});
+        _.invoke(this.getSiblings(), 'unselect');
+        // Hide the menu.
+        this.getRoot().close();
+        return this;
+    },
+
+    unselect: function () {
+        this.getElement()
+            .removeClass('is-selected')
+            .attr({'aria-selected': 'false'});
+        return this;
+    },
+
+    itemHandler: function (event) {
+        event.preventDefault();
+        // eslint-disable-next-line default-case
+        switch (event.type) {
+            case 'contextmenu':
+            case 'click':
+                this.select();
+                break;
+            case 'mouseover':
+                this.focus();
+                event.stopPropagation();
+                break;
+            case 'keydown':
+                this.keyDownHandler.call(this, event, this);
+                break;
+        }
+    },
+
+    keyDownHandler: function (event) {
+        let KEY = $.ui.keyCode,
+            keyCode = event.keyCode;
+
+        // eslint-disable-next-line default-case
+        switch (keyCode) {
+            case KEY.RIGHT:
+                event.stopPropagation();
+                break;
+            case KEY.ENTER:
+            case KEY.SPACE:
+                this.select();
+                event.stopPropagation();
+                break;
+        }
+
+        return false;
+    }
+});
+
+let VideoContextMenu = function(state, i18n) {
+    let speedCallback = function(event, menuitem, options) {
+            let speed = parseFloat(options.label);
+            state.videoCommands.execute('speed', speed);
+        }
+     let options = {
+            items: [{
+                label: i18n.Play,
+                callback: function () {
+                    state.videoCommands.execute('togglePlayback');
+                },
+                initialize: function (menuitem) {
+                    state.el.on({
+                        play: function () {
+                            menuitem.setLabel(i18n.Pause);
+                        },
+                        pause: function () {
+                            menuitem.setLabel(i18n.Play);
+                        }
+                    });
+                }
+            }, {
+                label: state.videoVolumeControl.getMuteStatus() ? i18n.Unmute : i18n.Mute,
+                callback: function () {
+                    state.videoCommands.execute('toggleMute');
+                },
+                initialize: function (menuitem) {
+                    state.el.on({
+                        volumechange: function () {
+                            if (state.videoVolumeControl.getMuteStatus()) {
+                                menuitem.setLabel(i18n.Unmute);
+                            } else {
+                                menuitem.setLabel(i18n.Mute);
+                            }
+                        }
+                    });
+                }
+            }, {
+                label: i18n['Fill browser'],
+                callback: function () {
+                    state.videoCommands.execute('toggleFullScreen');
+                },
+                initialize: function (menuitem) {
+                    state.el.on({
+                        fullscreen: function (event, isFullscreen) {
+                            if (isFullscreen) {
+                                menuitem.setLabel(i18n['Exit full browser']);
+                            } else {
+                                menuitem.setLabel(i18n['Fill browser']);
+                            }
+                        }
+                    });
+                }
+            }, {
+                label: i18n.Speed,
+                items: _.map(state.speeds, function (speed) {
+                    let isSelected = parseFloat(speed) === state.speed;
+                    return {
+                        label: speed + 'x', callback: speedCallback, speed: speed, isSelected: isSelected
+                    };
+                }),
+                initialize: function (menuitem) {
+                    state.el.on({
+                        speedchange: function (event, speed) {
+                            // eslint-disable-next-line no-shadow
+                            let item = menuitem.getChildren().filter(function (item) {
+                                return item.options.speed === speed;
+                            })[0];
+                            if (item) {
+                                item.select();
+                            }
+                        }
+                    });
+                }
+            }
+            ]
+        };
+
+    // eslint-disable-next-line no-shadow
+    $.fn.contextmenu = function(container, options) {
+        return this.each(function () {
+            $(this).data('contextmenu', new Menu(options, this, container));
+        });
+    };
+
+    if (!state.isYoutubeType()) {
+        state.el.find('video').contextmenu(state.el, options);
+        state.el.on('destroy', function () {
+            let contextmenu = $(this).find('video').data('contextmenu');
+            if (contextmenu) {
+                contextmenu.destroy();
+            }
+        });
+    }
+
+    return $.Deferred().resolve().promise();
+}
+
+export default VideoContextMenu
diff --git a/xblocks_contrib/video/static/js/src/09_bumper.js b/xblocks_contrib/video/static/js/src/09_bumper.js
new file mode 100644
index 00000000..d568c536
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/09_bumper.js
@@ -0,0 +1,108 @@
+'use strict';
+
+/**
+ * VideoBumper module.
+ * @exports video/09_bumper.js
+ * @constructor
+ * @param {Object} player The player factory.
+ * @param {Object} state The object containing the state of the video
+ * @return {jquery Promise}
+ */
+let VideoBumper = function(player, state) {
+    if (!(this instanceof VideoBumper)) {
+        return new VideoBumper(player, state);
+    }
+
+    _.bindAll(
+        this, 'showMainVideoHandler', 'destroy', 'skipByDuration', 'destroyAndResolve'
+    );
+    this.dfd = $.Deferred();
+    this.element = state.el;
+    this.element.addClass('is-bumper');
+    this.player = player;
+    this.state = state;
+    this.doNotShowAgain = false;
+    this.state.videoBumper = this;
+    this.bindHandlers();
+    this.initialize();
+    this.maxBumperDuration = 35; // seconds
+};
+
+VideoBumper.prototype = {
+    initialize: function() {
+        this.player();
+    },
+
+    getPromise: function() {
+        return this.dfd.promise();
+    },
+
+    showMainVideoHandler: function() {
+        this.state.storage.setItem('isBumperShown', true);
+        setTimeout(function() {
+            this.saveState();
+            this.showMainVideo();
+        }.bind(this), 20);
+    },
+
+    destroyAndResolve: function() {
+        this.destroy();
+        this.dfd.resolve();
+    },
+
+    showMainVideo: function() {
+        if (this.state.videoPlayer) {
+            this.destroyAndResolve();
+        } else {
+            this.state.el.on('initialize', this.destroyAndResolve);
+        }
+    },
+
+    skip: function() {
+        this.element.trigger('skip', [this.doNotShowAgain]);
+        this.showMainVideoHandler();
+    },
+
+    skipAndDoNotShowAgain: function() {
+        this.doNotShowAgain = true;
+        this.skip();
+    },
+
+    skipByDuration: function(event, time) {
+        if (time > this.maxBumperDuration) {
+            this.element.trigger('ended');
+        }
+    },
+
+    bindHandlers: function() {
+        let events = ['ended', 'error'].join(' ');
+        this.element.on(events, this.showMainVideoHandler);
+        this.element.on('timeupdate', this.skipByDuration);
+    },
+
+    saveState: function() {
+        let info = {bumper_last_view_date: true};
+        if (this.doNotShowAgain) {
+            _.extend(info, {bumper_do_not_show_again: true});
+        }
+        if (this.state.videoSaveStatePlugin) {
+            this.state.videoSaveStatePlugin.saveState(true, info);
+        }
+    },
+
+    destroy: function() {
+        let events = ['ended', 'error'].join(' ');
+        this.element.off(events, this.showMainVideoHandler);
+        this.element.off({
+            timeupdate: this.skipByDuration,
+            initialize: this.destroyAndResolve
+        });
+        this.element.removeClass('is-bumper');
+        if (_.isFunction(this.state.videoPlayer.destroy)) {
+            this.state.videoPlayer.destroy();
+        }
+        delete this.state.videoBumper;
+    }
+};
+
+export default VideoBumper;
diff --git a/xblocks_contrib/video/static/js/src/09_completion.js b/xblocks_contrib/video/static/js/src/09_completion.js
new file mode 100644
index 00000000..8d7faeb7
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/09_completion.js
@@ -0,0 +1,201 @@
+'use strict';
+
+
+
+/**
+ * Completion handler
+ * @exports video/09_completion.js
+ * @constructor
+ * @param {Object} state The object containing the state of the video
+ * @return {jquery Promise}
+ */
+let VideoCompletionHandler = function(state) {
+    if (!(this instanceof VideoCompletionHandler)) {
+        return new VideoCompletionHandler(state);
+    }
+    this.state = state;
+    this.state.completionHandler = this;
+    this.initialize();
+    return $.Deferred().resolve().promise();
+};
+
+VideoCompletionHandler.prototype = {
+
+    /** Tears down the VideoCompletionHandler.
+     *
+     *  * Removes backreferences from this.state to this.
+     *  * Turns off signal handlers.
+     */
+    destroy: function() {
+        this.el.remove();
+        this.el.off('timeupdate.completion');
+        this.el.off('ended.completion');
+        delete this.state.completionHandler;
+    },
+
+    /** Initializes the VideoCompletionHandler.
+     *
+     *  This sets all the instance variables needed to perform
+     *  completion calculations.
+     */
+    initialize: function() {
+        // Attributes with "Time" in the name refer to the number of seconds since
+        // the beginning of the video, except for lastSentTime, which refers to a
+        // timestamp in seconds since the Unix epoch.
+        this.lastSentTime = undefined;
+        this.isComplete = false;
+        this.completionPercentage = this.state.config.completionPercentage;
+        this.startTime = this.state.config.startTime;
+        this.endTime = this.state.config.endTime;
+        this.isEnabled = this.state.config.completionEnabled;
+        if (this.endTime) {
+            this.completeAfterTime = this.calculateCompleteAfterTime(this.startTime, this.endTime);
+        }
+        if (this.isEnabled) {
+            this.bindHandlers();
+        }
+    },
+
+    /** Bind event handler callbacks.
+     *
+     *  When ended is triggered, mark the video complete
+     *  unconditionally.
+     *
+     *  When timeupdate is triggered, check to see if the user has
+     *  passed the completeAfterTime in the video, and if so, mark the
+     *  video complete.
+     *
+     *  When destroy is triggered, clean up outstanding resources.
+     */
+    bindHandlers: function() {
+        let self = this;
+
+        /** Event handler to check if the video is complete, and submit
+         *  a completion if it is.
+         *
+         *  If the timeupdate handler doesn't fire after the required
+         *  percentage, this will catch any fully complete videos.
+         */
+        this.state.el.on('ended.completion', function() {
+            self.handleEnded();
+        });
+
+        /** Event handler to check video progress, and mark complete if
+         *  greater than completionPercentage
+         */
+        this.state.el.on('timeupdate.completion', function(ev, currentTime) {
+            self.handleTimeUpdate(currentTime);
+        });
+
+        /** Event handler to receive youtube metadata (if we even are a youtube link),
+         *  and mark complete, if youtube will insist on hosting the video itself.
+         */
+        this.state.el.on('metadata_received', function() {
+            self.checkMetadata();
+        });
+
+        /** Event handler to clean up resources when the video player
+         *  is destroyed.
+         */
+        this.state.el.off('destroy', this.destroy);
+    },
+
+    /** Handler to call when the ended event is triggered */
+    handleEnded: function() {
+        if (this.isComplete) {
+            return;
+        }
+        this.markCompletion();
+    },
+
+    /** Handler to call when a timeupdate event is triggered */
+    handleTimeUpdate: function(currentTime) {
+        let duration;
+        if (this.isComplete) {
+            return;
+        }
+        if (this.lastSentTime !== undefined && currentTime - this.lastSentTime < this.repostDelaySeconds()) {
+            // Throttle attempts to submit in case of network issues
+            return;
+        }
+        if (this.completeAfterTime === undefined) {
+            // Duration is not available at initialization time
+            duration = this.state.videoPlayer.duration();
+            if (!duration) {
+                // duration is not yet set. Wait for another event,
+                // or fall back to 'ended' handler.
+                return;
+            }
+            this.completeAfterTime = this.calculateCompleteAfterTime(this.startTime, duration);
+        }
+
+        if (currentTime > this.completeAfterTime) {
+            this.markCompletion(currentTime);
+        }
+    },
+
+    /** Handler to call when youtube metadata is received */
+    checkMetadata: function() {
+        let metadata = this.state.metadata[this.state.youtubeId()];
+
+        // https://developers.google.com/youtube/v3/docs/videos#contentDetails.contentRating.ytRating
+        if (metadata && metadata.contentRating && metadata.contentRating.ytRating === 'ytAgeRestricted') {
+            // Age-restricted videos won't play in embedded players. Instead, they ask you to watch it on
+            // youtube itself. Which means we can't notice if they complete it. Rather than leaving an
+            // incompletable video in the course, let's just mark it complete right now.
+            if (!this.isComplete) {
+                this.markCompletion();
+            }
+        }
+    },
+
+    /** Submit completion to the LMS */
+    markCompletion: function(currentTime) {
+        let self = this;
+        let errmsg;
+        this.isComplete = true;
+        this.lastSentTime = currentTime;
+        this.state.el.trigger('complete');
+        if (this.state.config.publishCompletionUrl) {
+            $.ajax({
+                type: 'POST',
+                url: this.state.config.publishCompletionUrl,
+                contentType: 'application/json',
+                dataType: 'json',
+                data: JSON.stringify({completion: 1.0}),
+                success: function() {
+                    self.state.el.off('timeupdate.completion');
+                    self.state.el.off('ended.completion');
+                },
+                error: function(xhr) {
+                    /* eslint-disable no-console */
+                    self.complete = false;
+                    errmsg = 'Failed to submit completion';
+                    if (xhr.responseJSON !== undefined) {
+                        errmsg += ': ' + xhr.responseJSON.error;
+                    }
+                    console.warn(errmsg);
+                    /* eslint-enable no-console */
+                }
+            });
+        } else {
+            /* eslint-disable no-console */
+            console.warn('publishCompletionUrl not defined');
+            /* eslint-enable no-console */
+        }
+    },
+
+    /** Determine what point in the video (in seconds from the
+     *  beginning) counts as complete.
+     */
+    calculateCompleteAfterTime: function(startTime, endTime) {
+        return startTime + (endTime - startTime) * this.completionPercentage;
+    },
+
+    /** How many seconds to wait after a POST fails to try again. */
+    repostDelaySeconds: function() {
+        return 3.0;
+    }
+};
+
+export default VideoCompletionHandler;
diff --git a/xblocks_contrib/video/static/js/src/09_events_bumper_plugin.js b/xblocks_contrib/video/static/js/src/09_events_bumper_plugin.js
new file mode 100644
index 00000000..6e1b3fef
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/09_events_bumper_plugin.js
@@ -0,0 +1,112 @@
+'use strict';
+
+import _ from 'underscore';
+
+
+/**
+ * Events module.
+ * @exports video/09_events_bumper_plugin.js
+ * @constructor
+ * @param {Object} state The object containing the state of the video
+ * @param {Object} i18n The object containing strings with translations.
+ * @param {Object} options
+ * @return {jquery Promise}
+ */
+let EventsBumperPlugin = function(state, i18n, options) {
+    if (!(this instanceof EventsBumperPlugin)) {
+        return new EventsBumperPlugin(state, i18n, options);
+    }
+
+    _.bindAll(this, 'onReady', 'onPlay', 'onEnded', 'onShowLanguageMenu', 'onHideLanguageMenu', 'onSkip',
+        'onShowCaptions', 'onHideCaptions', 'destroy');
+    this.state = state;
+    this.options = _.extend({}, options);
+    this.state.videoEventsBumperPlugin = this;
+    this.i18n = i18n;
+    this.initialize();
+
+    return $.Deferred().resolve().promise();
+};
+
+EventsBumperPlugin.moduleName = 'EventsBumperPlugin';
+EventsBumperPlugin.prototype = {
+    destroy: function() {
+        this.state.el.off(this.events);
+        delete this.state.videoEventsBumperPlugin;
+    },
+
+    initialize: function() {
+        this.events = {
+            ready: this.onReady,
+            play: this.onPlay,
+            'ended stop': this.onEnded,
+            skip: this.onSkip,
+            'language_menu:show': this.onShowLanguageMenu,
+            'language_menu:hide': this.onHideLanguageMenu,
+            'captions:show': this.onShowCaptions,
+            'captions:hide': this.onHideCaptions,
+            destroy: this.destroy
+        };
+        this.bindHandlers();
+    },
+
+    bindHandlers: function() {
+        this.state.el.on(this.events);
+    },
+
+    onReady: function() {
+        this.log('edx.video.bumper.loaded');
+    },
+
+    onPlay: function() {
+        this.log('edx.video.bumper.played', {currentTime: this.getCurrentTime()});
+    },
+
+    onEnded: function() {
+        this.log('edx.video.bumper.stopped', {currentTime: this.getCurrentTime()});
+    },
+
+    onSkip: function(event, doNotShowAgain) {
+        let info = {currentTime: this.getCurrentTime()};
+        let eventName = 'edx.video.bumper.' + (doNotShowAgain ? 'dismissed' : 'skipped');
+        this.log(eventName, info);
+    },
+
+    onShowLanguageMenu: function() {
+        this.log('edx.video.bumper.transcript.menu.shown');
+    },
+
+    onHideLanguageMenu: function() {
+        this.log('edx.video.bumper.transcript.menu.hidden');
+    },
+
+    onShowCaptions: function() {
+        this.log('edx.video.bumper.transcript.shown', {currentTime: this.getCurrentTime()});
+    },
+
+    onHideCaptions: function() {
+        this.log('edx.video.bumper.transcript.hidden', {currentTime: this.getCurrentTime()});
+    },
+
+    getCurrentTime: function() {
+        let player = this.state.videoPlayer;
+        return player ? player.currentTime : 0;
+    },
+
+    getDuration: function() {
+        let player = this.state.videoPlayer;
+        return player ? player.duration() : 0;
+    },
+
+    log: function(eventName, data) {
+        let logInfo = _.extend({
+            host_component_id: this.state.id,
+            bumper_id: this.state.config.sources[0] || '',
+            duration: this.getDuration(),
+            code: 'html5'
+        }, data, this.options.data);
+        Logger.log(eventName, logInfo);
+    }
+};
+
+export default EventsBumperPlugin;
diff --git a/xblocks_contrib/video/static/js/src/09_events_plugin.js b/xblocks_contrib/video/static/js/src/09_events_plugin.js
new file mode 100644
index 00000000..2febb997
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/09_events_plugin.js
@@ -0,0 +1,177 @@
+'use strict';
+
+import _ from 'underscore';
+
+
+/**
+ * Events module.
+ * @exports video/09_events_plugin.js
+ * @constructor
+ * @param {Object} state The object containing the state of the video
+ * @param {Object} i18n The object containing strings with translations.
+ * @param {Object} options
+ * @return {jquery Promise}
+ */
+let EventsPlugin = function(state, i18n, options) {
+    if (!(this instanceof EventsPlugin)) {
+        return new EventsPlugin(state, i18n, options);
+    }
+
+    _.bindAll(this, 'onReady', 'onPlay', 'onPause', 'onComplete', 'onEnded', 'onSeek',
+        'onSpeedChange', 'onAutoAdvanceChange', 'onShowLanguageMenu', 'onHideLanguageMenu',
+        'onSkip', 'onShowTranscript', 'onHideTranscript', 'onShowCaptions', 'onHideCaptions',
+        'destroy');
+
+    this.state = state;
+    this.options = _.extend({}, options);
+    this.state.videoEventsPlugin = this;
+    this.i18n = i18n;
+    this.initialize();
+
+    return $.Deferred().resolve().promise();
+};
+
+EventsPlugin.moduleName = 'EventsPlugin';
+EventsPlugin.prototype = {
+    destroy: function() {
+        this.state.el.off(this.events);
+        delete this.state.videoEventsPlugin;
+    },
+
+    initialize: function() {
+        this.events = {
+            ready: this.onReady,
+            play: this.onPlay,
+            pause: this.onPause,
+            complete: this.onComplete,
+            'ended stop': this.onEnded,
+            seek: this.onSeek,
+            skip: this.onSkip,
+            speedchange: this.onSpeedChange,
+            autoadvancechange: this.onAutoAdvanceChange,
+            'language_menu:show': this.onShowLanguageMenu,
+            'language_menu:hide': this.onHideLanguageMenu,
+            'transcript:show': this.onShowTranscript,
+            'transcript:hide': this.onHideTranscript,
+            'captions:show': this.onShowCaptions,
+            'captions:hide': this.onHideCaptions,
+            destroy: this.destroy
+        };
+        this.bindHandlers();
+        this.emitPlayVideoEvent = true;
+    },
+
+    bindHandlers: function() {
+        this.state.el.on(this.events);
+    },
+
+    onReady: function() {
+        this.log('load_video');
+    },
+
+    onPlay: function() {
+        if (this.emitPlayVideoEvent) {
+            this.log('play_video', {currentTime: this.getCurrentTime()});
+            this.emitPlayVideoEvent = false;
+        }
+    },
+
+    onPause: function() {
+        this.log('pause_video', {currentTime: this.getCurrentTime()});
+        this.emitPlayVideoEvent = true;
+    },
+
+    onComplete: function() {
+        this.log('complete_video', {currentTime: this.getCurrentTime()});
+    },
+
+    onEnded: function() {
+        this.log('stop_video', {currentTime: this.getCurrentTime()});
+        this.emitPlayVideoEvent = true;
+    },
+
+    onSkip: function(event, doNotShowAgain) {
+        let info = {currentTime: this.getCurrentTime()};
+        let eventName = doNotShowAgain ? 'do_not_show_again_video' : 'skip_video';
+        this.log(eventName, info);
+    },
+
+    onSeek: function(event, time, oldTime, type) {
+        this.log('seek_video', {
+            old_time: oldTime,
+            new_time: time,
+            type: type
+        });
+        this.emitPlayVideoEvent = true;
+    },
+
+    onSpeedChange: function(event, newSpeed, oldSpeed) {
+        this.log('speed_change_video', {
+            current_time: this.getCurrentTime(),
+            old_speed: this.state.speedToString(oldSpeed),
+            new_speed: this.state.speedToString(newSpeed)
+        });
+    },
+
+    onAutoAdvanceChange: function(event, enabled) {
+        this.log('auto_advance_change_video', {
+            enabled: enabled
+        });
+    },
+
+    onShowLanguageMenu: function() {
+        this.log('edx.video.language_menu.shown');
+    },
+
+    onHideLanguageMenu: function() {
+        this.log('edx.video.language_menu.hidden', {language: this.getCurrentLanguage()});
+    },
+
+    onShowTranscript: function() {
+        this.log('show_transcript', {current_time: this.getCurrentTime()});
+    },
+
+    onHideTranscript: function() {
+        this.log('hide_transcript', {current_time: this.getCurrentTime()});
+    },
+
+    onShowCaptions: function() {
+        this.log('edx.video.closed_captions.shown', {current_time: this.getCurrentTime()});
+    },
+
+    onHideCaptions: function() {
+        this.log('edx.video.closed_captions.hidden', {current_time: this.getCurrentTime()});
+    },
+
+    getCurrentTime: function() {
+        let player = this.state.videoPlayer;
+        let startTime = this.state.config.startTime;
+        let currentTime = player ? player.currentTime : 0;
+        // if video didn't start from 0(it's a subsection of video), subtract the additional time at start
+        if (startTime) {
+            currentTime = currentTime ? currentTime - startTime : 0;
+        }
+        return currentTime;
+    },
+
+    getCurrentLanguage: function() {
+        let language = this.state.lang;
+        return language;
+    },
+
+    log: function(eventName, data) {
+        // use startTime and endTime to calculate the duration to handle the case where only a subsection of video is used
+        let endTime = this.state.config.endTime || this.state.duration;
+        let startTime = this.state.config.startTime || 0;
+
+        let logInfo = _.extend({
+            id: this.state.id,
+            // eslint-disable-next-line no-nested-ternary
+            code: this.state.isYoutubeType() ? this.state.youtubeId() : this.state.canPlayHLS ? 'hls' : 'html5',
+            duration: endTime - startTime
+        }, data, this.options.data);
+        Logger.log(eventName, logInfo);
+    }
+};
+
+export default EventsPlugin;
diff --git a/xblocks_contrib/video/static/js/src/09_play_pause_control.js b/xblocks_contrib/video/static/js/src/09_play_pause_control.js
new file mode 100644
index 00000000..c0e08446
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/09_play_pause_control.js
@@ -0,0 +1,96 @@
+'use strict';
+
+import _ from 'underscore';
+
+
+/**
+ * Play/pause control module.
+ * @exports video/09_play_pause_control.js
+ * @constructor
+ * @param {Object} state The object containing the state of the video
+ * @param {Object} i18n The object containing strings with translations.
+ * @return {jquery Promise}
+ */
+let PlayPauseControl = function(state, i18n) {
+    if (!(this instanceof PlayPauseControl)) {
+        return new PlayPauseControl(state, i18n);
+    }
+
+    _.bindAll(this, 'play', 'pause', 'onClick', 'destroy');
+    this.state = state;
+    this.state.videoPlayPauseControl = this;
+    this.i18n = i18n;
+    this.initialize();
+
+    return $.Deferred().resolve().promise();
+};
+
+PlayPauseControl.prototype = {
+    template: [
+        '<button class="control video_control play" aria-disabled="false" aria-label="',
+        gettext('Play'),
+        '">',
+        '<span class="icon fa fa-play" aria-hidden="true"></span>',
+        '</button>'
+    ].join(''),
+
+    destroy: function() {
+        this.el.remove();
+        this.state.el.off('destroy', this.destroy);
+        delete this.state.videoPlayPauseControl;
+    },
+
+    /** Initializes the module. */
+    initialize: function() {
+        this.el = $(this.template);
+        this.render();
+        this.bindHandlers();
+    },
+
+    /**
+     * Creates any necessary DOM elements, attach them, and set their,
+     * initial configuration.
+     */
+    render: function() {
+        this.state.el.find('.vcr').prepend(this.el);
+    },
+
+    /** Bind any necessary function callbacks to DOM events. */
+    bindHandlers: function() {
+        this.el.on({
+            click: this.onClick
+        });
+        this.state.el.on({
+            play: this.play,
+            'pause ended': this.pause,
+            destroy: this.destroy
+        });
+    },
+
+    onClick: function(event) {
+        event.preventDefault();
+        this.state.videoCommands.execute('togglePlayback');
+    },
+
+    play: function() {
+        this.el
+            .addClass('pause')
+            .removeClass('play')
+            .attr({title: gettext('Pause'), 'aria-label': gettext('Pause')})
+            .find('.icon')
+            .removeClass('fa-play')
+            .addClass('fa-pause');
+    },
+
+    pause: function() {
+        this.el
+            .removeClass('pause')
+            .addClass('play')
+            .attr({title: gettext('Play'), 'aria-label': gettext('Play')})
+            .find('.icon')
+            .removeClass('fa-pause')
+            .addClass('fa-play');
+    }
+};
+
+export default PlayPauseControl;
diff --git a/xblocks_contrib/video/static/js/src/09_play_placeholder.js b/xblocks_contrib/video/static/js/src/09_play_placeholder.js
new file mode 100644
index 00000000..47052ea0
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/09_play_placeholder.js
@@ -0,0 +1,84 @@
+'use strict';
+
+/**
+ * Play placeholder control module.
+ * @exports video/09_play_placeholder.js
+ * @constructor
+ * @param {Object} state The object containing the state of the video
+ * @param {Object} i18n The object containing strings with translations.
+ * @return {jquery Promise}
+ */
+let PlayPlaceholder = function(state, i18n) {
+    if (!(this instanceof PlayPlaceholder)) {
+        return new PlayPlaceholder(state, i18n);
+    }
+
+    _.bindAll(this, 'onClick', 'hide', 'show', 'destroy');
+    this.state = state;
+    this.state.videoPlayPlaceholder = this;
+    this.i18n = i18n;
+    this.initialize();
+
+    return $.Deferred().resolve().promise();
+};
+
+PlayPlaceholder.prototype = {
+    destroy: function() {
+        this.el.off('click', this.onClick);
+        this.state.el.on({
+            destroy: this.destroy,
+            play: this.hide,
+            'ended pause': this.show
+        });
+        this.hide();
+        delete this.state.videoPlayPlaceholder;
+    },
+
+    /**
+ * Indicates whether the placeholder should be shown. We display it
+ * for html5 videos on iPad and Android devices.
+ * @return {Boolean}
+ */
+    shouldBeShown: function() {
+        return /iPad|Android/i.test(this.state.isTouch[0]) && !this.state.isYoutubeType();
+    },
+
+    /** Initializes the module. */
+    initialize: function() {
+        if (!this.shouldBeShown()) {
+            return false;
+        }
+
+        this.el = this.state.el.find('.btn-play');
+        this.bindHandlers();
+        this.show();
+    },
+
+    /** Bind any necessary function callbacks to DOM events. */
+    bindHandlers: function() {
+        this.el.on('click', this.onClick);
+        this.state.el.on({
+            destroy: this.destroy,
+            play: this.hide,
+            'ended pause': this.show
+        });
+    },
+
+    onClick: function() {
+        this.state.videoCommands.execute('play');
+    },
+
+    hide: function() {
+        this.el
+            .addClass('is-hidden')
+            .attr({'aria-hidden': 'true', tabindex: -1});
+    },
+
+    show: function() {
+        this.el
+            .removeClass('is-hidden')
+            .attr({'aria-hidden': 'false', tabindex: 0});
+    }
+};
+
+export default PlayPlaceholder;
diff --git a/xblocks_contrib/video/static/js/src/09_play_skip_control.js b/xblocks_contrib/video/static/js/src/09_play_skip_control.js
new file mode 100644
index 00000000..f1cb1bdb
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/09_play_skip_control.js
@@ -0,0 +1,86 @@
+'use strict';
+
+/**
+ * Play/skip control module.
+ * @exports video/09_play_skip_control.js
+ * @constructor
+ * @param {Object} state The object containing the state of the video
+ * @param {Object} i18n The object containing strings with translations.
+ * @return {jquery Promise}
+ */
+let PlaySkipControl = function(state, i18n) {
+    if (!(this instanceof PlaySkipControl)) {
+        return new PlaySkipControl(state, i18n);
+    }
+
+    _.bindAll(this, 'play', 'onClick', 'destroy');
+    this.state = state;
+    this.state.videoPlaySkipControl = this;
+    this.i18n = i18n;
+    this.initialize();
+
+    return $.Deferred().resolve().promise();
+};
+
+PlaySkipControl.prototype = {
+    template: [
+        '<button class="control video_control play play-skip-control" title="',
+        gettext('Play'),
+        '">',
+        '<span class="icon fa fa-play" aria-hidden="true"></span>',
+        '</button>'
+    ].join(''),
+
+    destroy: function() {
+        this.el.remove();
+        this.state.el.off('destroy', this.destroy);
+        delete this.state.videoPlaySkipControl;
+    },
+
+    /** Initializes the module. */
+    initialize: function() {
+        this.el = $(this.template);
+        this.render();
+        this.bindHandlers();
+    },
+
+    /**
+     * Creates any necessary DOM elements, attach them, and set their,
+     * initial configuration.
+     */
+    render: function() {
+        this.state.el.find('.vcr').prepend(this.el);
+    },
+
+    /** Bind any necessary function callbacks to DOM events. */
+    bindHandlers: function() {
+        this.el.on('click', this.onClick);
+        this.state.el.on({
+            play: this.play,
+            destroy: this.destroy
+        });
+    },
+
+    onClick: function(event) {
+        event.preventDefault();
+        if (this.state.videoPlayer.isPlaying()) {
+            this.state.videoCommands.execute('skip');
+        } else {
+            this.state.videoCommands.execute('play');
+        }
+    },
+
+    play: function() {
+        this.el
+            .removeClass('play')
+            .addClass('skip')
+            .attr('title', gettext('Skip'))
+            .find('.icon')
+            .removeClass('fa-play')
+            .addClass('fa-step-forward');
+        // Disable possibility to pause the video.
+        this.state.el.find('video').off('click');
+    }
+};
+
+export default PlaySkipControl;
diff --git a/xblocks_contrib/video/static/js/src/09_poster.js b/xblocks_contrib/video/static/js/src/09_poster.js
new file mode 100644
index 00000000..97e0cf38
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/09_poster.js
@@ -0,0 +1,62 @@
+'use strict';
+
+import _ from 'underscore';
+
+
+let VideoPoster = function(element, options) {
+    if (!(this instanceof VideoPoster)) {
+        return new VideoPoster(element, options);
+    }
+
+    _.bindAll(this, 'onClick', 'destroy');
+    this.element = element;
+    this.container = element.find('.video-player');
+    this.options = options || {};
+    this.initialize();
+};
+
+VideoPoster.moduleName = 'Poster';
+VideoPoster.prototype = {
+    template: _.template([
+        '<div class="video-pre-roll is-<%- type %> poster" ',
+        'style="background-image: url(<%- url %>)">',
+        '<button class="btn-play btn-pre-roll">',
+        '<img src="/static/images/play.png" alt="">',
+        '<span class="sr">', gettext('Play video'), '</span>',
+        '</button>',
+        '</div>'
+    ].join('')),
+
+    initialize: function() {
+        this.el = $(this.template({
+            url: this.options.poster.url,
+            type: this.options.poster.type
+        }));
+        this.element.addClass('is-pre-roll');
+        this.render();
+        this.bindHandlers();
+    },
+
+    bindHandlers: function() {
+        this.el.on('click', this.onClick);
+        this.element.on('destroy', this.destroy);
+    },
+
+    render: function() {
+        this.container.append(this.el);
+    },
+
+    onClick: function() {
+        if (_.isFunction(this.options.onClick)) {
+            this.options.onClick();
+        }
+        this.destroy();
+    },
+
+    destroy: function() {
+        this.element.off('destroy', this.destroy).removeClass('is-pre-roll');
+        this.el.remove();
+    }
+};
+
+export default VideoPoster;
diff --git a/xblocks_contrib/video/static/js/src/09_save_state_plugin.js b/xblocks_contrib/video/static/js/src/09_save_state_plugin.js
new file mode 100644
index 00000000..c5de6262
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/09_save_state_plugin.js
@@ -0,0 +1,131 @@
+'use strict';
+
+import _ from 'underscore';
+import { convert, format, formatFull } from './utils/time.js';
+
+
+/**
+ * Save state module.
+ * @exports video/09_save_state_plugin.js
+ * @constructor
+ * @param {Object} state The object containing the state of the video
+ * @param {Object} i18n The object containing strings with translations.
+ * @param {Object} options
+ * @return {jquery Promise}
+ */
+let SaveStatePlugin = function(state, i18n, options) {
+    if (!(this instanceof SaveStatePlugin)) {
+        return new SaveStatePlugin(state, i18n, options);
+    }
+
+    _.bindAll(this, 'onSpeedChange', 'onAutoAdvanceChange', 'saveStateHandler', 'bindUnloadHandler', 'onUnload',
+        'onYoutubeAvailability', 'onLanguageChange', 'destroy');
+    this.state = state;
+    this.options = _.extend({events: []}, options);
+    this.state.videoSaveStatePlugin = this;
+    this.i18n = i18n;
+    this.initialize();
+
+    return $.Deferred().resolve().promise();
+};
+
+SaveStatePlugin.moduleName = 'SaveStatePlugin';
+SaveStatePlugin.prototype = {
+    destroy: function() {
+        this.state.el.off(this.events).off('destroy', this.destroy);
+        $(window).off('unload', this.onUnload);
+        delete this.state.videoSaveStatePlugin;
+    },
+
+    initialize: function() {
+        this.events = {
+            speedchange: this.onSpeedChange,
+            autoadvancechange: this.onAutoAdvanceChange,
+            play: this.bindUnloadHandler,
+            'pause destroy': this.saveStateHandler,
+            'language_menu:change': this.onLanguageChange,
+            youtube_availability: this.onYoutubeAvailability
+        };
+        this.bindHandlers();
+    },
+
+    bindHandlers: function() {
+        if (this.options.events.length) {
+            _.each(this.options.events, function(eventName) {
+                let callback;
+                if (_.has(this.events, eventName)) {
+                    callback = this.events[eventName];
+                    this.state.el.on(eventName, callback);
+                }
+            }, this);
+        } else {
+            this.state.el.on(this.events);
+        }
+        this.state.el.on('destroy', this.destroy);
+    },
+
+    bindUnloadHandler: _.once(function() {
+        $(window).on('unload.video', this.onUnload);
+    }),
+
+    onSpeedChange: function(event, newSpeed) {
+        this.saveState(true, {speed: newSpeed});
+        this.state.storage.setItem('speed', newSpeed, true);
+        this.state.storage.setItem('general_speed', newSpeed);
+    },
+
+    onAutoAdvanceChange: function(event, enabled) {
+        this.saveState(true, {auto_advance: enabled});
+        this.state.storage.setItem('auto_advance', enabled);
+    },
+
+    saveStateHandler: function() {
+        this.saveState(true);
+    },
+
+    onUnload: function() {
+        this.saveState();
+    },
+
+    onLanguageChange: function(event, langCode) {
+        this.state.storage.setItem('language', langCode);
+    },
+
+    onYoutubeAvailability: function(event, youtubeIsAvailable) {
+        // Compare what the client-side code has determined Youtube
+        // availability to be (true/false) vs. what the LMS recorded for
+        // this user. The LMS will assume YouTube is available by default.
+        if (youtubeIsAvailable !== this.state.config.recordedYoutubeIsAvailable) {
+            this.saveState(true, {youtube_is_available: youtubeIsAvailable});
+        }
+    },
+
+    saveState: function(async, data) {
+        if (this.state.config.saveStateEnabled) {
+            if (!($.isPlainObject(data))) {
+                data = {
+                    saved_video_position: this.state.videoPlayer.currentTime
+                };
+            }
+
+            if (data.speed) {
+                this.state.storage.setItem('speed', data.speed, true);
+            }
+
+            if (_.has(data, 'saved_video_position')) {
+                this.state.storage.setItem('savedVideoPosition', data.saved_video_position, true);
+                data.saved_video_position = formatFull(data.saved_video_position);
+            }
+
+            $.ajax({
+                url: this.state.config.saveStateUrl,
+                type: 'POST',
+                async: !!async,
+                dataType: 'json',
+                data: data
+            });
+        }
+    }
+};
+
+export default SaveStatePlugin;
diff --git a/xblocks_contrib/video/static/js/src/09_skip_control.js b/xblocks_contrib/video/static/js/src/09_skip_control.js
new file mode 100644
index 00000000..17138e5f
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/09_skip_control.js
@@ -0,0 +1,72 @@
+'use strict';
+
+import _ from 'underscore';
+
+
+/**
+ * Video skip control module.
+ * @exports video/09_skip_control.js
+ * @constructor
+ * @param {Object} state The object containing the state of the video
+ * @param {Object} i18n The object containing strings with translations.
+ * @return {jquery Promise}
+ */
+let SkipControl = function(state, i18n) {
+    if (!(this instanceof SkipControl)) {
+        return new SkipControl(state, i18n);
+    }
+
+    _.bindAll(this, 'onClick', 'render', 'destroy');
+    this.state = state;
+    this.state.videoSkipControl = this;
+    this.i18n = i18n;
+    this.initialize();
+
+    return $.Deferred().resolve().promise();
+};
+
+SkipControl.prototype = {
+    template: [
+        '<button class="control video_control skip skip-control" aria-disabled="false" title="',
+        gettext('Do not show again'),
+        '">',
+        '<span class="icon fa fa-step-forward" aria-hidden="true"></span>',
+        '</button>'
+    ].join(''),
+
+    destroy: function() {
+        this.el.remove();
+        this.state.el.off('.skip');
+        delete this.state.videoSkipControl;
+    },
+
+    /** Initializes the module. */
+    initialize: function() {
+        this.el = $(this.template);
+        this.bindHandlers();
+    },
+
+    /**
+     * Creates any necessary DOM elements, attach them, and set their,
+     * initial configuration.
+     */
+    render: function() {
+        this.state.el.find('.vcr .control').after(this.el);
+    },
+
+    /** Bind any necessary function callbacks to DOM events. */
+    bindHandlers: function() {
+        this.el.on('click', this.onClick);
+        this.state.el.on({
+            'play.skip': _.once(this.render),
+            'destroy.skip': this.destroy
+        });
+    },
+
+    onClick: function(event) {
+        event.preventDefault();
+        this.state.videoCommands.execute('skip', true);
+    }
+};
+
+export default SkipControl;
diff --git a/xblocks_contrib/video/static/js/src/09_video_caption.js b/xblocks_contrib/video/static/js/src/09_video_caption.js
new file mode 100644
index 00000000..309abb70
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/09_video_caption.js
@@ -0,0 +1,1459 @@
+// VideoCaption module.
+
+import Sjson from './00_sjson.js';
+import AsyncProcess from './00_async_process.js';
+import HtmlUtils from 'edx-ui-toolkit/js/utils/html-utils';
+import Draggabilly from 'draggabilly';
+import { convert } from './utils/time.js';
+import _ from 'underscore';
+
+'use strict';
+
+/**
+ * @desc VideoCaption module exports a function.
+ *
+ * @type {function}
+ * @access public
+ *
+ * @param {object} state - The object containing the state of the video
+ *     player. All other modules, their parameters, public variables, etc.
+ *     are available via this object.
+ *
+ * @this {object} The global window object.
+ *
+ * @returns {jquery Promise}
+ */
+let VideoCaption = function(state) {
+    if (!(this instanceof VideoCaption)) {
+        return new VideoCaption(state);
+    }
+
+    _.bindAll(this, 'toggleTranscript', 'onMouseEnter', 'onMouseLeave', 'onMovement',
+        'onContainerMouseEnter', 'onContainerMouseLeave', 'fetchCaption',
+        'onResize', 'pause', 'play', 'onCaptionUpdate', 'onCaptionHandler', 'destroy',
+        'handleKeypress', 'handleKeypressLink', 'openLanguageMenu', 'closeLanguageMenu',
+        'previousLanguageMenuItem', 'nextLanguageMenuItem', 'handleCaptionToggle',
+        'showClosedCaptions', 'hideClosedCaptions', 'toggleClosedCaptions',
+        'updateCaptioningCookie', 'handleCaptioningCookie', 'handleTranscriptToggle',
+        'listenForDragDrop', 'setTranscriptVisibility', 'updateTranscriptCookie',
+        'updateGoogleDisclaimer', 'toggleGoogleDisclaimer', 'updateProblematicCaptionsContent'
+    );
+
+    this.state = state;
+    this.state.videoCaption = this;
+    this.renderElements();
+    this.handleCaptioningCookie();
+    this.setTranscriptVisibility();
+    this.listenForDragDrop();
+
+    return $.Deferred().resolve().promise();
+};
+
+VideoCaption.prototype = {
+
+    destroy: function() {
+        this.state.el
+            .off({
+                'caption:fetch': this.fetchCaption,
+                'caption:resize': this.onResize,
+                'caption:update': this.onCaptionUpdate,
+                ended: this.pause,
+                fullscreen: this.onResize,
+                pause: this.pause,
+                play: this.play,
+                destroy: this.destroy
+            })
+            .removeClass('is-captions-rendered');
+        if (this.fetchXHR && this.fetchXHR.abort) {
+            this.fetchXHR.abort();
+        }
+        if (this.availableTranslationsXHR && this.availableTranslationsXHR.abort) {
+            this.availableTranslationsXHR.abort();
+        }
+        this.subtitlesEl.remove();
+        this.container.remove();
+        delete this.state.videoCaption;
+    },
+    /**
+    * @desc Initiate rendering of elements, and set their initial configuration.
+    *
+    */
+    renderElements: function() {
+        let languages = this.state.config.transcriptLanguages;
+
+        let langHtml = HtmlUtils.interpolateHtml(
+            HtmlUtils.HTML(
+                [
+                    '<div class="grouped-controls">',
+                    '<button class="control toggle-captions" aria-disabled="false">',
+                    '<span class="icon fa fa-cc" aria-hidden="true"></span>',
+                    '</button>',
+                    '<button class="control toggle-transcript" aria-disabled="false">',
+                    '<span class="icon fa fa-quote-left" aria-hidden="true"></span>',
+                    '</button>',
+                    '<div class="lang menu-container" role="application">',
+                    '<p class="sr instructions" id="lang-instructions-{courseId}"></p>',
+                    '<button class="control language-menu" aria-disabled="false"',
+                    'aria-describedby="lang-instructions-{courseId}" ',
+                    'title="{langTitle}">',
+                    '<span class="icon fa fa-caret-left" aria-hidden="true"></span>',
+                    '</button>',
+                    '</div>',
+                    '</div>'
+                ].join('')),
+            {
+                langTitle: gettext('Open language menu'),
+                courseId: this.state.id
+            }
+        );
+
+        let subtitlesHtml = HtmlUtils.interpolateHtml(
+            HtmlUtils.HTML(
+                [
+                    '<div class="subtitles" role="region" id="transcript-{courseId}">',
+                    '<h3 id="transcript-label-{courseId}" class="transcript-title sr"></h3>',
+                    '<ol id="transcript-captions-{courseId}" class="subtitles-menu" lang="{courseLang}"></ol>',
+                    '</div>'
+                ].join('')),
+            {
+                courseId: this.state.id,
+                courseLang: this.state.lang
+            }
+        );
+
+        this.loaded = false;
+        this.subtitlesEl = $(HtmlUtils.ensureHtml(subtitlesHtml).toString());
+        this.subtitlesMenuEl = this.subtitlesEl.find('.subtitles-menu');
+        this.container = $(HtmlUtils.ensureHtml(langHtml).toString());
+        this.captionControlEl = this.container.find('.toggle-captions');
+        this.captionDisplayEl = this.state.el.find('.closed-captions');
+        this.transcriptControlEl = this.container.find('.toggle-transcript');
+        this.languageChooserEl = this.container.find('.lang');
+        this.menuChooserEl = this.languageChooserEl.parent();
+
+        if (_.keys(languages).length) {
+            this.renderLanguageMenu(languages);
+            this.fetchCaption();
+        }
+    },
+
+    /**
+    * @desc Bind any necessary function callbacks to DOM events (click,
+    *     mousemove, etc.).
+    *
+    */
+    bindHandlers: function() {
+        let state = this.state,
+            events = [
+                'mouseover', 'mouseout', 'mousedown', 'click', 'focus', 'blur',
+                'keydown'
+            ].join(' ');
+
+        this.captionControlEl.on({
+            click: this.toggleClosedCaptions,
+            keydown: this.handleCaptionToggle
+        });
+        this.transcriptControlEl.on({
+            click: this.toggleTranscript,
+            keydown: this.handleTranscriptToggle
+        });
+        this.subtitlesMenuEl.on({
+            mouseenter: this.onMouseEnter,
+            mouseleave: this.onMouseLeave,
+            mousemove: this.onMovement,
+            mousewheel: this.onMovement,
+            DOMMouseScroll: this.onMovement
+        })
+            .on(events, 'span[data-index]', this.onCaptionHandler);
+        this.container.on({
+            mouseenter: this.onContainerMouseEnter,
+            mouseleave: this.onContainerMouseLeave
+        });
+
+        if (this.showLanguageMenu) {
+            this.languageChooserEl.on({
+                keydown: this.handleKeypress
+            }, '.language-menu');
+
+            this.languageChooserEl.on({
+                keydown: this.handleKeypressLink
+            }, '.control-lang');
+        }
+
+        state.el
+            .on({
+                'caption:fetch': this.fetchCaption,
+                'caption:resize': this.onResize,
+                'caption:update': this.onCaptionUpdate,
+                ended: this.pause,
+                fullscreen: this.onResize,
+                pause: this.pause,
+                play: this.play,
+                destroy: this.destroy
+            });
+
+        if ((state.videoType === 'html5') && (state.config.autohideHtml5)) {
+            this.subtitlesMenuEl.on('scroll', state.videoControl.showControls);
+        }
+    },
+
+    onCaptionUpdate: function(event, time) {
+        this.updatePlayTime(time);
+    },
+
+    handleCaptionToggle: function(event) {
+        let KEY = $.ui.keyCode,
+            keyCode = event.keyCode;
+
+        switch (keyCode) {
+        case KEY.SPACE:
+        case KEY.ENTER:
+            event.preventDefault();
+            this.toggleClosedCaptions(event);
+        // no default
+        }
+    },
+
+    handleTranscriptToggle: function(event) {
+        let KEY = $.ui.keyCode,
+            keyCode = event.keyCode;
+
+        switch (keyCode) {
+        case KEY.SPACE:
+        case KEY.ENTER:
+            event.preventDefault();
+            this.toggleTranscript(event);
+        // no default
+        }
+    },
+
+    handleKeypressLink: function(event) {
+        let KEY = $.ui.keyCode,
+            keyCode = event.keyCode,
+            focused, index, total;
+
+        switch (keyCode) {
+        case KEY.UP:
+            event.preventDefault();
+            focused = $(':focus').parent();
+            index = this.languageChooserEl.find('li').index(focused);
+            total = this.languageChooserEl.find('li').size() - 1;
+
+            this.previousLanguageMenuItem(event, index);
+            break;
+
+        case KEY.DOWN:
+            event.preventDefault();
+            focused = $(':focus').parent();
+            index = this.languageChooserEl.find('li').index(focused);
+            total = this.languageChooserEl.find('li').size() - 1;
+
+            this.nextLanguageMenuItem(event, index, total);
+            break;
+
+        case KEY.ESCAPE:
+            this.closeLanguageMenu(event);
+            break;
+
+        case KEY.ENTER:
+        case KEY.SPACE:
+            return true;
+        // no default
+        }
+        return true;
+    },
+
+    handleKeypress: function(event) {
+        let KEY = $.ui.keyCode,
+            keyCode = event.keyCode;
+
+        switch (keyCode) {
+        // Handle keypresses
+        case KEY.ENTER:
+        case KEY.SPACE:
+        case KEY.UP:
+            event.preventDefault();
+            this.openLanguageMenu(event);
+            break;
+
+        case KEY.ESCAPE:
+            this.closeLanguageMenu(event);
+            break;
+        // no default
+        }
+
+        return event.keyCode === KEY.TAB;
+    },
+
+    nextLanguageMenuItem: function(event, index, total) {
+        event.preventDefault();
+
+        if (event.altKey || event.shiftKey) {
+            return true;
+        }
+
+        if (index === total) {
+            this.languageChooserEl
+                .find('.control-lang').first()
+                .focus();
+        } else {
+            this.languageChooserEl
+                .find('li:eq(' + index + ')')
+                .next()
+                .find('.control-lang')
+                .focus();
+        }
+
+        return false;
+    },
+
+    previousLanguageMenuItem: function(event, index) {
+        event.preventDefault();
+
+        if (event.altKey || event.shiftKey) {
+            return true;
+        }
+
+        if (index === 0) {
+            this.languageChooserEl
+                .find('.control-lang').last()
+                .focus();
+        } else {
+            this.languageChooserEl
+                .find('li:eq(' + index + ')')
+                .prev()
+                .find('.control-lang')
+                .focus();
+        }
+
+        return false;
+    },
+
+    openLanguageMenu: function(event) {
+        let button = this.languageChooserEl,
+            menu = button.parent().find('.menu');
+
+        event.preventDefault();
+
+        button
+            .addClass('is-opened');
+
+        menu
+            .find('.control-lang').last()
+            .focus();
+    },
+
+    closeLanguageMenu: function(event) {
+        let button = this.languageChooserEl;
+        event.preventDefault();
+
+        button
+            .removeClass('is-opened')
+            .find('.language-menu')
+            .focus();
+    },
+
+    onCaptionHandler: function(event) {
+        switch (event.type) {
+        case 'mouseover':
+        case 'mouseout':
+            this.captionMouseOverOut(event);
+            break;
+        case 'mousedown':
+            this.captionMouseDown(event);
+            break;
+        case 'click':
+            this.captionClick(event);
+            break;
+        case 'focusin':
+            this.captionFocus(event);
+            break;
+        case 'focusout':
+            this.captionBlur(event);
+            break;
+        case 'keydown':
+            this.captionKeyDown(event);
+            break;
+        // no default
+        }
+    },
+
+    /**
+    * @desc Opens language menu.
+    *
+    * @param {jquery Event} event
+    */
+    onContainerMouseEnter: function(event) {
+        event.preventDefault();
+        $(event.currentTarget).find('.lang').addClass('is-opened');
+
+        // We only want to fire the analytics event if a menu is
+        // present instead of on the container hover, since it wraps
+        // the "CC" and "Transcript" buttons as well.
+        if ($(event.currentTarget).find('.lang').length) {
+            this.state.el.trigger('language_menu:show');
+        }
+    },
+
+    /**
+    * @desc Closes language menu.
+    *
+    * @param {jquery Event} event
+    */
+    onContainerMouseLeave: function(event) {
+        event.preventDefault();
+        $(event.currentTarget).find('.lang').removeClass('is-opened');
+
+        // We only want to fire the analytics event if a menu is
+        // present instead of on the container hover, since it wraps
+        // the "CC" and "Transcript" buttons as well.
+        if ($(event.currentTarget).find('.lang').length) {
+            this.state.el.trigger('language_menu:hide');
+        }
+    },
+
+    /**
+    * @desc Freezes moving of captions when mouse is over them.
+    *
+    * @param {jquery Event} event
+    */
+    onMouseEnter: function() {
+        if (this.frozen) {
+            clearTimeout(this.frozen);
+        }
+
+        this.frozen = setTimeout(
+            this.onMouseLeave,
+            this.state.config.captionsFreezeTime
+        );
+    },
+
+    /**
+    * @desc Unfreezes moving of captions when mouse go out.
+    *
+    * @param {jquery Event} event
+    */
+    onMouseLeave: function() {
+        if (this.frozen) {
+            clearTimeout(this.frozen);
+        }
+
+        this.frozen = null;
+
+        if (this.playing) {
+            this.scrollCaption();
+        }
+    },
+
+    /**
+    * @desc Freezes moving of captions when mouse is moving over them.
+    *
+    * @param {jquery Event} event
+    */
+    onMovement: function() {
+        this.onMouseEnter();
+    },
+
+    /**
+     * @desc Gets the correct start and end times from the state configuration
+     *
+     * @returns {array} if [startTime, endTime] are defined
+     */
+    getStartEndTimes: function() {
+        // due to the way config.startTime/endTime are
+        // processed in 03_video_player.js, we assume
+        // endTime can be an integer or null,
+        // and startTime is an integer > 0
+        let config = this.state.config;
+        let startTime = config.startTime * 1000;
+        let endTime = (config.endTime !== null) ? config.endTime * 1000 : null;
+        return [startTime, endTime];
+    },
+
+    /**
+     * @desc Gets captions within the start / end times stored within this.state.config
+     *
+     * @returns {object} {start, captions} parallel arrays of
+     *    start times and corresponding captions
+     */
+    getBoundedCaptions: function() {
+        // get start and caption. If startTime and endTime
+        // are specified, filter by that range.
+        let times = this.getStartEndTimes();
+        // eslint-disable-next-line prefer-spread
+        let results = this.sjson.filter.apply(this.sjson, times);
+        let start = results.start;
+        let captions = results.captions;
+
+        return {
+            start: start,
+            captions: captions
+        };
+    },
+
+    /**
+    * @desc Sets whether or not the Google disclaimer should be shown based on captions
+    * being AI generated, and shows/hides based on the above and if ClosedCaptions are being shown.
+    *
+    * @param {array} captions List of captions for the video.
+    *
+    * @returns {boolean}
+    */
+    updateGoogleDisclaimer: function(captions) {
+        const aIGeneratedSpanText = '<span id="captions-ai-generated"',
+              aiProviderRegexp = /data\-provider=["'](?<provider>\w+)["']/;
+        let self = this,
+            state = this.state,
+            aiGeneratedSpan = captions.find(caption => caption.includes(aIGeneratedSpanText)),
+            captionsAIGenerated = !(aiGeneratedSpan === undefined),
+            aiCaptionProviderIsGoogle = true;
+
+        if (captionsAIGenerated) {
+            const providerMatch = aiProviderRegexp.exec(aiGeneratedSpan);
+            if (providerMatch !== null) {
+                aiCaptionProviderIsGoogle = providerMatch.groups['provider'] === 'gcp';
+            }
+            // If there is no provider tag, it was generated before we added those,
+            // so it must be Google
+        }
+        // This field is whether or not, in general, this video should show the google disclaimer
+        self.shouldShowGoogleDisclaimer = captionsAIGenerated && aiCaptionProviderIsGoogle;
+        // Should we, right now, on load, show the google disclaimer
+        self.toggleGoogleDisclaimer(!self.hideCaptionsOnLoad && !state.captionsHidden);
+    },
+
+    /**
+    * @desc Show or hide the google translate disclaimer based on the passed param
+    *       and whether or not we are currently showing a google translated transcript.
+    * @param {boolean} [show] Show if true, hide if false - if we are showing a google
+    *                         translated transcript. If not, this will always hide.
+    */
+    toggleGoogleDisclaimer: function(show) {
+        let self = this,
+            state = this.state;
+        if (show && self.shouldShowGoogleDisclaimer) {
+            state.el.find('.google-disclaimer').show();
+        } else {
+            state.el.find('.google-disclaimer').hide();
+        }
+    },
+
+    /**
+    * @desc Replaces content in a caption
+    *
+    * @param {array} captions List of captions for the video.
+    * @param {string} content content to be replaced
+    * @param {string} replacementContent the replace string
+    *
+    * @returns {array} captions List of captions for the video.
+    */
+    updateProblematicCaptionsContent: function(captions, content = '', replacementContent = '') {
+        let updatedCaptions = captions.map(caption => caption.replace(content, replacementContent));
+
+        return updatedCaptions;
+    },
+
+    /**
+    * @desc Fetch the caption file specified by the user. Upon successful
+    *     receipt of the file, the captions will be rendered.
+    * @param {boolean} [fetchWithYoutubeId] Fetch youtube captions if true.
+    * @returns {boolean}
+    *     true: The user specified a caption file. NOTE: if an error happens
+    *         while the specified file is being retrieved (for example the
+    *         file is missing on the server), this function will still return
+    *         true.
+    *     false: No caption file was specified, or an empty string was
+    *         specified for the Youtube type player.
+    */
+    fetchCaption: function(fetchWithYoutubeId) {
+        let self = this,
+            state = this.state,
+            language = state.getCurrentLanguage(),
+            url = state.config.transcriptTranslationUrl.replace('__lang__', language),
+            data, youtubeId;
+
+        if (this.loaded) {
+            this.hideCaptions(false);
+        }
+
+        if (this.fetchXHR && this.fetchXHR.abort) {
+            this.fetchXHR.abort();
+        }
+
+        if (state.videoType === 'youtube' || fetchWithYoutubeId) {
+            try {
+                youtubeId = state.youtubeId('1.0');
+            } catch (err) {
+                youtubeId = null;
+            }
+
+            if (!youtubeId) {
+                return false;
+            }
+
+            data = {videoId: youtubeId};
+        }
+
+        state.el.removeClass('is-captions-rendered');
+        // Fetch the captions file. If no file was specified, or if an error
+        // occurred, then we hide the captions panel, and the "Transcript" button
+        this.fetchXHR = $.ajaxWithPrefix({
+            url: url,
+            notifyOnError: false,
+            data: data,
+            success: function(sjson) {
+                let results, start, captions;
+                self.sjson = new Sjson(sjson);
+                results = self.getBoundedCaptions();
+                start = results.start;
+                captions = results.captions;
+                let contentToReplace = CAPTIONS_CONTENT_TO_REPLACE,
+                    replacementContent = CAPTIONS_CONTENT_REPLACEMENT;
+
+                captions = self.updateProblematicCaptionsContent(captions, contentToReplace, replacementContent);
+
+                self.updateGoogleDisclaimer(captions);
+
+                if (self.loaded) {
+                    if (self.rendered) {
+                        self.renderCaption(start, captions);
+                        self.updatePlayTime(state.videoPlayer.currentTime);
+                    }
+                } else {
+                    if (state.isTouch) {
+                        HtmlUtils.setHtml(
+                            self.subtitlesEl.find('.subtitles-menu'),
+                            HtmlUtils.joinHtml(
+                                HtmlUtils.HTML('<li>'),
+                                gettext('Transcript will be displayed when you start playing the video.'),
+                                HtmlUtils.HTML('</li>')
+                            )
+                        );
+                    } else {
+                        self.renderCaption(start, captions);
+                    }
+                    self.hideCaptions(self.hideCaptionsOnLoad);
+                    HtmlUtils.append(
+                        self.state.el.find('.video-wrapper').parent(),
+                        HtmlUtils.HTML(self.subtitlesEl)
+                    );
+                    HtmlUtils.append(
+                        self.state.el.find('.secondary-controls'),
+                        HtmlUtils.HTML(self.container)
+                    );
+                    self.bindHandlers();
+                }
+
+                self.loaded = true;
+            },
+            error: function(jqXHR, textStatus, errorThrown) {
+                let canFetchWithYoutubeId;
+                console.log('[Video info]: ERROR while fetching captions.');
+                console.log(
+                    '[Video info]: STATUS:', textStatus
+                    + ', MESSAGE:', '' + errorThrown
+                );
+                // If initial list of languages has more than 1 item, check
+                // for availability other transcripts.
+                // If player mode is html5 and there are no initial languages
+                // then try to fetch youtube version of transcript with
+                // youtubeId.
+                if (_.keys(state.config.transcriptLanguages).length > 1) {
+                    self.fetchAvailableTranslations();
+                } else if (!fetchWithYoutubeId && state.videoType === 'html5') {
+                    canFetchWithYoutubeId = self.fetchCaption(true);
+                    if (canFetchWithYoutubeId) {
+                        console.log('[Video info]: Html5 mode fetching caption with youtubeId.'); // eslint-disable-line max-len, no-console
+                    } else {
+                        self.hideCaptions(true);
+                        self.languageChooserEl.hide();
+                        self.hideClosedCaptions();
+                    }
+                } else {
+                    self.hideCaptions(true);
+                    self.languageChooserEl.hide();
+                    self.hideClosedCaptions();
+                }
+            }
+        });
+
+        return true;
+    },
+
+    /**
+    * @desc Fetch the list of available language codes. Upon successful receipt
+    * the list of available languages will be updated.
+    *
+    * @returns {jquery Promise}
+    */
+    fetchAvailableTranslations: function() {
+        let self = this,
+            state = this.state;
+
+        this.availableTranslationsXHR = $.ajaxWithPrefix({
+            url: state.config.transcriptAvailableTranslationsUrl,
+            notifyOnError: false,
+            success: function(response) {
+                let currentLanguages = state.config.transcriptLanguages,
+                    newLanguages = _.pick(currentLanguages, response);
+
+                // Update property with available currently translations.
+                state.config.transcriptLanguages = newLanguages;
+                // Remove an old language menu.
+                self.container.find('.langs-list').remove();
+
+                if (_.keys(newLanguages).length) {
+                    self.renderLanguageMenu(newLanguages);
+                }
+            },
+            error: function() {
+                self.hideCaptions(true);
+                self.languageChooserEl.hide();
+            }
+        });
+
+        return this.availableTranslationsXHR;
+    },
+
+    /**
+    * @desc Recalculates and updates the height of the container of captions.
+    *
+    */
+    onResize: function() {
+        this.subtitlesEl
+            .find('.spacing').first()
+            .height(this.topSpacingHeight());
+
+        this.subtitlesEl
+            .find('.spacing').last()
+            .height(this.bottomSpacingHeight());
+
+        this.scrollCaption();
+        this.setSubtitlesHeight();
+    },
+
+    /**
+    * @desc Create any necessary DOM elements, attach them, and set their
+    *     initial configuration for the Language menu.
+    *
+    * @param {object} languages Dictionary where key is language code,
+    *     value - language label
+    *
+    */
+    renderLanguageMenu: function(languages) {
+        let self = this,
+            state = this.state,
+            $menu = $('<ol class="langs-list menu">'),
+            currentLang = state.getCurrentLanguage(),
+            $li, $link, linkHtml;
+
+        if (_.keys(languages).length < 2) {
+            // Remove the menu toggle button
+            self.container.find('.lang').remove();
+            return;
+        }
+
+        this.showLanguageMenu = true;
+
+        $.each(languages, function(code, label) {
+            $li = $('<li />', {'data-lang-code': code});
+            linkHtml = HtmlUtils.joinHtml(
+                HtmlUtils.HTML('<button class="control control-lang">'),
+                label,
+                HtmlUtils.HTML('</button>')
+            );
+            $link = $(linkHtml.toString());
+
+            if (currentLang === code) {
+                $li.addClass('is-active');
+                $link.attr('aria-pressed', 'true');
+            }
+
+            $li.append($link);
+            $menu.append($li);
+        });
+
+        HtmlUtils.append(
+            this.languageChooserEl,
+            HtmlUtils.HTML($menu)
+        );
+
+        $menu.on('click', '.control-lang', function(e) {
+            let el = $(e.currentTarget).parent(),
+                captionState = self.state,
+                langCode = el.data('lang-code');
+
+            if (captionState.lang !== langCode) {
+                captionState.lang = langCode;
+                el.addClass('is-active')
+                    .siblings('li')
+                    .removeClass('is-active')
+                    .find('.control-lang')
+                    .attr('aria-pressed', 'false');
+
+                $(e.currentTarget).attr('aria-pressed', 'true');
+
+                captionState.el.trigger('language_menu:change', [langCode]);
+                self.fetchCaption();
+
+                // update the closed-captions lang attribute
+                self.captionDisplayEl.attr('lang', langCode);
+
+                // update the transcript lang attribute
+                self.subtitlesMenuEl.attr('lang', langCode);
+                self.closeLanguageMenu(e);
+            }
+        });
+    },
+
+    /**
+    * @desc Create any necessary DOM elements, attach them, and set their
+    *     initial configuration.
+    *
+    * @param {jQuery element} container Element in which captions will be
+    *     inserted.
+    * @param {array} start List of start times for the video.
+    * @param {array} captions List of captions for the video.
+    * @returns {object} jQuery's Promise object
+    *
+    */
+    buildCaptions: function(container, start, captions) {
+        let process = function(text, index) {
+            let $spanEl = $('<span>', {
+                role: 'link',
+                'data-index': index,
+                'data-start': start[index],
+                tabindex: 0
+            });
+
+            HtmlUtils.setHtml($($spanEl), HtmlUtils.HTML(text.toString()));
+
+            return $spanEl.wrap('<li>').parent()[0]; // xss-lint: disable=javascript-jquery-insertion
+        };
+
+        return AsyncProcess.array(captions, process).done(function(list) {
+            HtmlUtils.append(
+                container,
+                HtmlUtils.HTML(list)
+            );
+        });
+    },
+
+    /**
+    * @desc Initiates creating of captions and set their initial configuration.
+    *
+    * @param {array} start List of start times for the video.
+    * @param {array} captions List of captions for the video.
+    *
+    */
+    renderCaption: function(start, captions) {
+        let self = this;
+
+        let onRender = function() {
+            self.addPaddings();
+            // Enables or disables automatic scrolling of the captions when the
+            // video is playing. This feature has to be disabled when tabbing
+            // through them as it interferes with that action. Initially, have
+            // this flag enabled as we assume mouse use. Then, if the first
+            // caption (through forward tabbing) or the last caption (through
+            // backwards tabbing) gets the focus, disable that feature.
+            // Re-enable it if tabbing then cycles out of the the captions.
+            self.autoScrolling = true;
+            // Keeps track of where the focus is situated in the array of
+            // captions. Used to implement the automatic scrolling behavior and
+            // decide if the outline around a caption has to be hidden or shown
+            // on a mouseenter or mouseleave. Initially, no caption has the
+            // focus, set the index to -1.
+            self.currentCaptionIndex = -1;
+            // Used to track if the focus is coming from a click or tabbing. This
+            // has to be known to decide if, when a caption gets the focus, an
+            // outline has to be drawn (tabbing) or not (mouse click).
+            self.isMouseFocus = false;
+            self.rendered = true;
+            self.state.el.addClass('is-captions-rendered');
+
+            self.subtitlesEl
+                .attr('aria-label', gettext('Activating a link in this group will skip to the corresponding point in the video.')); // eslint-disable-line max-len
+
+            self.subtitlesEl.find('.transcript-title')
+                .text(gettext('Video transcript'));
+
+            self.subtitlesEl.find('.transcript-start')
+                .text(gettext('Start of transcript. Skip to the end.'))
+                .attr('lang', $('html').attr('lang'));
+
+            self.subtitlesEl.find('.transcript-end')
+                .text(gettext('End of transcript. Skip to the start.'))
+                .attr('lang', $('html').attr('lang'));
+
+            self.container.find('.menu-container .instructions')
+                .text(gettext('Press the UP arrow key to enter the language menu then use UP and DOWN arrow keys to navigate language options. Press ENTER to change to the selected language.')); // eslint-disable-line max-len
+        };
+
+        this.rendered = false;
+        this.subtitlesMenuEl.empty();
+        this.setSubtitlesHeight();
+        this.buildCaptions(this.subtitlesMenuEl, start, captions).done(onRender);
+    },
+
+    /**
+    * @desc Sets top and bottom spacing height and make sure they are taken
+    *     out of the tabbing order.
+    *
+    */
+    addPaddings: function() {
+        let topSpacer = HtmlUtils.interpolateHtml(
+            HtmlUtils.HTML([
+                '<li class="spacing" style="height: {height}px">',
+                        '<a href="#transcript-end-{id}" id="transcript-start-{id}" class="transcript-start"></a>', // eslint-disable-line max-len, indent
+                '</li>'
+            ].join('')),
+            {
+                id: this.state.id,
+                height: this.topSpacingHeight()
+            }
+        );
+
+        let bottomSpacer = HtmlUtils.interpolateHtml(
+            HtmlUtils.HTML([
+                '<li class="spacing" style="height: {height}px">',
+                        '<a href="#transcript-start-{id}" id="transcript-end-{id}" class="transcript-end"></a>', // eslint-disable-line max-len, indent
+                '</li>'
+            ].join('')),
+            {
+                id: this.state.id,
+                height: this.bottomSpacingHeight()
+            }
+        );
+
+        HtmlUtils.prepend(
+            this.subtitlesMenuEl,
+            topSpacer
+        );
+
+        HtmlUtils.append(
+            this.subtitlesMenuEl,
+            bottomSpacer
+        );
+    },
+
+    /**
+    * @desc
+    * On mouseOver: Hides the outline of a caption that has been tabbed to.
+    * On mouseOut: Shows the outline of a caption that has been tabbed to.
+    *
+    * @param {jquery Event} event
+    *
+    */
+    captionMouseOverOut: function(event) {
+        let $caption = $(event.target),
+            captionIndex = parseInt($caption.attr('data-index'), 10);
+
+        if (captionIndex === this.currentCaptionIndex) {
+            if (event.type === 'mouseover') {
+                $caption.removeClass('focused');
+            } else { // mouseout
+                $caption.addClass('focused');
+            }
+        }
+    },
+
+    /**
+    * @desc Handles mousedown event on concrete caption.
+    *
+    * @param {jquery Event} event
+    *
+    */
+    captionMouseDown: function(event) {
+        let $caption = $(event.target);
+
+        this.isMouseFocus = true;
+        this.autoScrolling = true;
+        $caption.removeClass('focused');
+        this.currentCaptionIndex = -1;
+    },
+
+    /**
+    * @desc Handles click event on concrete caption.
+    *
+    * @param {jquery Event} event
+    *
+    */
+    captionClick: function(event) {
+        this.seekPlayer(event);
+    },
+
+    /**
+    * @desc Handles focus event on concrete caption.
+    *
+    * @param {jquery Event} event
+    *
+    */
+    captionFocus: function(event) {
+        let $caption = $(event.target),
+            container = $caption.parent(),
+            captionIndex = parseInt($caption.attr('data-index'), 10);
+        // If the focus comes from a mouse click, hide the outline, turn on
+        // automatic scrolling and set currentCaptionIndex to point outside of
+        // caption list (ie -1) to disable mouseenter, mouseleave behavior.
+        if (this.isMouseFocus) {
+            this.autoScrolling = true;
+            container.removeClass('focused');
+            this.currentCaptionIndex = -1;
+        } else {
+            // If the focus comes from tabbing, show the outline and turn off
+            // automatic scrolling.
+
+            this.currentCaptionIndex = captionIndex;
+            container.addClass('focused');
+            // The second and second to last elements turn automatic scrolling
+            // off again as it may have been enabled in captionBlur.
+            if (
+                captionIndex <= 1
+                || captionIndex >= this.sjson.getSize() - 2
+            ) {
+                this.autoScrolling = false;
+            }
+        }
+    },
+
+    /**
+    * @desc Handles blur event on concrete caption.
+    *
+    * @param {jquery Event} event
+    *
+    */
+    captionBlur: function(event) {
+        let $caption = $(event.target),
+            container = $caption.parent(),
+            captionIndex = parseInt($caption.attr('data-index'), 10);
+
+        container.removeClass('focused');
+        // If we are on first or last index, we have to turn automatic scroll
+        // on again when losing focus. There is no way to know in what
+        // direction we are tabbing. So we could be on the first element and
+        // tabbing back out of the captions or on the last element and tabbing
+        // forward out of the captions.
+        if (captionIndex === 0
+            || captionIndex === this.sjson.getSize() - 1) {
+            this.autoScrolling = true;
+        }
+    },
+
+    /**
+    * @desc Handles keydown event on concrete caption.
+    *
+    * @param {jquery Event} event
+    *
+    */
+    captionKeyDown: function(event) {
+        this.isMouseFocus = false;
+        if (event.which === 13) { // Enter key
+            this.seekPlayer(event);
+        }
+    },
+
+    /**
+    * @desc Scrolls caption container to make active caption visible.
+    *
+    */
+    scrollCaption: function() {
+        let el = this.subtitlesEl.find('.current:first');
+
+        // Automatic scrolling gets disabled if one of the captions has
+        // received focus through tabbing.
+        if (
+            !this.frozen
+            && el.length
+            && this.autoScrolling
+        ) {
+            this.subtitlesEl.scrollTo(
+                el,
+                {
+                    offset: -1 * this.calculateOffset(el)
+                }
+            );
+        }
+    },
+
+    /**
+    * @desc Updates flags on play
+    *
+    */
+    play: function() {
+        let captions, startAndCaptions, start;
+        if (this.loaded) {
+            if (!this.rendered) {
+                startAndCaptions = this.getBoundedCaptions();
+                start = startAndCaptions.start;
+                captions = startAndCaptions.captions;
+                this.renderCaption(start, captions);
+            }
+
+            this.playing = true;
+        }
+    },
+
+    /**
+    * @desc Updates flags on pause
+    *
+    */
+    pause: function() {
+        if (this.loaded) {
+            this.playing = false;
+        }
+    },
+
+    /**
+    * @desc Updates captions UI on paying.
+    *
+    * @param {number} time Time in seconds.
+    *
+    */
+    updatePlayTime: function(time) {
+        let state = this.state,
+            params, newIndex, times;
+
+        if (this.loaded) {
+            if (state.isFlashMode()) {
+                time = convert(time, state.speed, '1.0');
+            }
+
+            time = Math.round(time * 1000 + 100);
+            times = this.getStartEndTimes();
+            // if start and end times are defined, limit search.
+            // else, use the entire list of video captions
+            params = [time].concat(times);
+            // eslint-disable-next-line prefer-spread
+            newIndex = this.sjson.search.apply(this.sjson, params);
+
+            if (
+                typeof newIndex !== 'undefined'
+                && newIndex !== -1
+                && this.currentIndex !== newIndex
+            ) {
+                if (typeof this.currentIndex !== 'undefined') {
+                    this.subtitlesEl
+                        .find('li.current')
+                        .attr('aria-current', 'false')
+                        .removeClass('current');
+                }
+                this.subtitlesEl
+                    .find("span[data-index='" + newIndex + "']")
+                    .parent()
+                    .attr('aria-current', 'true')
+                    .addClass('current');
+
+                this.currentIndex = newIndex;
+                this.captionDisplayEl.text(this.subtitlesEl.find("span[data-index='" + newIndex + "']").text());
+                this.scrollCaption();
+            }
+        }
+    },
+
+    /**
+    * @desc Sends log to the server on caption seek.
+    *
+    * @param {jquery Event} event
+    *
+    */
+    seekPlayer: function(event) {
+        let state = this.state,
+            time = parseInt($(event.target).data('start'), 10);
+
+        if (state.isFlashMode()) {
+            time = Math.round(Time.convert(time, '1.0', state.speed));
+        }
+
+        state.trigger(
+            'videoPlayer.onCaptionSeek',
+            {
+                type: 'onCaptionSeek',
+                time: time / 1000
+            }
+        );
+
+        event.preventDefault();
+    },
+
+    /**
+    * @desc Calculates offset for paddings.
+    *
+    * @param {jquery element} element Top or bottom padding element.
+    * @returns {number} Offset for the passed padding element.
+    *
+    */
+    calculateOffset: function(element) {
+        return this.captionHeight() / 2 - element.height() / 2;
+    },
+
+    /**
+    * @desc Calculates offset for the top padding element.
+    *
+    * @returns {number} Offset for the passed top padding element.
+    *
+    */
+    topSpacingHeight: function() {
+        return this.calculateOffset(
+            this.subtitlesEl.find('li:not(.spacing)').first()
+        );
+    },
+
+    /**
+    * @desc Calculates offset for the bottom padding element.
+    *
+    * @returns {number} Offset for the passed bottom padding element.
+    *
+    */
+    bottomSpacingHeight: function() {
+        return this.calculateOffset(
+            this.subtitlesEl.find('li:not(.spacing)').last()
+        );
+    },
+
+    handleCaptioningCookie: function() {
+        if ($.cookie('show_closed_captions') === 'true') {
+            this.state.showClosedCaptions = true;
+            this.showClosedCaptions();
+
+            // keep it going until turned off
+            $.cookie('show_closed_captions', 'true', {
+                expires: 3650,
+                path: '/'
+            });
+        } else {
+            this.hideClosedCaptions();
+        }
+    },
+
+    toggleClosedCaptions: function(event) {
+        event.preventDefault();
+
+        if (this.state.el.hasClass('has-captions')) {
+            this.state.showClosedCaptions = false;
+            this.updateCaptioningCookie(false);
+            this.hideClosedCaptions();
+            this.toggleGoogleDisclaimer(false);
+        } else {
+            this.state.showClosedCaptions = true;
+            this.updateCaptioningCookie(true);
+            this.showClosedCaptions();
+            this.toggleGoogleDisclaimer(true);
+        }
+    },
+
+    showClosedCaptions: function() {
+        let text = gettext('Hide closed captions');
+        this.state.el.addClass('has-captions');
+
+        this.captionDisplayEl
+            .show()
+            .addClass('is-visible')
+            .attr('lang', this.state.lang);
+
+        this.captionControlEl
+            .addClass('is-active')
+            .attr('title', text)
+            .attr('aria-label', text);
+
+        if (this.subtitlesEl.find('.current').text()) {
+            this.captionDisplayEl
+                .text(this.subtitlesEl.find('.current').text());
+        } else {
+            this.captionDisplayEl
+                .text(gettext('(Caption will be displayed when you start playing the video.)'));
+        }
+
+        this.state.el.trigger('captions:show');
+    },
+
+    hideClosedCaptions: function() {
+        let text = gettext('Turn on closed captioning');
+        this.state.el.removeClass('has-captions');
+
+        this.captionDisplayEl
+            .hide()
+            .removeClass('is-visible');
+
+        this.captionControlEl
+            .removeClass('is-active')
+            .attr('title', text)
+            .attr('aria-label', text);
+
+        this.state.el.trigger('captions:hide');
+    },
+
+    updateCaptioningCookie: function(method) {
+        if (method) {
+            $.cookie('show_closed_captions', 'true', {
+                expires: 3650,
+                path: '/'
+            });
+        } else {
+            $.cookie('show_closed_captions', null, {
+                path: '/'
+            });
+        }
+    },
+
+    /**
+    * This runs when the video block is first rendered and sets the initial visibility
+    * of the transcript panel based on the value of the 'show_transcript' cookie and/or
+    * the block's showCaptions setting.
+    */
+    setTranscriptVisibility: function() {
+        let hideCaptionsOnRender = !this.state.config.showCaptions;
+
+        if ($.cookie('show_transcript') === 'true') {
+            this.hideCaptionsOnLoad = false;
+            // Keep it going until turned off.
+            this.updateTranscriptCookie(true);
+        } else if ($.cookie('show_transcript') === 'false') {
+            hideCaptionsOnRender = true;
+            this.hideCaptionsOnLoad = true;
+        } else {
+            this.hideCaptionsOnLoad = !this.state.config.showCaptions;
+        }
+
+        if (hideCaptionsOnRender) {
+            this.state.el.addClass('closed');
+        }
+    },
+
+    /**
+    * @desc Shows/Hides transcript on click `transcript` button
+    *
+    * @param {jquery Event} event
+    *
+    */
+    toggleTranscript: function(event) {
+        event.preventDefault();
+        if (this.state.el.hasClass('closed')) {
+            this.hideCaptions(false, true);
+            this.updateTranscriptCookie(true);
+        } else {
+            this.hideCaptions(true, true);
+            this.updateTranscriptCookie(false);
+        }
+    },
+
+    updateTranscriptCookie: function(showTranscript) {
+        if (showTranscript) {
+            $.cookie('show_transcript', 'true', {
+                expires: 3650,
+                path: '/'
+            });
+        } else {
+            $.cookie('show_transcript', 'false', {
+                path: '/'
+            });
+        }
+    },
+
+    listenForDragDrop: function() {
+        let captions = this.captionDisplayEl['0'];
+
+        if (typeof Draggabilly === 'function') {
+            // eslint-disable-next-line no-new
+            new Draggabilly(captions, {containment: true});
+        } else {
+            console.log('Closed captioning available but not draggable');
+        }
+    },
+
+    /**
+    * @desc Shows/Hides the transcript panel.
+    *
+    * @param {boolean} hideCaptions if `true` hides the transcript panel,
+    *     otherwise - show.
+    */
+    hideCaptions: function(hideCaptions, triggerEvent) {
+        let transcriptControlEl = this.transcriptControlEl,
+            self = this,
+            state = this.state,
+            text;
+
+        if (hideCaptions) {
+            state.captionsHidden = true;
+            state.el.addClass('closed');
+            text = gettext('Turn on transcripts');
+            if (triggerEvent) {
+                this.state.el.trigger('transcript:hide');
+            }
+
+            self.toggleGoogleDisclaimer(false);
+
+            transcriptControlEl
+                .removeClass('is-active')
+                .attr('title', gettext(text))
+                .attr('aria-label', text);
+        } else {
+            state.captionsHidden = false;
+            state.el.removeClass('closed');
+            this.scrollCaption();
+            text = gettext('Turn off transcripts');
+            if (triggerEvent) {
+                this.state.el.trigger('transcript:show');
+            }
+
+            self.toggleGoogleDisclaimer(true);
+
+            transcriptControlEl
+                .addClass('is-active')
+                .attr('title', gettext(text))
+                .attr('aria-label', text);
+        }
+
+        if (state.resizer) {
+            if (state.isFullScreen) {
+                state.resizer.setMode('both');
+            } else {
+                state.resizer.alignByWidthOnly();
+            }
+        }
+
+        this.setSubtitlesHeight();
+    },
+
+    /**
+    * @desc Return the caption container height.
+    *
+    * @returns {number} event Height of the container in pixels.
+    *
+    */
+    captionHeight: function() {
+        let state = this.state;
+        if (state.isFullScreen) {
+            return state.container.height() - state.videoFullScreen.height;
+        } else {
+            return state.container.height();
+        }
+    },
+
+    /**
+    * @desc Sets the height of the caption container element.
+    *
+    */
+    setSubtitlesHeight: function() {
+        let height = 0,
+            state = this.state;
+        // on page load captionHidden = undefined
+        if ((state.captionsHidden === undefined && this.hideCaptionsOnLoad)
+            || state.captionsHidden === true
+        ) {
+            // In case of html5 autoshowing subtitles, we adjust height of
+            // subs, by height of scrollbar.
+            height = state.el.find('.video-controls').height()
+                + 0.5 * state.el.find('.slider').height();
+            // Height of videoControl does not contain height of slider.
+            // css is set to absolute, to avoid yanking when slider
+            // autochanges its height.
+        }
+
+        this.subtitlesEl.css({
+            maxHeight: this.captionHeight() - height
+        });
+    }
+};
+
+export default VideoCaption;
diff --git a/xblocks_contrib/video/static/js/src/10_commands.js b/xblocks_contrib/video/static/js/src/10_commands.js
new file mode 100644
index 00000000..54c60937
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/10_commands.js
@@ -0,0 +1,108 @@
+'use strict';
+
+import _ from 'underscore';
+
+
+/**
+ * Video commands module.
+ * @exports video/10_commands.js
+ * @constructor
+ * @param {Object} state The object containing the state of the video
+ * @param {Object} i18n The object containing strings with translations.
+ * @return {jquery Promise}
+ */
+let VideoCommands = function(state, i18n) {
+    if (!(this instanceof VideoCommands)) {
+        return new VideoCommands(state, i18n);
+    }
+
+    _.bindAll(this, 'destroy');
+    this.state = state;
+    this.state.videoCommands = this;
+    this.i18n = i18n;
+    this.commands = [];
+    this.initialize();
+
+    return $.Deferred().resolve().promise();
+};
+
+VideoCommands.prototype = {
+    destroy: function() {
+        this.state.el.off('destroy', this.destroy);
+        delete this.state.videoCommands;
+    },
+
+    /** Initializes the module. */
+    initialize: function() {
+        this.commands = this.getCommands();
+        this.state.el.on('destroy', this.destroy);
+    },
+
+    execute: function(command) {
+        let args = [].slice.call(arguments, 1) || [];
+
+        if (_.has(this.commands, command)) {
+            this.commands[command].execute.apply(this, [this.state].concat(args));
+        } else {
+            console.log('Command "' + command + '" is not available.');
+        }
+    },
+
+    getCommands: function() {
+        let commands = {};
+        let commandsList = [
+            playCommand, pauseCommand, togglePlaybackCommand,
+            toggleMuteCommand, toggleFullScreenCommand, setSpeedCommand,
+            skipCommand
+        ];
+
+        _.each(commandsList, function(command) {
+            commands[command.name] = command;
+        }, this);
+
+        return commands;
+    }
+};
+
+let Command = function(name, execute) {
+    this.name = name;
+    this.execute = execute;
+};
+
+let playCommand = new Command('play', function(state) {
+    state.videoPlayer.play();
+});
+
+let pauseCommand = new Command('pause', function(state) {
+    state.videoPlayer.pause();
+});
+
+let togglePlaybackCommand = new Command('togglePlayback', function(state) {
+    if (state.videoPlayer.isPlaying()) {
+        pauseCommand.execute(state);
+    } else {
+        playCommand.execute(state);
+    }
+});
+
+let toggleMuteCommand = new Command('toggleMute', function(state) {
+    state.videoVolumeControl.toggleMute();
+});
+
+let toggleFullScreenCommand = new Command('toggleFullScreen', function(state) {
+    state.videoFullScreen.toggle();
+});
+
+let setSpeedCommand = new Command('speed', function(state, speed) {
+    state.videoSpeedControl.setSpeed(state.speedToString(speed));
+});
+
+let skipCommand = new Command('skip', function(state, doNotShowAgain) {
+    if (doNotShowAgain) {
+        state.videoBumper.skipAndDoNotShowAgain();
+    } else {
+        state.videoBumper.skip();
+    }
+});
+
+export default VideoCommands;
diff --git a/xblocks_contrib/video/static/js/src/10_main.js b/xblocks_contrib/video/static/js/src/10_main.js
new file mode 100644
index 00000000..7ed9d201
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/10_main.js
@@ -0,0 +1,133 @@
+'use strict';
+
+import VideoStorage from './00_video_storage.js';
+import initialize from './01_initialize.js';
+import FocusGrabber from './025_focus_grabber.js';
+import VideoAccessibleMenu from './035_video_accessible_menu.js';
+import VideoControl from './04_video_control.js';
+import VideoFullScreen from './04_video_full_screen.js';
+import VideoQualityControl from './05_video_quality_control.js';
+import VideoProgressSlider from './06_video_progress_slider.js';
+import VideoVolumeControl from './07_video_volume_control.js';
+import VideoSpeedControl from './08_video_speed_control.js';
+import VideoAutoAdvanceControl from './08_video_auto_advance_control.js';
+import VideoCaption from './09_video_caption.js';
+import VideoPlayPlaceholder from './09_play_placeholder.js';
+import VideoPlayPauseControl from './09_play_pause_control.js';
+import VideoPlaySkipControl from './09_play_skip_control.js';
+import VideoSkipControl from './09_skip_control.js';
+import VideoBumper from './09_bumper.js';
+import VideoSaveStatePlugin from './09_save_state_plugin.js';
+import VideoEventsPlugin from './09_events_plugin.js';
+import VideoEventsBumperPlugin from './09_events_bumper_plugin.js';
+import VideoPoster from './09_poster.js';
+import VideoCompletionHandler from './09_completion.js';
+import VideoCommands from './10_commands.js';
+import VideoContextMenu from './095_video_context_menu.js';
+import VideoSocialSharing from './036_video_social_sharing.js';
+import VideoTranscriptFeedback from './037_video_transcript_feedback.js';
+
+let youtubeXhr = null;
+
+window.Video = function (runtime, element) {
+    let el = $(element).find('.video'),
+        id = el.attr('id').replace(/video_/, ''),
+        storage = VideoStorage('VideoState', id),
+        bumperMetadata = el.data('bumper-metadata'),
+        autoAdvanceEnabled = el.data('autoadvance-enabled') === 'True',
+        mainVideoModules = [
+            FocusGrabber, VideoControl, VideoPlayPlaceholder,
+            VideoPlayPauseControl, VideoProgressSlider, VideoSpeedControl,
+            VideoVolumeControl, VideoQualityControl, VideoFullScreen, VideoCaption, VideoCommands,
+            VideoContextMenu, VideoSaveStatePlugin, VideoEventsPlugin, VideoCompletionHandler, VideoTranscriptFeedback
+        ].concat(autoAdvanceEnabled ? [VideoAutoAdvanceControl] : []),
+        bumperVideoModules = [VideoControl, VideoPlaySkipControl, VideoSkipControl,
+            VideoVolumeControl, VideoCaption, VideoCommands, VideoSaveStatePlugin, VideoTranscriptFeedback,
+            VideoEventsBumperPlugin, VideoCompletionHandler],
+        state = {
+            el: el,
+            id: id,
+            metadata: el.data('metadata'),
+            storage: storage,
+            options: {},
+            youtubeXhr: youtubeXhr,
+            modules: mainVideoModules
+        };
+
+    let getBumperState = function (metadata) {
+        let bumperState = $.extend(true, {
+            el: el,
+            id: id,
+            storage: storage,
+            options: {},
+            youtubeXhr: youtubeXhr
+        }, {metadata: metadata});
+
+        bumperState.modules = bumperVideoModules;
+        bumperState.options = {
+            SaveStatePlugin: {events: ['language_menu:change']}
+        };
+        return bumperState;
+    };
+
+    let player = function (innerState) {
+        return function () {
+            _.extend(innerState.metadata, {autoplay: true, focusFirstControl: true});
+            initialize(innerState, element);
+        };
+    };
+    let onSequenceChange;
+
+    VideoAccessibleMenu(el, {
+        storage: storage,
+        saveStateUrl: state.metadata.saveStateUrl
+    });
+
+    VideoSocialSharing(el);
+
+    if (bumperMetadata) {
+        VideoPoster(el, {
+            poster: el.data('poster'),
+            onClick: _.once(function () {
+                let mainVideoPlayer = player(state);
+                let bumper, bumperState;
+                if (storage.getItem('isBumperShown')) {
+                    mainVideoPlayer();
+                } else {
+                    bumperState = getBumperState(bumperMetadata);
+                    bumper = new VideoBumper(player(bumperState), bumperState);
+                    state.bumperState = bumperState;
+                    bumper.getPromise().done(function () {
+                        delete state.bumperState;
+                        mainVideoPlayer();
+                    });
+                }
+            })
+        });
+    } else {
+        initialize(state, element);
+    }
+
+    if (!youtubeXhr) {
+        youtubeXhr = state.youtubeXhr;
+    }
+
+    el.data('video-player-state', state);
+    onSequenceChange = function () {
+        if (state && state.videoPlayer) {
+            state.videoPlayer.destroy();
+        }
+        $('.sequence').off('sequence:change', onSequenceChange);
+    };
+    $('.sequence').on('sequence:change', onSequenceChange);
+
+    // Because the 'state' object is only available inside this closure, we will also make it available to
+    // the caller by returning it. This is necessary so that we can test Video with Jasmine.
+    return state;
+}
+
+window.Video.clearYoutubeXhr = function () {
+    youtubeXhr = null;
+};
+
+window.Video.loadYouTubeIFrameAPI = initialize.prototype.loadYouTubeIFrameAPI;
diff --git a/xblocks_contrib/video/static/js/src/utils/time.js b/xblocks_contrib/video/static/js/src/utils/time.js
new file mode 100644
index 00000000..e85e16e2
--- /dev/null
+++ b/xblocks_contrib/video/static/js/src/utils/time.js
@@ -0,0 +1,41 @@
+// eslint-disable-next-line no-shadow
+export function format(time, formatFull) {
+    let hours, minutes, seconds;
+
+    if (!_.isFinite(time) || time < 0) {
+        time = 0;
+    }
+
+    seconds = Math.floor(time);
+    minutes = Math.floor(seconds / 60);
+    hours = Math.floor(minutes / 60);
+    seconds %= 60;
+    minutes %= 60;
+
+    if (formatFull) {
+        return '' + _pad(hours) + ':' + _pad(minutes) + ':' + _pad(seconds % 60);
+    } else if (hours) {
+        return '' + hours + ':' + _pad(minutes) + ':' + _pad(seconds % 60);
+    } else {
+        return '' + minutes + ':' + _pad(seconds % 60);
+    }
+}
+
+export function formatFull(time) {
+    // The returned value will not be user-facing. So no need for
+    // internationalization.
+    return format(time, true);
+}
+
+export function convert(time, oldSpeed, newSpeed) {
+    // eslint-disable-next-line no-mixed-operators
+    return (time * oldSpeed / newSpeed).toFixed(3);
+}
+
+export function _pad(number) {
+    if (number < 10) {
+        return '0' + number;
+    } else {
+        return '' + number;
+    }
+}
diff --git a/xblocks_contrib/video/static/js/src/video.js b/xblocks_contrib/video/static/js/src/video.js
deleted file mode 100644
index fedf319d..00000000
--- a/xblocks_contrib/video/static/js/src/video.js
+++ /dev/null
@@ -1,38 +0,0 @@
-
-/* JavaScript for VideoBlock. */
-function VideoBlock(runtime, element) {
-    const updateCount = (result) => {
-        $('.count', element).text(result.count);
-    };
-
-    const handlerUrl = runtime.handlerUrl(element, 'increment_count');
-
-    $('p', element).on('click', (eventObject) => {
-        $.ajax({
-            type: 'POST',
-            url: handlerUrl,
-            contentType: 'application/json',
-            data: JSON.stringify({hello: 'world'}),
-            success: updateCount
-        });
-    });
-
-    $(() => {
-        /*
-        Use `gettext` provided by django-statici18n for static translations
-        */
-
-        // eslint-disable-next-line no-undef
-        const dummyText = gettext('Hello World');
-
-        // Example usage of interpolation for translated strings
-        // eslint-disable-next-line no-undef
-        const message = StringUtils.interpolate(
-            gettext('You are enrolling in {courseName}'),
-            {
-                courseName: 'Rock & Roll 101'
-            }
-        );
-        console.log(message); // This is just for demonstration purposes
-    });
-}
diff --git a/xblocks_contrib/video/templates/video.html b/xblocks_contrib/video/templates/video.html
index ef6a71a0..87d3a631 100644
--- a/xblocks_contrib/video/templates/video.html
+++ b/xblocks_contrib/video/templates/video.html
@@ -1,7 +1,215 @@
+<!-- NOTE: Code has been copied from the following source file
+https://github.com/openedx/edx-platform/blob/master/lms/templates/video.html -->
 {% load i18n %}
 
-<div class="video">
-<p>
-    VideoBlock: {% trans "count is now" %} <span class='count'>{{ count }}</span> {% trans "click me to increment." %}
-</p>
+{% if display_name is not None and not is_embed %}
+    <h3 class="hd hd-2">{{ display_name|escape }}</h3>
+{% endif %}
+
+<div
+    id="video_{{ id|escape }}"
+    class="video closed"
+    data-metadata="{{ metadata|escape }}"
+    data-bumper-metadata='{{ bumper_metadata|escape }}'
+    data-autoadvance-enabled="{{ autoadvance_enabled|escape }}"
+    data-poster='{{ poster|escape }}'
+    data-block-id='{{ block_id|escape }}'
+    data-course-id='{{ course_id|escape }}'
+    tabindex="-1"
+>
+    <div class="focus_grabber first"></div>
+
+    <div class="tc-wrapper">
+      <div class="video-wrapper">
+            <span tabindex="0" class="spinner" aria-hidden="false"
+                  aria-label="{% trans 'Loading video player' as tmsg %}{{tmsg|force_escape}}"></span>
+            <span tabindex="-1" class="btn-play fa fa-youtube-play fa-2x is-hidden" aria-hidden="true"
+                  aria-label="{% trans 'Play video' as tmsg %}{{tmsg|force_escape}}"></span>
+          <div class="video-player-pre"></div>
+          <div class="video-player">
+              <div id="{{ id|escape }}"></div>
+              <h4 class="hd hd-4 video-error is-hidden">{% trans 'No playable video sources found.' as tmsg %}{{tmsg|force_escape}}</h4>
+              <h4 class="hd hd-4 video-hls-error is-hidden">
+                    {% trans 'Your browser does not support this video format. Try using a different browser.' as tmsg %}{{tmsg|force_escape}}
+              </h4>
+          </div>
+          <div class="video-player-post"></div>
+          <div class="closed-captions"></div>
+          <div class="video-controls is-hidden">
+              <div>
+                <div class="vcr">
+                    <div class="vidtime">0:00 / 0:00</div>
+                </div>
+                  <div class="secondary-controls"></div>
+              </div>
+          </div>
+      </div>
+    </div>
+
+    <div class="focus_grabber last"></div>
+
+    <div class="wrapper-video-bottom-section">
+        {% if download_video_link or track or handout or public_sharing_enabled and not hide_downloads %}
+            <h3 class="hd hd-4 downloads-heading sr"
+                id="video-download-transcripts_{{ id|escape }}">{% trans 'Downloads and transcripts' as tmsg %}{{tmsg|force_escape}}</h3>
+            <div class="wrapper-downloads" role="region" aria-labelledby="video-download-transcripts_{{ id|escape }}">
+                {% if download_video_link or public_sharing_enabled %}
+                <div class="wrapper-download-video">
+                        <h4 class="hd hd-5">{% trans 'Video' as tmsg %}{{tmsg|force_escape}}</h4>
+                        {% if download_video_link %}
+                            <span class="icon fa fa-download" aria-hidden="true"></span>
+                            <a class="btn-link video-sources video-download-button"
+                            href="{{ download_video_link|escape }}"
+                            target="{% if not is_video_from_same_origin %}_blank{% else %}_self{% endif %}">
+                                {% trans "Download video file" as tmsg %}{{ tmsg|force_escape }}
+                            </a>
+                        {% endif %}
+                        {% if download_video_link and public_sharing_enabled %}
+                        <br>{% endif %}
+                        {% if sharing_sites_info %}
+                            <div class="wrapper-social-share">
+                                <button class="social-toggle-btn btn">
+                                <span class="icon fa fa-share-alt"></span>
+                                {% trans 'Share this video' as tmsg %}{{tmsg|force_escape}}
+                            </button>
+                            <div hidden class="container-social-share">
+                                {% trans "Share this video" as tmsg %}{{tmsg|force_escape}}
+                                <div class="btn-link close-btn">
+                                    <span class="icon fa fa-close"></span>
+                                </div>
+
+                                    {% for sharing_site_info in sharing_sites_info %}
+                                    <a
+                                        class="social-share-link"
+                                        data-source="{{ sharing_site_info.name|escape }}"
+                                        href="{{ sharing_site_info.sharing_url|escape }}"
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                    >
+                                            {% if sharing_site_info.name == "twitter" %}
+                                            <!--
+                                                Twitter now uses the X brand icon, but Font Awesome does not include fa-x-twitter until 6.0
+                                                Upgrading to 6.0 would require lots of leg work becuase all square icons have new name patterns
+                                                ex: fa-facebook-square is now fa-square-facebook
+                                            -->
+                                            <span style="display: inline-block; vertical-align: middle; padding-left: 1px;">
+                                                <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" height="15" width="12.86" viewBox="0 0 448 512">
+                                                    <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+                                                    <path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm297.1 84L257.3 234.6 379.4 396H283.8L209 298.1 123.3 396H75.8l111-126.9L69.7 116h98l67.7 89.5L313.6 116h47.5zM323.3 367.6L153.4 142.9H125.1L296.9 367.6h26.3z"/>
+                                                </svg>
+                                                </span>
+                                            {% else %}
+                                                <span class="icon fa {{ sharing_site_info.fa_icon_name|escape }}"
+                                                      aria-hidden="true"></span>
+                                            {% endif %}
+                                            <span class="sr">
+                                                {% filter force_escape %}{% blocktrans with site=sharing_site_info.name %}Share on {{ site }}{% endblocktrans %}{% endfilter %}
+                                            </span>
+                                        </a>
+                                    {% endfor %}
+
+                                    <div class="public-video-url-container">
+                                        <a href="{{ public_video_url|escape }}" class="public-video-url-link">
+                                            {{ public_video_url|escape }}
+                                        </a>
+                                    <div 
+                                        class="public-video-copy-btn" data-url="{{ public_video_url|escape }}">
+                                        <span class="icon fa fa-link"></span>
+                                        <span>{% trans "Copy" as tmsg %}{{tmsg|force_escape}}</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                     {% endif %}
+                </div>
+                {% endif %}
+                {% if track %}
+            <div class="wrapper-download-transcripts">
+                <h4 class="hd hd-5">{% trans 'Transcripts' as tmsg %}{{tmsg|force_escape}}</h4>
+                {% if transcript_download_format %}
+                    <ul class="list-download-transcripts">
+                        {% for item in transcript_download_formats_list %}
+                            <li class="transcript-option">
+                            <span class="icon fa fa-download" aria-hidden="true"></span>
+                                <a class="btn btn-link" href="{{ track|escape }}"
+                                           data-value="{{ item.value|escape }}">
+                                    {% filter force_escape %}{% blocktrans with file=item.display_name %}Download {{ file }}{% endblocktrans %}{% endfilter %}
+                                </a>
+                            </li>
+                        {% endfor %}
+                    </ul>
+                {% else %}
+                    <a class="btn-link external-track" href="{{ track|escape }}">{% trans 'Download transcript' as tmsg %}{{tmsg|force_escape}}</a>
+                {% endif %}
+            </div>
+                {% endif %}
+                {% if handout %}
+            <div class="wrapper-handouts">
+                        <h4 class="hd hd-5">{% trans 'Handouts' as tmsg %}{{tmsg|force_escape}}</h4>
+                        <a class="btn-link" href="{{ handout|escape }}" download>{% trans 'Download Handout' as tmsg %}{{tmsg|force_escape}}</a>
+                    </div>
+                {% endif %}
+            </div>
+        {% endif %}
+        {% if transcript_feedback_enabled and video_id %}
+            <div class="wrapper-transcript-feedback" data-video-id="{{ video_id|escape }}" data-user-id="{{ user_id|escape }}">
+                <h4 class="hd hd-5">{% trans 'How is the transcript quality?' as tmsg %}{{tmsg|force_escape}}</h4>
+            <div class="transcript-feedback-buttons">
+                <div class="transcript-feedback-btn-wrapper">
+                    <button class="thumbs-up-btn">
+                        <span class="icon fa fa-thumbs-o-up thumbs-up-icon"></span>
+                    </button>
+                </div>
+                <div class="transcript-feedback-btn-wrapper">
+                    <button class="thumbs-down-btn">
+                        <span class="icon fa fa-thumbs-o-down thumbs-down-icon"></span>
+                    </button>
+                </div>
+            </div>
+        </div>
+        {% endif %}
+        <div class="google-disclaimer">
+            <a href="https://translate.google.com/" target="_blank">
+                <img
+                    width="200"
+                    id="google-translate-logo"
+                    src="https://learning.edx.org/d4ab1b25143ecad62d69d855b00e7313.png"
+                    alt="Translated by Google logo"
+                >
+            </a>
+        </div>
+    </div>
 </div>
+
+{% if cdn_eval %}
+{{ cdn_exp_group|json_script:"cdnExpGroup" }}
+
+<script>
+  //TODO: refactor this js into a separate file.
+  function sendPerformanceBeacon(id, expgroup, value, event_name) {
+    var data = {event: event_name, id: id, expgroup: expgroup, value: value, page: "html5vid"};
+    $.ajax({method: "POST", url: "/performance", data: data});
+  }
+  var cdnStartTime;
+  var salt = Math.floor((1 + Math.random()) * 0x100000).toString(36);
+  var id = "{{ id|escapejs }}";
+
+  function initializeCDNExperiment() {
+    var cdnData = JSON.parse(document.getElementById('cdnExpGroup').textContent);
+    sendPerformanceBeacon(id + "_" + salt, cdnData, "", "load");
+    cdnStartTime = Date.now();
+
+    $.each(['loadstart', 'abort', 'error', 'stalled', 'loadedmetadata',
+            'loadeddata', 'canplay', 'canplaythrough', 'seeked'], function(index, eventName) {
+      $("#video_" + id).bind("html5:" + eventName, null, function () {
+          var timeElapsed = Date.now() - cdnStartTime;
+          sendPerformanceBeacon(id + "_" + salt, cdnData, timeElapsed, eventName);
+      });
+    });
+  }
+  $("#video_" + id).bind("initialize", null, initializeCDNExperiment);
+  if ($("#video_" + id).hasClass("is-initialized")) {
+    initializeCDNExperiment();
+  }
+</script>
+{% endif %}
diff --git a/xblocks_contrib/video/validation.py b/xblocks_contrib/video/validation.py
new file mode 100644
index 00000000..7af278df
--- /dev/null
+++ b/xblocks_contrib/video/validation.py
@@ -0,0 +1,130 @@
+# NOTE: Code has been copied from the following source files
+# https://github.com/openedx/edx-platform/blob/master/xmodule/validation.py
+"""
+Extension of XBlock Validation class to include information for presentation in Studio.
+"""
+from xblock.validation import Validation, ValidationMessage
+
+
+class StudioValidationMessage(ValidationMessage):
+    """
+    A message containing validation information about an xblock, extended to provide Studio-specific fields.
+    """
+
+    # A special message type indicating that the xblock is not yet configured. This message may be rendered
+    # in a different way within Studio.
+    NOT_CONFIGURED = "not-configured"
+
+    TYPES = [ValidationMessage.WARNING, ValidationMessage.ERROR, NOT_CONFIGURED]
+
+    def __init__(self, message_type, message_text, action_label=None, action_class=None, action_runtime_event=None):
+        """
+        Create a new message.
+
+        Args:
+            message_type (str): The type associated with this message. Most be `WARNING` or `ERROR`.
+            message_text (unicode): The textual message.
+            action_label (unicode): Text to show on a "fix-up" action (optional). If present, either `action_class`
+                or `action_runtime_event` should be specified.
+            action_class (str): A class to link to the "fix-up" action (optional). A click handler must be added
+                for this class, unless it is "edit-button", "duplicate-button", or "delete-button" (which are all
+                handled in general for xblock instances.
+            action_runtime_event (str): An event name to be triggered on the xblock client-side runtime when
+                the "fix-up" action is clicked (optional).
+        """
+        super().__init__(message_type, message_text)
+        if action_label is not None:
+            if not isinstance(action_label, str):
+                raise TypeError("Action label must be unicode.")
+            self.action_label = action_label
+        if action_class is not None:
+            if not isinstance(action_class, str):
+                raise TypeError("Action class must be a string.")
+            self.action_class = action_class
+        if action_runtime_event is not None:
+            if not isinstance(action_runtime_event, str):
+                raise TypeError("Action runtime event must be a string.")
+            self.action_runtime_event = action_runtime_event
+
+    def to_json(self):
+        """
+        Convert to a json-serializable representation.
+
+        Returns:
+            dict: A dict representation that is json-serializable.
+        """
+        serialized = super().to_json()
+        if hasattr(self, "action_label"):
+            serialized["action_label"] = self.action_label
+        if hasattr(self, "action_class"):
+            serialized["action_class"] = self.action_class
+        if hasattr(self, "action_runtime_event"):
+            serialized["action_runtime_event"] = self.action_runtime_event
+        return serialized
+
+
+class StudioValidation(Validation):
+    """
+    Extends `Validation` to add Studio-specific summary message.
+    """
+
+    @classmethod
+    def copy(cls, validation):
+        """
+        Copies the `Validation` object to a `StudioValidation` object. This is a shallow copy.
+
+        Args:
+            validation (Validation): A `Validation` object to be converted to a `StudioValidation` instance.
+
+        Returns:
+            StudioValidation: A `StudioValidation` instance populated with the messages from supplied
+                `Validation` object
+        """
+        if not isinstance(validation, Validation):
+            raise TypeError("Copy must be called with a Validation instance")
+        studio_validation = cls(validation.xblock_id)
+        studio_validation.messages = validation.messages
+        return studio_validation
+
+    def __init__(self, xblock_id):
+        """
+        Create a `StudioValidation` instance.
+
+        Args:
+            xblock_id (object): An identification object that must support conversion to unicode.
+        """
+        super().__init__(xblock_id)
+        self.summary = None
+
+    def set_summary(self, message):
+        """
+        Sets a summary message on this instance. The summary is optional.
+
+        Args:
+            message (ValidationMessage): A validation message to set as this instance's summary.
+        """
+        if not isinstance(message, ValidationMessage):
+            raise TypeError("Argument must of type ValidationMessage")
+        self.summary = message
+
+    @property
+    def empty(self):
+        """
+        Is this object empty (contains no messages and no summary)?
+
+        Returns:
+            bool: True iff this instance has no validation issues and therefore has no messages or summary.
+        """
+        return super().empty and not self.summary
+
+    def to_json(self):
+        """
+        Convert to a json-serializable representation.
+
+        Returns:
+            dict: A dict representation that is json-serializable.
+        """
+        serialized = super().to_json()
+        if self.summary:
+            serialized["summary"] = self.summary.to_json()
+        return serialized
diff --git a/xblocks_contrib/video/video.py b/xblocks_contrib/video/video.py
index b11baeb4..ffa3ddbd 100644
--- a/xblocks_contrib/video/video.py
+++ b/xblocks_contrib/video/video.py
@@ -1,105 +1,1200 @@
-"""TO-DO: Write a description of what this XBlock is."""
+# NOTE: Code has been copied from the source file https://github.com/openedx/edx-platform/blob/master/xmodule/video_block/video_block.py
+"""Video is ungraded Xmodule for support video content.
+It's new improved video block, which support additional feature:
+- Can play non-YouTube video sources via in-browser HTML5 video player.
+- YouTube defaults to HTML5 mode from the start.
+- Speed changes in both YouTube and non-YouTube videos happen via
+in-browser HTML5 video method (when in HTML5 mode).
+- Navigational subtitles can be disabled altogether via an attribute
+in XML.
+Examples of html5 videos for manual testing:
+    https://s3.amazonaws.com/edx-course-videos/edx-intro/edX-FA12-cware-1_100.mp4
+    https://s3.amazonaws.com/edx-course-videos/edx-intro/edX-FA12-cware-1_100.webm
+    https://s3.amazonaws.com/edx-course-videos/edx-intro/edX-FA12-cware-1_100.ogv
+"""
 
-from importlib.resources import files
 
-from django.utils import translation
+import copy
+import json
+import logging
+from collections import OrderedDict, defaultdict
+from operator import itemgetter
+
+from django.conf import settings
+from edx_django_utils.cache import RequestCache
+from lxml import etree
+from opaque_keys.edx.keys import CourseKey
+from opaque_keys.edx.locator import AssetLocator
 from web_fragments.fragment import Fragment
+from xblock.completable import XBlockCompletionMode
 from xblock.core import XBlock
-from xblock.fields import Integer, Scope
+from xblock.fields import ScopeIds
+from xblock.runtime import KvsFieldData
+from xblocks_contrib.video import VideoBlock as _ExtractedVideoBlock
 from xblock.utils.resources import ResourceLoader
 
-resource_loader = ResourceLoader(__name__)
+from common.djangoapps.xblock_django.constants import ATTR_KEY_REQUEST_COUNTRY_CODE, ATTR_KEY_USER_ID
+from openedx.core.lib.cache_utils import request_cached
+from openedx.core.lib.license import LicenseMixin
+from xmodule.contentstore.content import StaticContent
+from xmodule.editing_block import EditingMixin
+from xmodule.exceptions import NotFoundError
+from xmodule.modulestore.inheritance import InheritanceKeyValueStore
+from xmodule.raw_block import EmptyDataRawMixin
+from xmodule.util.builtin_assets import add_css_to_fragment, add_webpack_js_to_fragment
+from xmodule.validation import StudioValidation, StudioValidationMessage
+from xmodule.x_module import (
+    PUBLIC_VIEW, STUDENT_VIEW,
+    ResourceTemplates,
+    XModuleMixin, XModuleToXBlockMixin,
+)
+from xmodule.xml_block import XmlMixin, deserialize_field, is_pointer_tag, name_to_pathname
+from .bumper_utils import bumperize
+from openedx.core.djangoapps.video_config.transcripts_utils import (
+    Transcript,
+    VideoTranscriptsMixin,
+    clean_video_id,
+    get_endonym_or_label,
+    get_html5_ids,
+    subs_filename
+)
+from .video_handlers import VideoStudentViewHandlers, VideoStudioViewHandlers
+from .video_utils import create_youtube_string, format_xml_exception_message, get_poster, rewrite_video_url
+from .video_xfields import VideoFields
+
+from xblocks_contrib.video.exceptions import TranscriptNotFoundError
+
+# The following import/except block for edxval is temporary measure until
+# edxval is a proper XBlock Runtime Service.
+#
+# Here's the deal: the VideoBlock should be able to take advantage of edx-val
+# (https://github.com/openedx/edx-val) to figure out what URL to give for video
+# resources that have an edx_video_id specified. edx-val is a Django app, and
+# including it causes tests to fail because we run common/lib tests standalone
+# without Django dependencies. The alternatives seem to be:
+#
+# 1. Move VideoBlock out of edx-platform.
+# 2. Accept the Django dependency in common/lib.
+# 3. Try to import, catch the exception on failure, and check for the existence
+#    of edxval_api before invoking it in the code.
+# 4. Make edxval an XBlock Runtime Service
+#
+# (1) is a longer term goal. VideoBlock should be made into an XBlock and
+# extracted from edx-platform entirely. But that's expensive to do because of
+# the various dependencies (like templates). Need to sort this out.
+# (2) is explicitly discouraged.
+# (3) is what we're doing today. The code is still functional when called within
+# the context of the LMS, but does not cause failure on import when running
+# standalone tests. Most VideoBlock tests tend to be in the LMS anyway,
+# probably for historical reasons, so we're not making things notably worse.
+# (4) is one of the next items on the backlog for edxval, and should get rid
+# of this particular import silliness. It's just that I haven't made one before,
+# and I was worried about trying it with my deadline constraints.
+try:
+    import edxval.api as edxval_api
+except ImportError:
+    edxval_api = None
+
+log = logging.getLogger(__name__)
+loader = ResourceLoader("lms")
 
-# This Xblock is just to test the strucutre of xblocks-contrib
+# Make '_' a no-op so we can scrape strings. Using lambda instead of
+#  `django.utils.translation.ugettext_noop` because Django cannot be imported in this file
+_ = lambda text: text
 
+EXPORT_IMPORT_COURSE_DIR = 'course'
+EXPORT_IMPORT_STATIC_DIR = 'static'
 
-@XBlock.needs("i18n")
-class VideoBlock(XBlock):
+
+@XBlock.wants('settings', 'completion', 'i18n', 'request_cache', 'video_config')
+@XBlock.needs('mako', 'user')
+class _BuiltInVideoBlock(
+        VideoFields, VideoTranscriptsMixin, VideoStudioViewHandlers, VideoStudentViewHandlers,
+        EmptyDataRawMixin, XmlMixin, EditingMixin, XModuleToXBlockMixin,
+        ResourceTemplates, XModuleMixin, LicenseMixin):
     """
-    TO-DO: document what your XBlock does.
+    XML source example:
+        <video show_captions="true"
+            youtube="0.75:jNCf2gIqpeE,1.0:ZwkTiUPN0mg,1.25:rsq9auxASqI,1.50:kMyNdzVHHgg"
+            url_name="lecture_21_3" display_name="S19V3: Vacancies"
+        >
+            <source src=".../mit-3091x/M-3091X-FA12-L21-3_100.mp4"/>
+            <source src=".../mit-3091x/M-3091X-FA12-L21-3_100.webm"/>
+            <source src=".../mit-3091x/M-3091X-FA12-L21-3_100.ogv"/>
+        </video>
     """
+    is_extracted = False
+    has_custom_completion = True
+    completion_mode = XBlockCompletionMode.COMPLETABLE
 
-    # Fields are defined on the class.  You can access them in your code as
-    # self.<fieldname>.
+    video_time = 0
+    icon_class = 'video'
 
-    # TO-DO: delete count, and define your own fields.
-    count = Integer(
-        default=0,
-        scope=Scope.user_state,
-        help="A simple counter, to show something happening",
-    )
+    show_in_read_only_mode = True
+
+    tabs = [
+        {
+            'name': _("Basic"),
+            'template': "video/transcripts.html",
+            'current': True
+        },
+        {
+            'name': _("Advanced"),
+            'template': "tabs/metadata-edit-tab.html"
+        }
+    ]
+
+    mako_template = "widgets/tabs-aggregator.html"
+    js_module_name = "TabsEditingDescriptor"
+
+    uses_xmodule_styles_setup = True
+
+    def get_transcripts_for_student(self, transcripts, dest_lang=None):
+        """Return transcript information necessary for rendering the XModule student view.
+        This is more or less a direct extraction from `get_html`.
+
+        Args:
+            transcripts (dict): A dict with all transcripts and a sub.
+
+        Returns:
+            Tuple of (track_url, transcript_language, sorted_languages)
+            track_url -> subtitle download url
+            transcript_language -> default transcript language
+            sorted_languages -> dictionary of available transcript languages
+        """
+        track_url = None
+        sub, other_lang = transcripts["sub"], transcripts["transcripts"]
+        if self.download_track:
+            if self.track:
+                track_url = self.track
+            elif sub or other_lang:
+                track_url = self.runtime.handler_url(self, 'transcript', 'download').rstrip('/?')
 
-    # Indicates that this XBlock has been extracted from edx-platform.
-    is_extracted = True
+        transcript_language = self.get_default_transcript_language(transcripts, dest_lang)
+        languages = {}
+        for lang_code in other_lang:
+            try:
+                label = get_endonym_or_label(lang_code)
+                languages[lang_code] = label
+            except NotFoundError:
+                continue
 
-    def resource_string(self, path):
-        """Handy helper for getting resources from our kit."""
-        return files(__package__).joinpath(path).read_text(encoding="utf-8")
+        if not other_lang or (other_lang and sub):
+            languages['en'] = 'English'
 
-    # TO-DO: change this view to display your data your own way.
-    def student_view(self, context=None):
+        # OrderedDict for easy testing of rendered context in tests
+        sorted_languages = sorted(list(languages.items()), key=itemgetter(1))
+
+        sorted_languages = OrderedDict(sorted_languages)
+        return track_url, transcript_language, sorted_languages
+
+    def is_hls_playback_enabled(self, course_id: CourseKey) -> bool:
         """
-        Create primary view of the VideoBlock, shown to students when viewing courses.
+        Check if HLS playback is enabled for the course.
         """
-        if context:
-            pass  # TO-DO: do something based on the context.
+        video_config_service = self.runtime.service(self, 'video_config')
+        return video_config_service.is_hls_playback_enabled(course_id) if video_config_service else False
 
-        frag = Fragment()
-        frag.add_content(
-            resource_loader.render_django_template(
-                "templates/video.html",
-                {
-                    "count": self.count,
-                },
-                i18n_service=self.runtime.service(self, "i18n"),
-            )
+    @property
+    def youtube_deprecated(self):
+        """
+        Return True if youtube is deprecated and hls as primary playback is enabled else False
+        """
+        video_config_service = self.runtime.service(self, 'video_config')
+        # Return False if `hls` playback feature is disabled.
+        if not self.is_hls_playback_enabled(self.location.course_key):
+            return False
+
+        # check if youtube has been deprecated and hls as primary playback
+        # is enabled for this course
+        return video_config_service.is_youtube_deprecated(self.location.course_key) if video_config_service else False
+
+    def youtube_disabled_for_course(self):  # lint-amnesty, pylint: disable=missing-function-docstring
+        if not self.location.context_key.is_course:
+            return False  # Only courses have this flag
+        request_cache = RequestCache('youtube_disabled_for_course')
+        cache_response = request_cache.get_cached_response(self.location.context_key)
+        if cache_response.is_found:
+            return cache_response.value
+
+        video_config_service = self.runtime.service(self, 'video_config')
+        youtube_is_disabled = video_config_service.is_youtube_blocked_for_course(
+            self.location.course_key) if video_config_service else False
+        request_cache.set(self.location.context_key, youtube_is_disabled)
+        return youtube_is_disabled
+
+    def prioritize_hls(self, youtube_streams, html5_sources):
+        """
+        Decide whether hls can be prioritized as primary playback or not.
+
+        If both the youtube and hls sources are present then make decision on flag
+        If only either youtube or hls is present then play whichever is present
+        """
+        yt_present = bool(youtube_streams.strip()) if youtube_streams else False
+        hls_present = any(source for source in html5_sources)
+
+        if yt_present and hls_present:
+            return self.youtube_deprecated
+
+        return False
+
+    def student_view(self, context):
+        """
+        Return the student view.
+        """
+        fragment = Fragment(self.get_html(context=context))
+        add_css_to_fragment(fragment, 'VideoBlockDisplay.css')
+        add_webpack_js_to_fragment(fragment, 'VideoBlockDisplay')
+        fragment.initialize_js('Video')
+        return fragment
+
+    def author_view(self, context):
+        """
+        Renders the Studio preview view.
+        """
+        return self.student_view(context)
+
+    def public_view(self, context):
+        """
+        Returns a fragment that contains the html for the public view
+        """
+        is_embed = context.get("public_video_embed")
+
+        if not is_embed and getattr(self.runtime, 'suppports_state_for_anonymous_users', False):
+            # The new runtime can support anonymous users as fully as regular users:
+            return self.student_view(context)
+
+        fragment = Fragment(self.get_html(view=PUBLIC_VIEW, context=context))
+        add_css_to_fragment(fragment, 'VideoBlockDisplay.css')
+        add_webpack_js_to_fragment(fragment, 'VideoBlockMain')
+        fragment.initialize_js('Video')
+        return fragment
+
+    def get_html(self, view=STUDENT_VIEW, context=None):  # lint-amnesty, pylint: disable=arguments-differ, too-many-statements
+        """
+        Return html for a given view of this block.
+        """
+        context = context or {}
+        track_status = (self.download_track and self.track)
+        transcript_download_format = self.transcript_download_format if not track_status else None
+        sources = [source for source in self.html5_sources if source]
+
+        download_video_link = None
+        youtube_streams = ""
+        video_duration = None
+        video_status = None
+
+        # Determine if there is an alternative source for this video
+        # based on user locale.  This exists to support cases where
+        # we leverage a geography specific CDN, like China.
+        default_cdn_url = getattr(settings, 'VIDEO_CDN_URL', {}).get('default')
+        user_location = self.runtime.service(self, 'user').get_current_user().opt_attrs[ATTR_KEY_REQUEST_COUNTRY_CODE]
+        cdn_url = getattr(settings, 'VIDEO_CDN_URL', {}).get(user_location, default_cdn_url)
+
+        # If we have an edx_video_id, we prefer its values over what we store
+        # internally for download links (source, html5_sources) and the youtube
+        # stream.
+        if self.edx_video_id and edxval_api:  # lint-amnesty, pylint: disable=too-many-nested-blocks
+            try:
+                val_profiles = ["youtube", "desktop_webm", "desktop_mp4"]
+
+                if self.is_hls_playback_enabled(self.course_id):
+                    val_profiles.append('hls')
+
+                # strip edx_video_id to prevent ValVideoNotFoundError error if unwanted spaces are there. TNL-5769
+                val_video_urls = edxval_api.get_urls_for_profiles(self.edx_video_id.strip(), val_profiles)
+
+                # VAL will always give us the keys for the profiles we asked for, but
+                # if it doesn't have an encoded video entry for that Video + Profile, the
+                # value will map to `None`
+
+                # add the non-youtube urls to the list of alternative sources
+                # use the last non-None non-youtube non-hls url as the link to download the video
+                for url in [val_video_urls[p] for p in val_profiles if p != "youtube"]:
+                    if url:
+                        if url not in sources:
+                            sources.append(url)
+                        # don't include hls urls for download
+                        if self.download_video and not url.endswith('.m3u8'):
+                            # function returns None when the url cannot be re-written
+                            rewritten_link = rewrite_video_url(cdn_url, url)
+                            if rewritten_link:
+                                download_video_link = rewritten_link
+                            else:
+                                download_video_link = url
+
+                # set the youtube url
+                if val_video_urls["youtube"]:
+                    youtube_streams = "1.00:{}".format(val_video_urls["youtube"])
+
+                # get video duration
+                video_data = edxval_api.get_video_info(self.edx_video_id.strip())
+                video_duration = video_data.get('duration')
+                video_status = video_data.get('status')
+
+            except (edxval_api.ValInternalError, edxval_api.ValVideoNotFoundError):
+                # VAL raises this exception if it can't find data for the edx video ID. This can happen if the
+                # course data is ported to a machine that does not have the VAL data. So for now, pass on this
+                # exception and fallback to whatever we find in the VideoBlock.
+                log.warning("Could not retrieve information from VAL for edx Video ID: %s.", self.edx_video_id)
+
+        # If the user comes from China use China CDN for html5 videos.
+        # 'CN' is China ISO 3166-1 country code.
+        # Video caching is disabled for Studio. User_location is always None in Studio.
+        # CountryMiddleware disabled for Studio.
+        if getattr(self, 'video_speed_optimizations', True) and cdn_url:
+
+            if self.edx_video_id and edxval_api and video_status != 'external':
+                for index, source_url in enumerate(sources):
+                    new_url = rewrite_video_url(cdn_url, source_url)
+                    if new_url:
+                        sources[index] = new_url
+
+        # If there was no edx_video_id, or if there was no download specified
+        # for it, we fall back on whatever we find in the VideoBlock.
+        if not download_video_link and self.download_video:
+            if self.html5_sources:
+                # If there are multiple html5 sources, we use the first non HLS video urls
+                download_video_link = next((url for url in self.html5_sources if not url.endswith('.m3u8')), None)
+
+        transcripts = self.get_transcripts_info()
+        track_url, transcript_language, sorted_languages = self.get_transcripts_for_student(
+            transcripts=transcripts,
+            dest_lang=context.get("dest_lang")
         )
 
-        frag.add_css(self.resource_string("static/css/video.css"))
-        frag.add_javascript(self.resource_string("static/js/src/video.js"))
-        frag.initialize_js("VideoBlock")
-        return frag
-
-    # TO-DO: change this handler to perform your own actions.  You may need more
-    # than one handler, or you may not need any handlers at all.
-    @XBlock.json_handler
-    def increment_count(self, data, suffix=""):
-        """
-        Increments data. An example handler.
-        """
-        if suffix:
-            pass  # TO-DO: Use the suffix when storing data.
-        # Just to show data coming in...
-        assert data["hello"] == "world"
-
-        self.count += 1
-        return {"count": self.count}
-
-    # TO-DO: change this to create the scenarios you'd like to see in the
-    # workbench while developing your XBlock.
-    @staticmethod
-    def workbench_scenarios():
-        """Create canned scenario for display in the workbench."""
-        return [
-            (
-                "VideoBlock",
-                """<_video_extracted/>
-                """,
-            ),
-            (
-                "Multiple VideoBlock",
-                """<vertical_demo>
-                <_video_extracted/>
-                <_video_extracted/>
-                <_video_extracted/>
-                </vertical_demo>
-                """,
+        cdn_eval = False
+        cdn_exp_group = None
+
+        if self.youtube_disabled_for_course():
+            self.youtube_streams = ''  # lint-amnesty, pylint: disable=attribute-defined-outside-init
+        else:
+            self.youtube_streams = youtube_streams or create_youtube_string(self)  # pylint: disable=W0201
+
+        settings_service = self.runtime.service(self, 'settings')  # lint-amnesty, pylint: disable=unused-variable
+
+        poster = self._poster()
+        completion_service = self.runtime.service(self, 'completion')
+        if completion_service:
+            completion_enabled = completion_service.completion_tracking_enabled()
+        else:
+            completion_enabled = False
+
+        # This is the setting that controls whether the autoadvance button will be visible, not whether the
+        # video will autoadvance or not.
+        # For autoadvance controls to be shown, both the feature flag and the course setting must be true.
+        # This allows to enable the feature for certain courses only.
+        autoadvance_enabled = settings.FEATURES.get('ENABLE_AUTOADVANCE_VIDEOS', False) and \
+            getattr(self, 'video_auto_advance', False)
+
+        # This is the current status of auto-advance (not the control visibility).
+        # But when controls aren't visible we force it to off. The student might have once set the preference to
+        # true, but now staff or admin have hidden the autoadvance button and the student won't be able to disable
+        # it anymore; therefore we force-disable it in this case (when controls aren't visible).
+        autoadvance_this_video = self.auto_advance and autoadvance_enabled
+        is_embed = context.get('public_video_embed', False)
+        is_public_view = view == PUBLIC_VIEW
+        metadata = {
+            'autoAdvance': autoadvance_this_video,
+            # For now, the option "data-autohide-html5" is hard coded. This option
+            # either enables or disables autohiding of controls and captions on mouse
+            # inactivity. If set to true, controls and captions will autohide for
+            # HTML5 sources (non-YouTube) after a period of mouse inactivity over the
+            # whole video. When the mouse moves (or a key is pressed while any part of
+            # the video player is focused), the captions and controls will be shown
+            # once again.
+            #
+            # There is no option in the "Advanced Editor" to set this option. However,
+            # this option will have an effect if changed to "True". The code on
+            # front-end exists.
+            'autohideHtml5': False,
+            'autoplay': settings.FEATURES.get('AUTOPLAY_VIDEOS', False),
+            # This won't work when we move to data that
+            # isn't on the filesystem
+            'captionDataDir': getattr(self, 'data_dir', None),
+            'completionEnabled': completion_enabled,
+            'completionPercentage': settings.COMPLETION_VIDEO_COMPLETE_PERCENTAGE,
+            'duration': video_duration,
+            'end': self.end_time.total_seconds(),  # pylint: disable=no-member
+            'generalSpeed': self.global_speed,
+            'lmsRootURL': settings.LMS_ROOT_URL,
+            'poster': poster,
+            'prioritizeHls': self.prioritize_hls(self.youtube_streams, sources),
+            'publishCompletionUrl': self.runtime.handler_url(self, 'publish_completion', '').rstrip('?'),
+            # This is the server's guess at whether youtube is available for
+            # this user, based on what was recorded the last time we saw the
+            # user, and defaulting to True.
+            'recordedYoutubeIsAvailable': self.youtube_is_available,
+            'savedVideoPosition': self.saved_video_position.total_seconds(),  # pylint: disable=no-member
+            'saveStateEnabled': not is_public_view,
+            'saveStateUrl': self.ajax_url + '/save_user_state',
+            # Despite the setting on the block, don't show transcript by default
+            # if the video is embedded in social media
+            'showCaptions': json.dumps(self.show_captions and not is_embed),
+            'sources': sources,
+            'speed': self.speed,
+            'start': self.start_time.total_seconds(),  # pylint: disable=no-member
+            'streams': self.youtube_streams,
+            'transcriptAvailableTranslationsUrl': self.runtime.handler_url(
+                self, 'transcript', 'available_translations'
+            ).rstrip('/?'),
+            'aiTranslationsUrl': settings.AI_TRANSLATIONS_API_URL,
+            'transcriptLanguage': transcript_language,
+            'transcriptLanguages': sorted_languages,
+            'transcriptTranslationUrl': self.runtime.handler_url(
+                self, 'transcript', 'translation/__lang__'
+            ).rstrip('/?'),
+            'ytApiUrl': settings.YOUTUBE['API'],
+            'ytMetadataEndpoint': (
+                # In the new runtime, get YouTube metadata via a handler. The handler supports anonymous users and
+                # can work in sandboxed iframes. In the old runtime, the JS will call the LMS's yt_video_metadata
+                # API endpoint directly (not an XBlock handler).
+                self.runtime.handler_url(self, 'yt_video_metadata')
+                if getattr(self.runtime, 'suppports_state_for_anonymous_users', False) else ''
             ),
+            'ytTestTimeout': settings.YOUTUBE['TEST_TIMEOUT'],
+        }
+
+        bumperize(self)
+
+        is_video_from_same_origin = bool(download_video_link and cdn_url and download_video_link.startswith(cdn_url))
+
+        template_context = {
+            'autoadvance_enabled': autoadvance_enabled,
+            'bumper_metadata': json.dumps(self.bumper['metadata']),  # pylint: disable=E1101
+            'cdn_eval': cdn_eval,
+            'cdn_exp_group': cdn_exp_group,
+            'display_name': self.display_name_with_default,
+            'download_video_link': download_video_link,
+            'is_video_from_same_origin': is_video_from_same_origin,
+            'handout': self.handout,
+            'hide_downloads': is_public_view or is_embed,
+            'id': self.location.html_id(),
+            'block_id': str(self.location),
+            'course_id': str(self.context_key),
+            'video_id': str(self.edx_video_id),
+            'user_id': self.get_user_id(),
+            'is_embed': is_embed,
+            'license': getattr(self, "license", None),
+            'metadata': json.dumps(OrderedDict(metadata)),
+            'poster': json.dumps(get_poster(self)),
+            'track': track_url,
+            'transcript_download_format': transcript_download_format,
+            'transcript_download_formats_list': self.fields['transcript_download_format'].values,  # lint-amnesty, pylint: disable=unsubscriptable-object
+            'transcript_feedback_enabled': self.is_transcript_feedback_enabled(),
+        }
+        video_config_service = self.runtime.service(self, 'video_config')
+        if video_config_service:
+            template_context.update(video_config_service.get_public_sharing_context(self, self.course_id))
+
+        return loader.render_django_template("templates/video.html", template_context)
+
+    def is_transcript_feedback_enabled(self):
+        """
+        Is transcript feedback enabled for this video?
+        """
+        if not self.context_key.is_course:
+            return False  # Only courses support this feature at all (not libraries)
+        try:
+            # Video transcript feedback must be enabled in order to show the widget
+            video_config_service = self.runtime.service(self, 'video_config')
+            feature_enabled = video_config_service.is_transcript_feedback_enabled(
+                self.context_key) if video_config_service else False
+        except Exception as err:  # pylint: disable=broad-except
+            log.exception(f"Error retrieving course for course ID: {self.context_key}")
+            return False
+        return feature_enabled
+
+    def get_user_id(self):
+        return self.runtime.service(self, 'user').get_current_user().opt_attrs.get(ATTR_KEY_USER_ID)
+
+    def get_public_video_url(self):
+        """
+        Returns the public video url
+        """
+        video_config_service = self.runtime.service(self, 'video_config')
+        return video_config_service.get_public_video_url(self) if video_config_service else None
+
+    def validate(self):
+        """
+        Validates the state of this Video XBlock instance. This
+        is the override of the general XBlock method, and it will also ask
+        its superclass to validate.
+        """
+        validation = super().validate()
+        if not isinstance(validation, StudioValidation):
+            validation = StudioValidation.copy(validation)
+
+        no_transcript_lang = []
+        for lang_code, transcript in self.transcripts.items():
+            if not transcript:
+                no_transcript_lang.append([label for code, label in settings.ALL_LANGUAGES if code == lang_code][0])
+
+        if no_transcript_lang:
+            ungettext = self.runtime.service(self, "i18n").ungettext
+            validation.set_summary(
+                StudioValidationMessage(
+                    StudioValidationMessage.WARNING,
+                    ungettext(
+                        'There is no transcript file associated with the {lang} language.',
+                        'There are no transcript files associated with the {lang} languages.',
+                        len(no_transcript_lang)
+                    ).format(lang=', '.join(sorted(no_transcript_lang)))
+                )
+            )
+        return validation
+
+    def editor_saved(self, user, old_metadata, old_content):  # lint-amnesty, pylint: disable=unused-argument
+        """
+        Used to update video values during `self`:save method from CMS.
+        old_metadata: dict, values of fields of `self` with scope=settings which were explicitly set by user.
+        old_content, same as `old_metadata` but for scope=content.
+        Due to nature of code flow in block.py::_save_item, before current function is called,
+        fields of `self` instance have been already updated, but not yet saved.
+        To obtain values, which were changed by user input,
+        one should compare own_metadata(self) and old_medatada.
+        Video player has two tabs, and due to nature of sync between tabs,
+        metadata from Basic tab is always sent when video player is edited and saved first time, for example:
+        {'youtube_id_1_0': u'3_yD_cEKoCk', 'display_name': u'Video', 'sub': u'3_yD_cEKoCk', 'html5_sources': []},
+        that's why these fields will always present in old_metadata after first save. This should be fixed.
+        At consequent save requests html5_sources are always sent too, disregard of their change by user.
+        That means that html5_sources are always in list of fields that were changed (`metadata` param in save_item).
+        This should be fixed too.
+        """
+        video_config_service = self.runtime.service(self, 'video_config')
+        if video_config_service:
+            video_config_service.handle_editor_saved(self, user.id, old_metadata)
+
+    def save_with_metadata(self, user_id):
+        """
+        Save block with updated metadata to database."
+        """
+        self.save()
+        self.runtime.modulestore.update_item(self, user_id)
+
+    @property
+    def editable_metadata_fields(self):
+        editable_fields = super().editable_metadata_fields
+
+        settings_service = self.runtime.service(self, 'settings')
+        if settings_service:
+            xb_settings = settings_service.get_settings_bucket(self)
+            if not xb_settings.get("licensing_enabled", False) and "license" in editable_fields:
+                del editable_fields["license"]
+
+        # Default Timed Transcript a.k.a `sub` has been deprecated and end users shall
+        # not be able to modify it.
+        editable_fields.pop('sub')
+
+        languages = [{'label': label, 'code': lang} for lang, label in settings.ALL_LANGUAGES]
+        languages.sort(key=lambda l: l['label'])
+        editable_fields['transcripts']['custom'] = True
+        editable_fields['transcripts']['languages'] = languages
+        editable_fields['transcripts']['type'] = 'VideoTranslations'
+
+        # We need to send ajax requests to show transcript status
+        # whenever edx_video_id changes on frontend. Thats why we
+        # are changing type to `VideoID` so that a specific
+        # Backbonjs view can handle it.
+        editable_fields['edx_video_id']['type'] = 'VideoID'
+
+        # `public_access` is a boolean field and by default backbonejs code render it as a dropdown with 2 options
+        # but in our case we also need to show an input field with dropdown, the input field will show the url to
+        # be shared with leaners. This is not possible with default rendering logic in backbonjs code, that is why
+        # we are setting a new type and then do a custom rendering in backbonejs code to render the desired UI.
+        editable_fields['public_access']['type'] = 'PublicAccess'
+        editable_fields['public_access']['url'] = self.get_public_video_url()
+
+        # construct transcripts info and also find if `en` subs exist
+        transcripts_info = self.get_transcripts_info()
+        possible_sub_ids = [self.sub, self.youtube_id_1_0] + get_html5_ids(self.html5_sources)
+        video_config_service = self.runtime.service(self, 'video_config')
+        if video_config_service:
+            for sub_id in possible_sub_ids:
+                try:
+                    _, sub_id, _ = video_config_service.get_transcript(self, lang='en', output_format=Transcript.TXT)
+                    transcripts_info['transcripts'] = dict(transcripts_info['transcripts'], en=sub_id)
+                    break
+                except TranscriptNotFoundError:
+                    continue
+
+        editable_fields['transcripts']['value'] = transcripts_info['transcripts']
+        editable_fields['transcripts']['urlRoot'] = self.runtime.handler_url(
+            self,
+            'studio_transcript',
+            'translation'
+        ).rstrip('/?')
+        editable_fields['handout']['type'] = 'FileUploader'
+
+        return editable_fields
+
+    @classmethod
+    def parse_xml_new_runtime(cls, node, runtime, keys):
+        """
+        Implement the video block's special XML parsing requirements for the
+        new runtime only. For all other runtimes, use .parse_xml().
+        """
+        video_block = runtime.construct_xblock_from_class(cls, keys)
+        field_data = cls.parse_video_xml(node)
+        for key, val in field_data.items():
+            if key not in cls.fields:  # lint-amnesty, pylint: disable=unsupported-membership-test
+                continue  # parse_video_xml returns some old non-fields like 'source'
+            setattr(video_block, key, cls.fields[key].from_json(val))  # lint-amnesty, pylint: disable=unsubscriptable-object
+        # Don't use VAL in the new runtime:
+        video_block.edx_video_id = None
+        return video_block
+
+    @classmethod
+    def parse_xml(cls, node, runtime, _keys):
+        """
+        Use `node` to construct a new block.
+
+        See XmlMixin.parse_xml for the detailed description.
+        """
+        url_name = node.get('url_name')
+        block_type = 'video'
+        definition_id = runtime.id_generator.create_definition(block_type, url_name)
+        usage_id = runtime.id_generator.create_usage(definition_id)
+        aside_children = []
+        if is_pointer_tag(node):
+            filepath = cls._format_filepath(node.tag, name_to_pathname(url_name))
+            node = cls.load_file(filepath, runtime.resources_fs, usage_id)
+            aside_children = runtime.parse_asides(node, definition_id, usage_id, runtime.id_generator)
+        field_data = cls.parse_video_xml(node, runtime.id_generator)
+        kvs = InheritanceKeyValueStore(initial_values=field_data)
+        field_data = KvsFieldData(kvs)
+        video = runtime.construct_xblock_from_class(
+            cls,
+            # We're loading a descriptor, so student_id is meaningless
+            # We also don't have separate notions of definition and usage ids yet,
+            # so we use the location for both
+            ScopeIds(None, block_type, definition_id, usage_id),
+            field_data,
+        )
+
+        # Update VAL with info extracted from `node`
+        video.edx_video_id = video.import_video_info_into_val(
+            node,
+            runtime.resources_fs,
+            getattr(runtime.id_generator, 'target_course_id', None)
+        )
+
+        if aside_children:
+            cls.add_applicable_asides_to_block(video, runtime, aside_children)
+
+        return video
+
+    def definition_to_xml(self, resource_fs):  # lint-amnesty, pylint: disable=too-many-statements
+        """
+        Returns an xml string representing this block.
+        """
+        xml = etree.Element('video')
+        youtube_string = create_youtube_string(self)
+        if youtube_string:
+            xml.set('youtube', str(youtube_string))
+        xml.set('url_name', self.url_name)
+        attrs = [
+            ('display_name', self.display_name),
+            ('show_captions', json.dumps(self.show_captions)),
+            ('start_time', self.start_time),
+            ('end_time', self.end_time),
+            ('sub', self.sub),
+            ('download_track', json.dumps(self.download_track)),
+            ('download_video', json.dumps(self.download_video))
+        ]
+        for key, value in attrs:
+            # Mild workaround to ensure that tests pass -- if a field
+            # is set to its default value, we don't write it out.
+            if value:
+                if key in self.fields and self.fields[key].is_set_on(self):  # lint-amnesty, pylint: disable=unsubscriptable-object, unsupported-membership-test
+                    try:
+                        xml.set(key, str(value))
+                    except UnicodeDecodeError:
+                        exception_message = format_xml_exception_message(self.location, key, value)
+                        log.exception(exception_message)
+                        # If exception is UnicodeDecodeError set value using unicode 'utf-8' scheme.
+                        log.info("Setting xml value using 'utf-8' scheme.")
+                        xml.set(key, str(value, 'utf-8'))
+                    except ValueError:
+                        exception_message = format_xml_exception_message(self.location, key, value)
+                        log.exception(exception_message)
+                        raise
+
+        for source in self.html5_sources:
+            ele = etree.Element('source')
+            ele.set('src', source)
+            xml.append(ele)
+
+        if self.track:
+            ele = etree.Element('track')
+            ele.set('src', self.track)
+            xml.append(ele)
+
+        if self.handout:
+            ele = etree.Element('handout')
+            ele.set('src', self.handout)
+            xml.append(ele)
+
+        transcripts = {}
+        if self.transcripts is not None:
+            transcripts.update(self.transcripts)
+
+        edx_video_id = clean_video_id(self.edx_video_id)
+        if edxval_api and edx_video_id:
+            try:
+                # Create static dir if not created earlier.
+                resource_fs.makedirs(EXPORT_IMPORT_STATIC_DIR, recreate=True)
+
+                # Backward compatible exports
+                # edxval exports new transcripts into the course OLX and returns a transcript
+                # files map so that it can also be rewritten in old transcript metadata fields
+                # (i.e. `self.transcripts`) on import and older open-releases (<= ginkgo),
+                # who do not have deprecated contentstore yet, can also import and use new-style
+                # transcripts into their openedX instances.
+                exported_metadata = edxval_api.export_to_xml(
+                    video_id=edx_video_id,
+                    resource_fs=resource_fs,
+                    static_dir=EXPORT_IMPORT_STATIC_DIR,
+                    course_id=self.scope_ids.usage_id.context_key.for_branch(None),
+                )
+                # Update xml with edxval metadata
+                xml.append(exported_metadata['xml'])
+
+                # we don't need sub if english transcript
+                # is also in new transcripts.
+                new_transcripts = exported_metadata['transcripts']
+                transcripts.update(new_transcripts)
+                if new_transcripts.get('en'):
+                    xml.set('sub', '')
+
+            except edxval_api.ValVideoNotFoundError:
+                pass
+        else:
+            if transcripts.get('en'):
+                xml.set('sub', '')
+
+        if transcripts:
+            # Update `transcripts` attribute in the xml
+            xml.set('transcripts', json.dumps(transcripts, sort_keys=True))
+
+            # Sorting transcripts for easy testing of resulting xml
+            for transcript_language in sorted(transcripts.keys()):
+                ele = etree.Element('transcript')
+                ele.set('language', transcript_language)
+                ele.set('src', transcripts[transcript_language])
+                xml.append(ele)
+
+        # handle license specifically
+        self.add_license_to_xml(xml)
+
+        return xml
+
+    def create_youtube_url(self, youtube_id):
+        """
+
+        Args:
+            youtube_id: The ID of the video to create a link for
+
+        Returns:
+            A full youtube url to the video whose ID is passed in
+        """
+        if youtube_id:
+            return f'https://www.youtube.com/watch?v={youtube_id}'
+        else:
+            return ''
+
+    def get_context(self):
+        """
+        Extend context by data for transcript basic tab.
+        """
+        _context = {
+            'editable_metadata_fields': self.editable_metadata_fields
+        }
+        _context.update({
+            'tabs': self.tabs,
+            'html_id': self.location.html_id(),  # element_id
+            'data': self.data,
+        })
+
+        metadata_fields = copy.deepcopy(self.editable_metadata_fields)
+
+        display_name = metadata_fields['display_name']
+        video_url = metadata_fields['html5_sources']
+        video_id = metadata_fields['edx_video_id']
+        youtube_id_1_0 = metadata_fields['youtube_id_1_0']
+
+        def get_youtube_link(video_id):
+            """
+            Returns the fully-qualified YouTube URL for the given video identifier
+            """
+            # First try a lookup in VAL. If we have a YouTube entry there, it overrides the
+            # one passed in.
+            if self.edx_video_id and edxval_api:
+                val_youtube_id = edxval_api.get_url_for_profile(self.edx_video_id, "youtube")
+                if val_youtube_id:
+                    video_id = val_youtube_id
+
+            return self.create_youtube_url(video_id)
+
+        _ = self.runtime.service(self, "i18n").ugettext
+        video_url.update({
+            'help': _('The URL for your video. This can be a YouTube URL or a link to an .mp4, .ogg, or '
+                      '.webm video file hosted elsewhere on the Internet.'),
+            'display_name': _('Default Video URL'),
+            'field_name': 'video_url',
+            'type': 'VideoList',
+            'default_value': [get_youtube_link(youtube_id_1_0['default_value'])]
+        })
+
+        source_url = self.create_youtube_url(youtube_id_1_0['value'])
+        # First try a lookup in VAL. If any video encoding is found given the video id then
+        # override the source_url with it.
+        if self.edx_video_id and edxval_api:
+
+            val_profiles = ['youtube', 'desktop_webm', 'desktop_mp4']
+            if self.is_hls_playback_enabled(self.scope_ids.usage_id.context_key.for_branch(None)):
+                val_profiles.append('hls')
+
+            # Get video encodings for val profiles.
+            val_video_encodings = edxval_api.get_urls_for_profiles(self.edx_video_id, val_profiles)
+
+            # VAL's youtube source has greater priority over external youtube source.
+            if val_video_encodings.get('youtube'):
+                source_url = self.create_youtube_url(val_video_encodings['youtube'])
+
+            # If no youtube source is provided externally or in VAl, update source_url in order: hls > mp4 and webm
+            if not source_url:
+                if val_video_encodings.get('hls'):
+                    source_url = val_video_encodings['hls']
+                elif val_video_encodings.get('desktop_mp4'):
+                    source_url = val_video_encodings['desktop_mp4']
+                elif val_video_encodings.get('desktop_webm'):
+                    source_url = val_video_encodings['desktop_webm']
+
+        # Only add if html5 sources do not already contain source_url.
+        if source_url and source_url not in video_url['value']:
+            video_url['value'].insert(0, source_url)
+
+        metadata = {
+            'display_name': display_name,
+            'video_url': video_url,
+            'edx_video_id': video_id
+        }
+
+        _context.update({'transcripts_basic_tab_metadata': metadata})
+        return _context
+
+    @classmethod
+    def _parse_youtube(cls, data):
+        """
+        Parses a string of Youtube IDs such as "1.0:AXdE34_U,1.5:VO3SxfeD"
+        into a dictionary. Necessary for backwards compatibility with
+        XML-based courses.
+        """
+        ret = {'0.75': '', '1.00': '', '1.25': '', '1.50': ''}
+
+        videos = data.split(',')
+        for video in videos:
+            pieces = video.split(':')
+            try:
+                speed = '%.2f' % float(pieces[0])  # normalize speed
+
+                # Handle the fact that youtube IDs got double-quoted for a period of time.
+                # Note: we pass in "VideoFields.youtube_id_1_0" so we deserialize as a String--
+                # it doesn't matter what the actual speed is for the purposes of deserializing.
+                youtube_id = deserialize_field(cls.youtube_id_1_0, pieces[1])
+                ret[speed] = youtube_id
+            except (ValueError, IndexError):
+                log.warning('Invalid YouTube ID: %s', video)
+        return ret
+
+    @classmethod
+    def parse_video_xml(cls, xml, id_generator=None):
+        """
+        Parse video fields out of xml_data. The fields are set if they are
+        present in the XML.
+
+        Arguments:
+            id_generator is used to generate course-specific urls and identifiers
+        """
+        if isinstance(xml, str):
+            xml = etree.fromstring(xml)
+
+        field_data = {}
+
+        # Convert between key types for certain attributes --
+        # necessary for backwards compatibility.
+        conversions = {
+            # example: 'start_time': cls._example_convert_start_time
+        }
+
+        # Convert between key names for certain attributes --
+        # necessary for backwards compatibility.
+        compat_keys = {
+            'from': 'start_time',
+            'to': 'end_time'
+        }
+        sources = xml.findall('source')
+        if sources:
+            field_data['html5_sources'] = [ele.get('src') for ele in sources]
+
+        track = xml.find('track')
+        if track is not None:
+            field_data['track'] = track.get('src')
+
+        handout = xml.find('handout')
+        if handout is not None:
+            field_data['handout'] = handout.get('src')
+
+        transcripts = xml.findall('transcript')
+        if transcripts:
+            field_data['transcripts'] = {tr.get('language'): tr.get('src') for tr in transcripts}
+
+        for attr, value in xml.items():
+            if attr in compat_keys:  # lint-amnesty, pylint: disable=consider-using-get
+                attr = compat_keys[attr]
+            if attr in cls.metadata_to_strip + ('url_name', 'name'):
+                continue
+            if attr == 'youtube':
+                speeds = cls._parse_youtube(value)
+                for speed, youtube_id in speeds.items():
+                    # should have made these youtube_id_1_00 for
+                    # cleanliness, but hindsight doesn't need glasses
+                    normalized_speed = speed[:-1] if speed.endswith('0') else speed
+                    # If the user has specified html5 sources, make sure we don't use the default video
+                    if youtube_id != '' or 'html5_sources' in field_data:
+                        field_data['youtube_id_{}'.format(normalized_speed.replace('.', '_'))] = youtube_id
+            elif attr in conversions:
+                field_data[attr] = conversions[attr](value)
+            elif attr not in cls.fields:  # lint-amnesty, pylint: disable=unsupported-membership-test
+                field_data.setdefault('xml_attributes', {})[attr] = value
+            else:
+                # We export values with json.dumps (well, except for Strings, but
+                # for about a month we did it for Strings also).
+                field_data[attr] = deserialize_field(cls.fields[attr], value)  # lint-amnesty, pylint: disable=unsubscriptable-object
+
+        course_id = getattr(id_generator, 'target_course_id', None)
+        # Update the handout location with current course_id
+        if 'handout' in field_data and course_id:
+            handout_location = StaticContent.get_location_from_path(field_data['handout'])
+            if isinstance(handout_location, AssetLocator):
+                handout_new_location = StaticContent.compute_location(course_id, handout_location.path)
+                field_data['handout'] = StaticContent.serialize_asset_key_with_slash(handout_new_location)
+
+        # For backwards compatibility: Add `source` if XML doesn't have `download_video`
+        # attribute.
+        if 'download_video' not in field_data and sources:
+            field_data['source'] = field_data['html5_sources'][0]
+
+        # For backwards compatibility: if XML doesn't have `download_track` attribute,
+        # it means that it is an old format. So, if `track` has some value,
+        # `download_track` needs to have value `True`.
+        if 'download_track' not in field_data and track is not None:
+            field_data['download_track'] = True
+
+        # load license if it exists
+        field_data = LicenseMixin.parse_license_from_xml(field_data, xml)
+
+        return field_data
+
+    def import_video_info_into_val(self, xml, resource_fs, course_id):
+        """
+        Import parsed video info from `xml` into edxval.
+
+        Arguments:
+            xml (lxml object): xml representation of video to be imported.
+            resource_fs (OSFS): Import file system.
+            course_id (str): course id
+        """
+        edx_video_id = clean_video_id(self.edx_video_id)
+
+        # Create video_asset is not already present.
+        video_asset_elem = xml.find('video_asset')
+        if video_asset_elem is None:
+            video_asset_elem = etree.Element('video_asset')
+
+        # This will be a dict containing the list of names of the external transcripts.
+        # Example:
+        # {
+        #     'en': ['The_Flash.srt', 'Harry_Potter.srt'],
+        #     'es': ['Green_Arrow.srt']
+        # }
+        external_transcripts = defaultdict(list)
+
+        # Add trancript from self.sub and self.youtube_id_1_0 fields.
+        external_transcripts['en'] = [
+            subs_filename(transcript, 'en')
+            for transcript in [self.sub, self.youtube_id_1_0] if transcript
         ]
 
-    @staticmethod
-    def get_dummy():
+        for language_code, transcript in self.transcripts.items():
+            external_transcripts[language_code].append(transcript)
+
+        if edxval_api:
+            edx_video_id = edxval_api.import_from_xml(
+                video_asset_elem,
+                edx_video_id,
+                resource_fs,
+                EXPORT_IMPORT_STATIC_DIR,
+                external_transcripts,
+                course_id=course_id
+            )
+        return edx_video_id
+
+    def index_dictionary(self):
+        xblock_body = super().index_dictionary()
+        video_body = {
+            "display_name": self.display_name,
+        }
+
+        def _update_transcript_for_index(language=None):
+            """ Find video transcript - if not found, don't update index """
+            video_config_service = self.runtime.service(self, 'video_config')
+            if video_config_service:
+                try:
+                    transcript = video_config_service.get_transcript(
+                        self, lang=language, output_format=Transcript.TXT
+                    )[0].replace("\n", " ")
+                    transcript_index_name = f"transcript_{language if language else self.transcript_language}"
+                    video_body.update({transcript_index_name: transcript})
+                except TranscriptNotFoundError:
+                    pass
+
+        if self.sub:
+            _update_transcript_for_index()
+
+        # Check to see if there are transcripts in other languages besides default transcript
+        if self.transcripts:
+            for language in self.transcripts.keys():
+                _update_transcript_for_index(language)
+
+        if "content" in xblock_body:
+            xblock_body["content"].update(video_body)
+        else:
+            xblock_body["content"] = video_body
+        xblock_body["content_type"] = "Video"
+
+        return xblock_body
+
+    @property
+    def request_cache(self):
         """
-        Generate initial i18n with dummy method.
+        Returns the request_cache from the runtime.
         """
-        return translation.gettext_noop("Dummy")
+        return self.runtime.service(self, "request_cache")
+
+    @classmethod
+    @request_cached(
+        request_cache_getter=lambda args, kwargs: args[1],
+    )
+    def get_cached_val_data_for_course(cls, request_cache, video_profile_names, course_id):  # lint-amnesty, pylint: disable=unused-argument
+        """
+        Returns the VAL data for the requested video profiles for the given course.
+        """
+        return edxval_api.get_video_info_for_course_and_profiles(str(course_id), video_profile_names)
+
+    def student_view_data(self, context=None):
+        """
+        Returns a JSON representation of the student_view of this XModule.
+        The contract of the JSON content is between the caller and the particular XModule.
+        """
+        context = context or {}
+
+        # If the "only_on_web" field is set on this video, do not return the rest of the video's data
+        # in this json view, since this video is to be accessed only through its web view."
+        if self.only_on_web:
+            return {"only_on_web": True}
+
+        encoded_videos = {}
+        val_video_data = {}
+        all_sources = self.html5_sources or []
+
+        # Check in VAL data first if edx_video_id exists
+        if self.edx_video_id:
+            video_profile_names = context.get("profiles", ["mobile_low", 'desktop_mp4', 'desktop_webm', 'mobile_high'])
+            if self.is_hls_playback_enabled(self.location.course_key) and 'hls' not in video_profile_names:
+                video_profile_names.append('hls')
+
+            # get and cache bulk VAL data for course
+            val_course_data = self.get_cached_val_data_for_course(
+                self.request_cache,
+                video_profile_names,
+                self.location.course_key,
+            )
+            val_video_data = val_course_data.get(self.edx_video_id, {})
+
+            # Get the encoded videos if data from VAL is found
+            if val_video_data:
+                encoded_videos = val_video_data.get('profiles', {})
+
+            # If information for this edx_video_id is not found in the bulk course data, make a
+            # separate request for this individual edx_video_id, unless cache misses are disabled.
+            # This is useful/required for videos that don't have a course designated, such as the introductory video
+            # that is shared across many courses.  However, this results in a separate database request so watch
+            # out for any performance hit if many such videos exist in a course.  Set the 'allow_cache_miss' parameter
+            # to False to disable this fall back.
+            elif context.get("allow_cache_miss", "True").lower() == "true":
+                try:
+                    val_video_data = edxval_api.get_video_info(self.edx_video_id)
+                    # Unfortunately, the VAL API is inconsistent in how it returns the encodings, so remap here.
+                    for enc_vid in val_video_data.pop('encoded_videos'):
+                        if enc_vid['profile'] in video_profile_names:
+                            encoded_videos[enc_vid['profile']] = {key: enc_vid[key] for key in ["url", "file_size"]}
+                except edxval_api.ValVideoNotFoundError:
+                    pass
+
+        # Fall back to other video URLs in the video block if not found in VAL
+        if not encoded_videos:
+            if all_sources:
+                encoded_videos["fallback"] = {
+                    "url": all_sources[0],
+                    "file_size": 0,  # File size is unknown for fallback URLs
+                }
+
+            # Include youtube link if there is no encoding for mobile- ie only a fallback URL or no encodings at all
+            # We are including a fallback URL for older versions of the mobile app that don't handle Youtube urls
+            if self.youtube_id_1_0:
+                encoded_videos["youtube"] = {
+                    "url": self.create_youtube_url(self.youtube_id_1_0),
+                    "file_size": 0,  # File size is not relevant for external link
+                }
+
+        video_config_service = self.runtime.service(self, 'video_config')
+        if video_config_service:
+            available_translations = video_config_service.available_translations(
+                self,
+                self.get_transcripts_info()
+            )
+        else:
+            available_translations = []
+        transcripts = {
+            lang: self.runtime.handler_url(self, 'transcript', 'download', query="lang=" + lang, thirdparty=True)
+            for lang in available_translations
+        }
+
+        return {
+            "only_on_web": self.only_on_web,
+            "duration": val_video_data.get('duration', None),
+            "transcripts": transcripts,
+            "encoded_videos": encoded_videos,
+            "all_sources": all_sources,
+        }
+
+    def _poster(self):
+        """
+        Helper to get poster info from edxval
+        """
+        if edxval_api and self.edx_video_id:
+            return edxval_api.get_course_video_image_url(
+                course_id=self.scope_ids.usage_id.context_key.for_branch(None),
+                edx_video_id=self.edx_video_id.strip()
+            )
+        return None
+
+
+VideoBlock = (
+    _ExtractedVideoBlock if settings.USE_EXTRACTED_VIDEO_BLOCK
+    else _BuiltInVideoBlock
+)
+VideoBlock.__name__ = "VideoBlock"
+
diff --git a/xblocks_contrib/video/video_handlers.py b/xblocks_contrib/video/video_handlers.py
new file mode 100644
index 00000000..738d934e
--- /dev/null
+++ b/xblocks_contrib/video/video_handlers.py
@@ -0,0 +1,553 @@
+# NOTE: Original code has been copied from the following files: 
+# https://github.com/openedx/edx-platform/blob/master/xmodule/video_block/video_handlers.py
+"""
+Handlers for video block.
+
+StudentViewHandlers are handlers for video block instance.
+StudioViewHandlers are handlers for video descriptor instance.
+"""
+
+
+import json
+import logging
+import math
+
+from django.utils.timezone import now
+from opaque_keys.edx.locator import CourseLocator
+from webob import Response
+from xblock.core import XBlock
+from xblock.exceptions import JsonHandlerError
+
+from xmodule.exceptions import NotFoundError
+from xmodule.fields import RelativeTime
+
+from openedx.core.djangoapps.video_config.transcripts_utils import (
+    Transcript,
+    clean_video_id,
+    subs_filename,
+)
+from xblocks_contrib.video.exceptions import (
+    TranscriptsGenerationException,
+    TranscriptNotFoundError,
+)
+
+log = logging.getLogger(__name__)
+
+
+def get_transcript(
+    video_block,
+    lang: str | None = None,
+    output_format: str = 'srt',
+    youtube_id: str | None = None,
+    is_bumper: bool = False,
+) -> tuple[bytes, str, str]:
+    """
+    Retrieve a transcript using a video block's configuration service.
+
+    Returns:
+        tuple(bytes, str, str): transcript content, filename, and mimetype.
+
+    Raises:
+        Exception: If the video config service is not available or the transcript cannot be retrieved.
+    """
+    video_config_service = video_block.runtime.service(video_block, 'video_config')
+    if not video_config_service:
+        raise Exception("Video config service not found")
+    return video_config_service.get_transcript(video_block, lang, output_format, youtube_id, is_bumper)
+
+
+# Disable no-member warning:
+# pylint: disable=no-member
+
+def to_boolean(value):
+    """
+    Convert a value from a GET or POST request parameter to a bool
+    """
+    if isinstance(value, bytes):
+        value = value.decode('ascii', errors='replace')
+    if isinstance(value, str):
+        return value.lower() == 'true'
+    else:
+        return bool(value)
+
+
+class VideoStudentViewHandlers:
+    """
+    Handlers for video block instance.
+    """
+    global_speed = None
+    transcript_language = None
+
+    def handle_ajax(self, dispatch, data):
+        """
+        Update values of xfields, that were changed by student.
+        """
+        accepted_keys = [
+            'speed', 'auto_advance', 'saved_video_position', 'transcript_language',
+            'transcript_download_format', 'youtube_is_available',
+            'bumper_last_view_date', 'bumper_do_not_show_again'
+        ]
+
+        conversions = {
+            'speed': json.loads,
+            'auto_advance': json.loads,
+            'saved_video_position': RelativeTime.isotime_to_timedelta,
+            'youtube_is_available': json.loads,
+            'bumper_last_view_date': to_boolean,
+            'bumper_do_not_show_again': to_boolean,
+        }
+
+        if dispatch == 'save_user_state':
+            for key in data:
+                if key in accepted_keys:
+                    if key in conversions:
+                        value = conversions[key](data[key])
+                    else:
+                        value = data[key]
+
+                    if key == 'bumper_last_view_date':
+                        value = now()
+
+                    if key == 'speed' and math.isnan(value):
+                        message = f"Invalid speed value {value}, must be a float."
+                        log.warning(message)
+                        return json.dumps({'success': False, 'error': message})
+
+                    setattr(self, key, value)
+
+                    if key == 'speed':
+                        self.global_speed = self.speed
+
+            return json.dumps({'success': True})
+
+        log.debug(f"GET {data}")
+        log.debug(f"DISPATCH {dispatch}")
+
+        raise NotFoundError('Unexpected dispatch type')
+
+    def get_static_transcript(self, request, transcripts):
+        """
+        Courses that are imported with the --nostatic flag do not show
+        transcripts/captions properly even if those captions are stored inside
+        their static folder. This adds a last resort method of redirecting to
+        the static asset path of the course if the transcript can't be found
+        inside the contentstore and the course has the static_asset_path field
+        set.
+
+        transcripts (dict): A dict with all transcripts and a sub.
+        """
+        response = Response(status=404)
+        # Only do redirect for English
+        if not self.transcript_language == 'en':
+            return response
+
+        # If this video lives in library, the code below is not relevant and will error.
+        if not isinstance(self.course_id, CourseLocator):
+            return response
+
+        video_id = request.GET.get('videoId', None)
+        if video_id:
+            transcript_name = video_id
+        else:
+            transcript_name = transcripts["sub"]
+
+        if transcript_name:
+            # Get the asset path for course
+            asset_path = None
+            course = self.runtime.modulestore.get_course(self.course_id)
+            if course.static_asset_path:
+                asset_path = course.static_asset_path
+            else:
+                # It seems static_asset_path is not set in any XMLModuleStore courses.
+                asset_path = getattr(course, 'data_dir', '')
+
+            if asset_path:
+                response = Response(
+                    status=307,
+                    location='/static/{}/{}'.format(
+                        asset_path,
+                        subs_filename(transcript_name, self.transcript_language)
+                    )
+                )
+        return response
+
+    @XBlock.json_handler
+    def publish_completion(self, data, dispatch):  # pylint: disable=unused-argument
+        """
+        Entry point for completion for student_view.
+
+        Parameters:
+            data: JSON dict:
+                key: "completion"
+                value: float in range [0.0, 1.0]
+
+            dispatch: Ignored.
+        Return value: JSON response (200 on success, 400 for malformed data)
+        """
+        completion_service = self.runtime.service(self, 'completion')
+        if completion_service is None:
+            raise JsonHandlerError(500, "No completion service found")
+        if not completion_service.completion_tracking_enabled():
+            raise JsonHandlerError(404, "Completion tracking is not enabled and API calls are unexpected")
+        if not isinstance(data['completion'], (int, float)):
+            message = "Invalid completion value {}. Must be a float in range [0.0, 1.0]"
+            raise JsonHandlerError(400, message.format(data['completion']))
+        if not 0.0 <= data['completion'] <= 1.0:
+            message = "Invalid completion value {}. Must be in range [0.0, 1.0]"
+            raise JsonHandlerError(400, message.format(data['completion']))
+        self.runtime.publish(self, "completion", data)
+        return {"result": "ok"}
+
+    @staticmethod
+    def make_transcript_http_response(content, filename, language, content_type, add_attachment_header=True):
+        """
+        Construct `Response` object.
+
+        Arguments:
+            content (unicode): transcript content
+            filename (unicode): transcript filename
+            language (unicode): transcript language
+            mimetype (unicode): transcript content type
+            add_attachment_header (bool): whether to add attachment header or not
+        """
+        headerlist = [
+            ('Content-Language', language),
+        ]
+
+        if add_attachment_header:
+            headerlist.append(
+                (
+                    'Content-Disposition',
+                    f'attachment; filename="{filename}"'
+                )
+            )
+
+        response = Response(
+            content,
+            headerlist=headerlist,
+            charset='utf8'
+        )
+        response.content_type = content_type
+
+        return response
+
+    @XBlock.handler
+    def transcript(self, request, dispatch):
+        """
+        Entry point for transcript handlers for student_view.
+
+        Request GET contains:
+            (optional) `videoId` for `translation` dispatch.
+            `is_bumper=1` flag for bumper case.
+
+        Dispatches, (HTTP GET):
+            /translation/[language_id]
+            /download
+            /available_translations/
+
+        Explanations:
+            `download`: returns SRT or TXT file.
+            `translation`: depends on HTTP methods:
+                    Provide translation for requested language, SJSON format is sent back on success,
+                    Proper language_id should be in url.
+            `available_translations`:
+                    Returns list of languages, for which transcript files exist.
+                    For 'en' check if SJSON exists. For non-`en` check if SRT file exists.
+        """
+        is_bumper = request.GET.get('is_bumper', False)
+        transcripts = self.get_transcripts_info(is_bumper)
+
+        if dispatch.startswith('translation'):
+            language = dispatch.replace('translation', '').strip('/')
+
+            # Because scrapers hit video blocks, verify that a user exists.
+            # use the _request attr to get the django request object.
+            if not request._request.user:  # pylint: disable=protected-access
+                log.info("Transcript: user must be logged or public view enabled to get transcript")
+                return Response(status=403)
+
+            if not language:
+                log.info("Invalid /translation request: no language.")
+                return Response(status=400)
+
+            if language not in ['en'] + list(transcripts["transcripts"].keys()):
+                log.info("Video: transcript facilities are not available for given language.")
+                return Response(status=404)
+
+            if language != self.transcript_language:
+                self.transcript_language = language
+
+            try:
+                youtube_id = None if is_bumper else request.GET.get('videoId')
+                content, filename, mimetype = get_transcript(
+                    self,
+                    lang=self.transcript_language,
+                    output_format=Transcript.SJSON,
+                    youtube_id=youtube_id,
+                    is_bumper=is_bumper
+                )
+                response = self.make_transcript_http_response(
+                    content,
+                    filename,
+                    self.transcript_language,
+                    mimetype,
+                    add_attachment_header=False
+                )
+            except TranscriptNotFoundError as exc:
+                edx_video_id = clean_video_id(self.edx_video_id)
+                log.warning(
+                    '[Translation Dispatch] %s: %s',
+                    self.location,
+                    exc if is_bumper else f'Transcript not found for {edx_video_id}, lang: {self.transcript_language}',
+                )
+                response = self.get_static_transcript(request, transcripts)
+
+        elif dispatch == 'download':
+            lang = request.GET.get('lang', None)
+
+            try:
+                content, filename, mimetype = get_transcript(self, lang, output_format=self.transcript_download_format)
+            except TranscriptNotFoundError:
+                return Response(status=404)
+
+            response = self.make_transcript_http_response(
+                content,
+                filename,
+                self.transcript_language,
+                mimetype
+            )
+        elif dispatch.startswith('available_translations'):
+            video_config_service = self.runtime.service(self, 'video_config')
+            if not video_config_service:
+                return Response(status=404)
+            available_translations = video_config_service.available_translations(
+                self,
+                transcripts,
+                verify_assets=True,
+                is_bumper=is_bumper
+            )
+            if available_translations:
+                response = Response(json.dumps(available_translations))
+                response.content_type = 'application/json'
+            else:
+                response = Response(status=404)
+        else:  # unknown dispatch
+            log.debug("Dispatch is not allowed")
+            response = Response(status=404)
+
+        return response
+
+    @XBlock.handler
+    def student_view_user_state(self, request, suffix=''):  # lint-amnesty, pylint: disable=unused-argument
+        """
+        Endpoint to get user-specific state, like current position and playback speed,
+        without rendering the full student_view HTML. This is similar to student_view_state,
+        but that one cannot contain user-specific info.
+        """
+        view_state = self.student_view_data()
+        view_state.update({
+            "saved_video_position": self.saved_video_position.total_seconds(),
+            "speed": self.speed,
+        })
+        return Response(
+            json.dumps(view_state),
+            content_type='application/json',
+            charset='UTF-8'
+        )
+
+    @XBlock.handler
+    def yt_video_metadata(self, request, suffix=''):  # lint-amnesty, pylint: disable=unused-argument
+        """
+        Endpoint to get YouTube metadata.
+        This handler is only used in the Learning-Core-based runtime. The old
+        runtime uses a similar REST API that's not an XBlock handler.
+        """
+        from lms.djangoapps.courseware.views.views import load_metadata_from_youtube
+        if not self.youtube_id_1_0:
+            # TODO: more informational response to explain that yt_video_metadata not supported for non-youtube videos.
+            return Response('{}', status=400)
+
+        metadata, status_code = load_metadata_from_youtube(video_id=self.youtube_id_1_0, request=request)
+        response = Response(json.dumps(metadata), status=status_code)
+        response.content_type = 'application/json'
+        return response
+
+
+class VideoStudioViewHandlers:
+    """
+    Handlers for Studio view.
+    """
+    def validate_transcript_upload_data(self, data):
+        """
+        Validates video transcript file.
+        Arguments:
+            data: Transcript data to be validated.
+        Returns:
+            None or String
+            If there is error returns error message otherwise None.
+        """
+        error = None
+        _ = self.runtime.service(self, "i18n").ugettext
+        # Validate the must have attributes - this error is unlikely to be faced by common users.
+        must_have_attrs = ['edx_video_id', 'language_code', 'new_language_code']
+        missing = [attr for attr in must_have_attrs if attr not in data]
+
+        # Get available transcript languages.
+        transcripts = self.get_transcripts_info()
+        video_config_service = self.runtime.service(self, 'video_config')
+        if not video_config_service:
+            return error
+        available_translations = video_config_service.available_translations(
+            self,
+            transcripts,
+            verify_assets=True
+        )
+
+        if missing:
+            error = _('The following parameters are required: {missing}.').format(missing=', '.join(missing))
+        elif (
+            data['language_code'] != data['new_language_code'] and data['new_language_code'] in available_translations
+        ):
+            error = _('A transcript with the "{language_code}" language code already exists.').format(
+                language_code=data['new_language_code'],
+            )
+        elif 'file' not in data:
+            error = _('A transcript file is required.')
+
+        return error
+
+    @XBlock.handler
+    def studio_transcript(self, request, dispatch):
+        """
+        Entry point for Studio transcript handlers.
+
+        Dispatches:
+            /translation/[language_id] - language_id sould be in url.
+
+        `translation` dispatch support following HTTP methods:
+            `POST`:
+                Upload srt file. Check possibility of generation of proper sjson files.
+                For now, it works only for self.transcripts, not for `en`.
+            `GET:
+                Return filename from storage. SRT format is sent back on success. Filename should be in GET dict.
+
+        We raise all exceptions right in Studio:
+            NotFoundError:
+                Video or asset was deleted from module/contentstore, but request came later.
+                Seems impossible to be raised. block_render.py catches NotFoundErrors from here.
+
+            /translation POST:
+                TypeError:
+                    Unjsonable filename or content.
+                TranscriptsGenerationException, TranscriptException:
+                    no SRT extension or not parse-able by PySRT
+                UnicodeDecodeError: non-UTF8 uploaded file content encoding.
+        """
+        if dispatch.startswith('translation'):
+
+            if request.method == 'POST':
+                response = self._studio_transcript_upload(request)
+            elif request.method == 'DELETE':
+                response = self._studio_transcript_delete(request)
+            elif request.method == 'GET':
+                response = self._studio_transcript_get(request)
+            else:
+                # Any other HTTP method is not allowed.
+                response = Response(status=404)
+
+        else:  # unknown dispatch
+            log.debug("Dispatch is not allowed")
+            response = Response(status=404)
+
+        return response
+
+    def _studio_transcript_upload(self, request):
+        """
+        Upload transcript. Used in "POST" method in `studio_transcript`
+        """
+        _ = self.runtime.service(self, "i18n").ugettext
+        video_config_service = self.runtime.service(self, 'video_config')
+        if not video_config_service:
+            return Response(json={'error': _('Runtime does not support transcripts.')}, status=400)
+        error = self.validate_transcript_upload_data(data=request.POST)
+        if error:
+            return Response(json={'error': error}, status=400)
+        edx_video_id = (request.POST['edx_video_id'] or "").strip()
+        language_code = request.POST['language_code']
+        new_language_code = request.POST['new_language_code']
+        try:
+            video_config_service.upload_transcript(
+                video_block=self,  # NOTE: .edx_video_id and .transcripts may get mutated
+                edx_video_id=edx_video_id,
+                language_code=language_code,
+                new_language_code=new_language_code,
+                transcript_file=request.POST['file'].file,
+            )
+            return Response(
+                json.dumps(
+                    {
+                        "edx_video_id": edx_video_id or self.edx_video_id,
+                        "language_code": new_language_code,
+                    }
+                ),
+                status=201,
+            )
+        except (TranscriptsGenerationException, UnicodeDecodeError):
+            return Response(
+                json={
+                    'error': _(
+                        'There is a problem with this transcript file. Try to upload a different file.'
+                    )
+                },
+                status=400
+            )
+
+    def _studio_transcript_delete(self, request):
+        """
+        Delete transcript. Used in "DELETE" method in `studio_transcript`
+        """
+        _ = self.runtime.service(self, "i18n").ugettext
+        video_config_service = self.runtime.service(self, 'video_config')
+        if not video_config_service:
+            return Response(json={'error': _('Runtime does not support transcripts.')}, status=400)
+        request_data = request.json
+        if 'lang' not in request_data or 'edx_video_id' not in request_data:
+            return Response(status=400)
+        video_config_service.delete_transcript(
+            video_block=self,
+            edx_video_id=request_data['edx_video_id'],
+            language_code=request_data['lang'],
+        )
+        return Response(status=200)
+
+    def _studio_transcript_get(self, request):
+        """
+        Get transcript. Used in "GET" method in `studio_transcript`
+        """
+        _ = self.runtime.service(self, "i18n").ugettext
+        language = request.GET.get('language_code')
+        if not language:
+            return Response(json={'error': _('Language is required.')}, status=400)
+
+        try:
+            video_config_service = self.runtime.service(self, 'video_config')
+            if not video_config_service:
+                return Response(status=404)
+            transcript_content, transcript_name, mime_type = video_config_service.get_transcript(
+                self, lang=language, output_format=Transcript.SRT
+            )
+            response = Response(transcript_content, headerlist=[
+                (
+                    'Content-Disposition',
+                    f'attachment; filename="{transcript_name}"'
+                ),
+                ('Content-Language', language),
+                ('Content-Type', mime_type)
+            ])
+        except (
+            UnicodeDecodeError,
+            TranscriptsGenerationException,
+            TranscriptNotFoundError
+        ):
+            response = Response(status=404)
+        return response
diff --git a/xblocks_contrib/video/video_transcripts_utils.py b/xblocks_contrib/video/video_transcripts_utils.py
new file mode 100644
index 00000000..b0ab330e
--- /dev/null
+++ b/xblocks_contrib/video/video_transcripts_utils.py
@@ -0,0 +1,241 @@
+# NOTE: Code has been copied from the following source files
+# https://github.com/openedx/edx-platform/blob/farhan/remove-unused-video-code/openedx/core/djangoapps/video_config/transcripts_utils.py
+"""
+Utility functions for transcripts.
+++++++++++++++++++++++++++++++++++
+"""
+
+import copy
+import html
+import logging
+import os
+from functools import wraps
+
+import simplejson as json
+from django.conf import settings
+from django.utils.translation import get_language_info
+from pysrt import SubRipFile, SubRipItem, SubRipTime
+from pysrt.srtexc import Error
+
+from xblocks_contrib.video.bumper_utils import get_bumper_settings
+from xblocks_contrib.video.exceptions import NotFoundError, TranscriptsGenerationException
+
+try:
+    from edxval import api as edxval_api
+except ImportError:
+    edxval_api = None
+
+
+log = logging.getLogger(__name__)
+
+NON_EXISTENT_TRANSCRIPT = 'non_existent_dummy_file_name'
+
+
+class Transcript:
+    """
+    Container for transcript methods.
+    """
+    SRT = 'srt'
+    TXT = 'txt'
+    SJSON = 'sjson'
+    mime_types = {
+        SRT: 'application/x-subrip; charset=utf-8',
+        TXT: 'text/plain; charset=utf-8',
+        SJSON: 'application/json',
+    }
+
+
+def get_html5_ids(html5_sources):
+    """
+    Helper method to parse out an HTML5 source into the ideas
+    NOTE: This assumes that '/' are not in the filename
+    """
+    html5_ids = [x.split('/')[-1].rsplit('.', 1)[0] for x in html5_sources]
+    return html5_ids
+
+def subs_filename(subs_id, lang='en'):
+    """
+    Generate proper filename for storage.
+    """
+    if lang == 'en':
+        return f'subs_{subs_id}.srt.sjson'
+    else:
+        return f'{lang}_subs_{subs_id}.srt.sjson'
+
+def clean_video_id(edx_video_id):
+    """
+    Cleans an edx video ID.
+
+    Arguments:
+        edx_video_id(unicode): edx-val's video identifier
+    """
+    return edx_video_id and edx_video_id.strip()
+
+def get_available_transcript_languages(edx_video_id):
+    """
+    Gets available transcript languages for a video.
+
+    Arguments:
+        edx_video_id(unicode): edx-val's video identifier
+
+    Returns:
+        A list containing distinct transcript language codes against all the passed video ids.
+    """
+    available_languages = []
+    edx_video_id = clean_video_id(edx_video_id)
+    if edxval_api and edx_video_id:
+        available_languages = edxval_api.get_available_transcript_languages(video_id=edx_video_id)
+
+    return available_languages
+
+class VideoTranscriptsMixin:
+    """Mixin class for transcript functionality.
+
+    This is necessary for VideoBlock.
+    """
+
+    def get_default_transcript_language(self, transcripts, dest_lang=None):
+        """
+        Returns the default transcript language for this video block.
+
+        Args:
+            transcripts (dict): A dict with all transcripts and a sub.
+            dest_lang (unicode): language coming from unit translation language selector.
+        """
+        sub, other_lang = transcripts["sub"], transcripts["transcripts"]
+
+        if dest_lang:
+            resolved_transcript_dest_lang = resolve_language_code_to_transcript_code(transcripts, dest_lang)
+            if resolved_transcript_dest_lang:
+                return resolved_transcript_dest_lang
+            # language in plugin selector is english and empty transcripts or transcripts and sub exists
+            if dest_lang == 'en' and (not other_lang or (other_lang and sub)):
+                return 'en'
+
+        if self.transcript_language in other_lang:
+            return self.transcript_language
+
+        if sub:
+            return 'en'
+
+        if len(other_lang) > 0:
+            return sorted(other_lang)[0]
+
+        return 'en'
+
+    def get_transcripts_info(self, is_bumper=False):
+        """
+        Returns a transcript dictionary for the video.
+
+        Arguments:
+            is_bumper(bool): If True, the request is for the bumper transcripts
+            include_val_transcripts(bool): If True, include edx-val transcripts as well
+        """
+        # TODO: This causes a circular import when imported at the top-level.
+        #       This import will be removed as part of the VideoBlock extraction.
+        #       https://github.com/openedx/edx-platform/issues/36282
+        from xmodule.video_block.bumper_utils import get_bumper_settings
+
+        if is_bumper:
+            transcripts = copy.deepcopy(get_bumper_settings(self).get('transcripts', {}))
+            sub = transcripts.pop("en", "")
+        else:
+            transcripts = self.transcripts if self.transcripts else {}
+            sub = self.sub
+
+        # Only attach transcripts that are not empty.
+        transcripts = {
+            language_code: transcript_file
+            for language_code, transcript_file in transcripts.items() if transcript_file != ''
+        }
+
+        # bumper transcripts are stored in content store so we don't need to include val transcripts
+        if not is_bumper:
+            transcript_languages = get_available_transcript_languages(edx_video_id=self.edx_video_id)
+            # HACK Warning! this is temporary and will be removed once edx-val take over the
+            # transcript module and contentstore will only function as fallback until all the
+            # data is migrated to edx-val.
+            for language_code in transcript_languages:
+                if language_code == 'en' and not sub:
+                    sub = NON_EXISTENT_TRANSCRIPT
+                elif not transcripts.get(language_code):
+                    transcripts[language_code] = NON_EXISTENT_TRANSCRIPT
+
+        return {
+            "sub": sub,
+            "transcripts": transcripts,
+        }
+
+
+def resolve_language_code_to_transcript_code(transcripts, dest_lang):
+    """
+    Attempts to match the requested dest lang with the existing transcript languages
+    """
+    sub, other_lang = transcripts["sub"], transcripts["transcripts"]
+    # lang code exists in list of other transcript languages as-is
+    if dest_lang in other_lang:
+        return dest_lang
+
+    # Language codes can be base languages, 2-3 characters, or they can include a
+    # locale (`fr` for french, `fr-ca` for canadian french). Sometimes the part after the
+    # dash is capitalized, sometimes it is not. Check both variants.
+    dash_index = dest_lang.find('-')
+    if dash_index >= 0:
+        lowercase_dest_lang = dest_lang.lower()
+        if lowercase_dest_lang in other_lang:
+            log.debug("language code %s resolved to %s", dest_lang, lowercase_dest_lang)
+            return lowercase_dest_lang
+
+        generic_lang_code = lowercase_dest_lang[:dash_index]
+        uppercase_dest_lang = generic_lang_code + lowercase_dest_lang[dash_index:].upper()
+        if uppercase_dest_lang in other_lang:
+            log.debug("language code %s resolved to %s", dest_lang, uppercase_dest_lang)
+            return uppercase_dest_lang
+
+        if generic_lang_code in other_lang:
+            log.debug("language code %s resolved to generic %s", dest_lang, generic_lang_code)
+            return generic_lang_code
+
+
+def get_endonym_or_label(language_code):
+    """
+    Given a language code, attempt to look up the endonym, or local name, for that language
+    """
+
+    lowercase_code = language_code.lower()
+    # LANGUAGE_DICT is an edx-configured mapping of language codes to endonym. It's a bit more
+    # specific than the django utility, so try that first. All language codes in this dict will
+    # be lowercase
+    if local_name := settings.LANGUAGE_DICT.get(lowercase_code):
+        return local_name
+
+    # get_language_info attempts to look up language info in a hardcoded list in
+    # django.conf.translations. It will do automatic "generalizations", i.e. it doesn't
+    # have `es-419` so it then tries `es`. That's why we only do this after checking
+    # LANGUAGE_DICT
+    try:
+        lang_info = get_language_info(language_code)
+        return lang_info['name_local']
+    except KeyError:
+        pass
+
+    # Last place to look is in settings.ALL_LANGUAGES. Ideally we find the actual code,
+    # but also, check the 'generic' language. If even the generic language isn't found,
+    # something is wrong, so log an error and throw an exception.
+    first_dash_index = language_code.find('-')
+    generic_code = None if first_dash_index == -1 else language_code[:first_dash_index]
+    potential_generic_label = None
+    for code, language_label in settings.ALL_LANGUAGES:
+        # check for lowercase of the whole code, but as far as I can tell, the generic codes are
+        # always lowercase
+        if code in (language_code, lowercase_code):
+            return language_label
+        if generic_code and code == generic_code:
+            potential_generic_label = language_label
+        elif code > language_code:
+            break
+    if potential_generic_label:
+        return potential_generic_label
+
+    log.error("A label was requested for language code `%s` but the code is completely unknown", language_code)
+    raise NotFoundError(f"Unknown language `{language_code}`")
diff --git a/xblocks_contrib/video/video_utils.py b/xblocks_contrib/video/video_utils.py
new file mode 100644
index 00000000..c88e7f1f
--- /dev/null
+++ b/xblocks_contrib/video/video_utils.py
@@ -0,0 +1,211 @@
+# NOTE: Code has been copied from the following source files
+# https://github.com/openedx/edx-platform/blob/master/xmodule/video_block/video_utils.py
+"""
+Module contains utils specific for video_block but not for transcripts.
+"""
+
+
+import logging
+from collections import OrderedDict
+from urllib.parse import parse_qs, urlencode, urlparse, urlsplit, urlunsplit
+
+from django.conf import settings
+from django.core.exceptions import ValidationError
+from django.core.validators import URLValidator
+
+log = logging.getLogger(__name__)
+
+
+def create_youtube_string(block):
+    """
+    Create a string of Youtube IDs from `block`'s metadata
+    attributes. Only writes a speed if an ID is present in the
+    block.  Necessary for backwards compatibility with XML-based
+    courses.
+    """
+    youtube_ids = [
+        block.youtube_id_0_75,
+        block.youtube_id_1_0,
+        block.youtube_id_1_25,
+        block.youtube_id_1_5
+    ]
+    youtube_speeds = ['0.75', '1.00', '1.25', '1.50']
+    return ','.join([
+        ':'.join(pair)
+        for pair
+        in zip(youtube_speeds, youtube_ids)
+        if pair[1]
+    ])
+
+
+def rewrite_video_url(cdn_base_url, original_video_url):
+    """
+    Returns a re-written video URL for cases when an alternate source
+    has been configured and is selected using factors like
+    user location.
+
+    Re-write rules for country codes are specified via the
+    EDX_VIDEO_CDN_URLS configuration structure.
+
+    :param cdn_base_url: The scheme, hostname, port and any relevant path prefix for the alternate CDN,
+    for example: https://mirror.example.cn/edx
+    :param original_video_url: The canonical source for this video, for example:
+    https://cdn.example.com/edx-course-videos/VIDEO101/001.mp4
+    :return: The re-written URL
+    """
+
+    if (not cdn_base_url) or (not original_video_url):
+        return None
+
+    parsed = urlparse(original_video_url)
+    # Contruction of the rewrite url is intentionally very flexible of input.
+    # For example, https://www.edx.org/ + /foo.html will be rewritten to
+    # https://www.edx.org/foo.html.
+    rewritten_url = cdn_base_url.rstrip("/") + "/" + parsed.path.lstrip("/")
+    validator = URLValidator()
+
+    try:
+        validator(rewritten_url)
+        return rewritten_url
+    except ValidationError:
+        log.warning("Invalid CDN rewrite URL encountered, %s", rewritten_url)
+
+    # Mimic the behavior of removed get_video_from_cdn in this regard and
+    # return None causing the caller to use the original URL.
+    return None
+
+
+def get_poster(video):
+    """
+    Generate poster metadata.
+
+    youtube_streams is string that contains '1.00:youtube_id'
+
+    Poster metadata is dict of youtube url for image thumbnail and edx logo
+    """
+    if not video.bumper.get("enabled"):
+        return
+
+    poster = OrderedDict({"url": "", "type": ""})
+
+    if video.youtube_streams:
+        youtube_id = video.youtube_streams.split('1.00:')[1].split(',')[0]
+        poster["url"] = settings.YOUTUBE['IMAGE_API'].format(youtube_id=youtube_id)
+        poster["type"] = "youtube"
+    else:
+        poster["url"] = "https://www.edx.org/sites/default/files/theme/edx-logo-header.png"
+        poster["type"] = "html5"
+
+    return poster
+
+
+def format_xml_exception_message(location, key, value):
+    """
+    Generate exception message for VideoBlock class which will use for ValueError and UnicodeDecodeError
+    when setting xml attributes.
+    """
+    exception_message = "Block-location:{location}, Key:{key}, Value:{value}".format(
+        location=str(location),
+        key=key,
+        value=value
+    )
+    return exception_message
+
+
+def set_query_parameter(url, param_name, param_value):
+    """
+    Given a URL, set or replace a query parameter and return the
+    modified URL.
+    """
+    scheme, netloc, path, query_string, fragment = urlsplit(url)
+    query_params = parse_qs(query_string)
+    query_params[param_name] = [param_value]
+    new_query_string = urlencode(query_params, doseq=True)
+
+    return urlunsplit((scheme, netloc, path, new_query_string, fragment))
+
+
+def deserialize_field(field, value):
+    """
+    Deserialize the string version to the value stored internally.
+
+    Note that this is not the same as the value returned by from_json, as model types typically store
+    their value internally as JSON. By default, this method will return the result of calling json.loads
+    on the supplied value, unless json.loads throws a TypeError, or the type of the value returned by json.loads
+    is not supported for this class (from_json throws an Error). In either of those cases, this method returns
+    the input value.
+    """
+    try:
+        deserialized = json.loads(value)
+        if deserialized is None:
+            return deserialized
+        try:
+            field.from_json(deserialized)
+            return deserialized
+        except (ValueError, TypeError):
+            # Support older serialized version, which was just a string, not result of json.dumps.
+            # If the deserialized version cannot be converted to the type (via from_json),
+            # just return the original value. For example, if a string value of '3.4' was
+            # stored for a String field (before we started storing the result of json.dumps),
+            # then it would be deserialized as 3.4, but 3.4 is not supported for a String
+            # field. Therefore field.from_json(3.4) will throw an Error, and we should
+            # actually return the original value of '3.4'.
+            return value
+
+    except (ValueError, TypeError):
+        # Support older serialized version.
+        return value
+
+
+def load_metadata_from_youtube(video_id, request):
+    """
+    Get metadata about a YouTube video.
+
+    This method is used via the standalone /courses/yt_video_metadata REST API
+    endpoint, or via the video XBlock as a its 'yt_video_metadata' handler.
+    """
+    metadata = {}
+    status_code = 500
+    if video_id and settings.YOUTUBE_API_KEY and settings.YOUTUBE_API_KEY != 'PUT_YOUR_API_KEY_HERE':
+        yt_api_key = settings.YOUTUBE_API_KEY
+        yt_metadata_url = settings.YOUTUBE['METADATA_URL']
+        yt_timeout = settings.YOUTUBE.get('TEST_TIMEOUT', 1500) / 1000  # converting milli seconds to seconds
+
+        headers = {}
+        http_referer = None
+
+        try:
+            # This raises an attribute error if called from the xblock yt_video_metadata handler, which passes
+            # a webob request instead of a django request.
+            http_referer = request.META.get('HTTP_REFERER')
+        except AttributeError:
+            # So here, let's assume it's a webob request and access the referer the webob way.
+            http_referer = request.referer
+
+        if http_referer:
+            headers['Referer'] = http_referer
+
+        payload = {'id': video_id, 'part': 'contentDetails', 'key': yt_api_key}
+        try:
+            res = requests.get(yt_metadata_url, params=payload, timeout=yt_timeout, headers=headers)
+            status_code = res.status_code
+            if res.status_code == 200:
+                try:
+                    res_json = res.json()
+                    if res_json.get('items', []):
+                        metadata = res_json
+                    else:
+                        logging.warning('Unable to find the items in response. Following response '
+                                        'was received: {res}'.format(res=res.text))
+                except ValueError:
+                    logging.warning('Unable to decode response to json. Following response '
+                                    'was received: {res}'.format(res=res.text))
+            else:
+                logging.warning('YouTube API request failed with status code={status} - '
+                                'Error message is={message}'.format(status=status_code, message=res.text))
+        except (Timeout, ConnectionError):
+            logging.warning('YouTube API request failed because of connection time out or connection error')
+    else:
+        logging.warning('YouTube API key or video id is None. Please make sure API key and video id is not None')
+
+    return metadata, status_code
diff --git a/xblocks_contrib/video/video_xfields.py b/xblocks_contrib/video/video_xfields.py
new file mode 100644
index 00000000..5e6f19d9
--- /dev/null
+++ b/xblocks_contrib/video/video_xfields.py
@@ -0,0 +1,210 @@
+# NOTE: Code has been copied from the following source files
+# https://github.com/openedx/edx-platform/blob/master/xmodule/video_block/video_xfields.py#L17-L222
+
+
+class VideoFields:
+    """Fields for `VideoBlock`."""
+    display_name = String(
+        help=_("The display name for this component."),
+        display_name=_("Component Display Name"),
+        default="Video",
+        scope=Scope.settings
+    )
+
+    saved_video_position = RelativeTime(
+        help=_("Current position in the video."),
+        scope=Scope.user_state,
+        default=datetime.timedelta(seconds=0)
+    )
+    # TODO: This should be moved to Scope.content, but this will
+    # require data migration to support the old video block.
+    youtube_id_1_0 = String(
+        help=_("Optional, for older browsers: the YouTube ID for the normal speed video."),
+        display_name=_("YouTube ID"),
+        scope=Scope.settings,
+        default="3_yD_cEKoCk"
+    )
+    youtube_id_0_75 = String(
+        help=_("Optional, for older browsers: the YouTube ID for the .75x speed video."),
+        display_name=_("YouTube ID for .75x speed"),
+        scope=Scope.settings,
+        default=""
+    )
+    youtube_id_1_25 = String(
+        help=_("Optional, for older browsers: the YouTube ID for the 1.25x speed video."),
+        display_name=_("YouTube ID for 1.25x speed"),
+        scope=Scope.settings,
+        default=""
+    )
+    youtube_id_1_5 = String(
+        help=_("Optional, for older browsers: the YouTube ID for the 1.5x speed video."),
+        display_name=_("YouTube ID for 1.5x speed"),
+        scope=Scope.settings,
+        default=""
+    )
+    start_time = RelativeTime(  # datetime.timedelta object
+        help=_(
+            "Time you want the video to start if you don't want the entire video to play. "
+            "Not supported in the native mobile app: the full video file will play. "
+            "Formatted as HH:MM:SS. The maximum value is 23:59:59."
+        ),
+        display_name=_("Video Start Time"),
+        scope=Scope.settings,
+        default=datetime.timedelta(seconds=0)
+    )
+    end_time = RelativeTime(  # datetime.timedelta object
+        help=_(
+            "Time you want the video to stop if you don't want the entire video to play. "
+            "Not supported in the native mobile app: the full video file will play. "
+            "Formatted as HH:MM:SS. The maximum value is 23:59:59."
+        ),
+        display_name=_("Video Stop Time"),
+        scope=Scope.settings,
+        default=datetime.timedelta(seconds=0)
+    )
+    #front-end code of video player checks logical validity of (start_time, end_time) pair.
+
+    download_video = Boolean(
+        help=_("Allow students to download versions of this video in different formats if they cannot use the edX video"
+               " player or do not have access to YouTube. You must add at least one non-YouTube URL "
+               "in the Video File URLs field."),
+        display_name=_("Video Download Allowed"),
+        scope=Scope.settings,
+        default=False
+    )
+    html5_sources = List(
+        help=_("The URL or URLs where you've posted non-YouTube versions of the video. Each URL must end in .mpeg,"
+               " .mp4, .ogg, or .webm and cannot be a YouTube URL. (For browser compatibility, we strongly recommend"
+               " .mp4 and .webm format.) Students will be able to view the first listed video that's compatible with"
+               " the student's computer. To allow students to download these videos, "
+               "set Video Download Allowed to True."),
+        display_name=_("Video File URLs"),
+        scope=Scope.settings,
+    )
+    track = String(
+        help=_("By default, students can download an .srt or .txt transcript when you set Download Transcript "
+               "Allowed to True. If you want to provide a downloadable transcript in a different format, we recommend "
+               "that you upload a handout by using the Upload a Handout field. If this isn't possible, you can post a "
+               "transcript file on the Files & Uploads page or on the Internet, and then add the URL for the "
+               "transcript here. Students see a link to download that transcript below the video."),
+        display_name=_("Downloadable Transcript URL"),
+        scope=Scope.settings,
+        default=''
+    )
+    download_track = Boolean(
+        help=_("Allow students to download the timed transcript. A link to download the file appears below the video."
+               " By default, the transcript is an .srt or .txt file. If you want to provide the transcript for "
+               "download in a different format, upload a file by using the Upload Handout field."),
+        display_name=_("Download Transcript Allowed"),
+        scope=Scope.settings,
+        default=False
+    )
+    # `sub` is deprecated field and should not be used in future. Now, transcripts are primarily handled in VAL and
+    # backward compatibility for the video blocks already using this field has been ensured.
+    sub = String(
+        help=_("The default transcript for the video, from the Default Timed Transcript field on the Basic tab. "
+               "This transcript should be in English. You don't have to change this setting."),
+        display_name=_("Default Timed Transcript"),
+        scope=Scope.settings,
+        default=""
+    )
+    show_captions = Boolean(
+        help=_("Specify whether the transcripts appear with the video by default."),
+        display_name=_("Show Transcript"),
+        scope=Scope.settings,
+        default=True
+    )
+    # Data format: {'de': 'german_translation', 'uk': 'ukrainian_translation'}
+    transcripts = Dict(
+        help=_("Add transcripts in different languages."
+               " Click below to specify a language and upload an .srt transcript file for that language."),
+        display_name=_("Transcript Languages"),
+        scope=Scope.settings,
+        default={}
+    )
+    transcript_language = String(
+        help=_("Preferred language for transcript."),
+        display_name=_("Preferred language for transcript"),
+        scope=Scope.preferences,
+        default="en"
+    )
+    transcript_download_format = String(
+        help=_("Transcript file format to download by user."),
+        scope=Scope.preferences,
+        values=[
+            # Translators: This is a type of file used for captioning in the video player.
+            {"display_name": _("SubRip (.srt) file"), "value": "srt"},
+            {"display_name": _("Text (.txt) file"), "value": "txt"}
+        ],
+        default='srt',
+    )
+    speed = Float(
+        help=_("The last speed that the user specified for the video."),
+        scope=Scope.user_state
+    )
+    global_speed = Float(
+        help=_("The default speed for the video."),
+        scope=Scope.preferences,
+        default=1.0
+    )
+    auto_advance = Boolean(
+        help=_("Specify whether to advance automatically to the next unit when the video ends."),
+        scope=Scope.preferences,
+        # The default is True because this field only has an effect when auto-advance controls are enabled
+        # (globally enabled through feature flag and locally enabled through course setting); in that case
+        # it's good to start auto-advancing and let the student disable it, instead of the other way around
+        # (requiring the user to enable it). When auto-advance controls are hidden, this field won't be used.
+        default=True,
+    )
+    youtube_is_available = Boolean(
+        help=_("Specify whether YouTube is available for the user."),
+        scope=Scope.user_info,
+        default=True
+    )
+    handout = String(
+        help=_("Upload a handout to accompany this video. Students can download the handout by "
+               "clicking Download Handout under the video."),
+        display_name=_("Upload Handout"),
+        scope=Scope.settings,
+    )
+    only_on_web = Boolean(
+        help=_(
+            "Specify whether access to this video is limited to browsers only, or if it can be "
+            "accessed from other applications including mobile apps."
+        ),
+        display_name=_("Video Available on Web Only"),
+        scope=Scope.settings,
+        default=False
+    )
+    edx_video_id = String(
+        help=_("If you were assigned a Video ID by edX for the video to play in this component, enter the ID here."
+               " In this case, do not enter values in the Default Video URL, the Video File URLs, "
+               "and the YouTube ID fields. If you were not assigned a Video ID,"
+               " enter values in those other fields and ignore this field."),
+        display_name=_("Video ID"),
+        scope=Scope.settings,
+        default="",
+    )
+    bumper_last_view_date = DateTime(
+        display_name=_("Date of the last view of the bumper"),
+        scope=Scope.preferences,
+    )
+    bumper_do_not_show_again = Boolean(
+        display_name=_("Do not show bumper again"),
+        scope=Scope.preferences,
+        default=False,
+    )
+    public_access = Boolean(
+        help=_("Specify whether the video can be accessed publicly by learners."),
+        display_name=_("Public Access"),
+        scope=Scope.settings,
+        default=False
+    )
+    # thumbnail is need as a field for the new video editor. The field is hidden in
+    # the legacy modal.
+    thumbnail = String(
+        help=_("Add a specific thumbnail for learners to see before playing the video."),
+        display_name=_("Thumbnail"),
+        scope=Scope.settings,
+        default="",
+    )