diff --git a/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideo.snap.js b/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideo.snap.js
new file mode 100644
index 000000000..1030884c7
--- /dev/null
+++ b/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideo.snap.js
@@ -0,0 +1,1235 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FeaturedVideos should render 1`] = `
+<div>
+  <div
+    class="MuiBox-root css-1k9ek97"
+  >
+    <div
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-ydzulf-MuiContainer-root"
+    >
+      <h3
+        class="MuiTypography-root MuiTypography-h3Small css-514olo-MuiTypography-root"
+      >
+        Featured Videos
+      </h3>
+      <div
+        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3 css-zow5z4-MuiGrid-root"
+      >
+        <div
+          class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
+        >
+          <div
+            class="MuiBox-root css-0"
+          >
+            <div
+              class="MuiBox-root css-s11qj8"
+            >
+              <div
+                aria-label="Video Player"
+                class="video-js vjs-fluid vjs-default-skin hide vjs-paused vjs_video_3-dimensions vjs-controls-enabled vjs-workinghover vjs-v8 vjs-user-active"
+                data-vjs-player="true"
+                id="vjs_video_3"
+                lang="en-us"
+                role="region"
+                tabindex="-1"
+                translate="no"
+              >
+                <video
+                  class="vjs-tech"
+                  id="vjs_video_3_html5_api"
+                  tabindex="-1"
+                />
+                <div
+                  aria-disabled="false"
+                  class="vjs-poster vjs-hidden"
+                />
+                <div
+                  class="vjs-title-bar vjs-hidden"
+                >
+                  <div
+                    class="vjs-title-bar-title"
+                    id="vjs-title-bar-title-27"
+                  />
+                  <div
+                    class="vjs-title-bar-description"
+                    id="vjs-title-bar-description-28"
+                  />
+                </div>
+                <div
+                  aria-atomic="true"
+                  aria-live="off"
+                  class="vjs-text-track-display"
+                  translate="yes"
+                />
+                <div
+                  class="vjs-loading-spinner"
+                  dir="ltr"
+                >
+                  <span
+                    class="vjs-control-text"
+                  >
+                    Video Player is loading.
+                  </span>
+                </div>
+                <button
+                  aria-disabled="false"
+                  class="vjs-big-play-button"
+                  title="Play Video"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="vjs-icon-placeholder"
+                  />
+                  <span
+                    aria-live="polite"
+                    class="vjs-control-text"
+                  >
+                    Play Video
+                  </span>
+                </button>
+                <div
+                  class="vjs-control-bar"
+                  dir="ltr"
+                >
+                  <button
+                    aria-disabled="false"
+                    class="vjs-play-control vjs-control vjs-button"
+                    title="Play"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="vjs-icon-placeholder"
+                    />
+                    <span
+                      aria-live="polite"
+                      class="vjs-control-text"
+                    >
+                      Play
+                    </span>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    class="vjs-skip-backward-undefined vjs-control vjs-button vjs-hidden"
+                    title="Skip Backward"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="vjs-icon-placeholder"
+                    />
+                    <span
+                      aria-live="polite"
+                      class="vjs-control-text"
+                    >
+                      Skip Backward
+                    </span>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    class="vjs-skip-forward-undefined vjs-control vjs-button vjs-hidden"
+                    title="Skip Forward"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="vjs-icon-placeholder"
+                    />
+                    <span
+                      aria-live="polite"
+                      class="vjs-control-text"
+                    >
+                      Skip Forward
+                    </span>
+                  </button>
+                  <div
+                    class="vjs-volume-panel vjs-control vjs-volume-panel-horizontal"
+                  >
+                    <button
+                      aria-disabled="false"
+                      class="vjs-mute-control vjs-control vjs-button"
+                      title="Mute"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="vjs-icon-placeholder"
+                      />
+                      <span
+                        aria-live="polite"
+                        class="vjs-control-text"
+                      >
+                        Mute
+                      </span>
+                    </button>
+                    <div
+                      class="vjs-volume-control vjs-control vjs-volume-horizontal"
+                    >
+                      <div
+                        aria-label="Volume Level"
+                        aria-live="polite"
+                        aria-valuemax="100"
+                        aria-valuemin="0"
+                        aria-valuenow="0"
+                        class="vjs-volume-bar vjs-slider-bar vjs-slider vjs-slider-horizontal"
+                        role="slider"
+                        tabindex="0"
+                      >
+                        <div
+                          class="vjs-mouse-display"
+                        >
+                          <div
+                            aria-hidden="true"
+                            class="vjs-volume-tooltip"
+                          />
+                        </div>
+                        <div
+                          class="vjs-volume-level"
+                        >
+                          <span
+                            class="vjs-control-text"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="vjs-current-time vjs-time-control vjs-control"
+                  >
+                    <span
+                      class="vjs-control-text"
+                      role="presentation"
+                    >
+                      Current Time 
+                    </span>
+                    <span
+                      class="vjs-current-time-display"
+                      role="presentation"
+                    />
+                  </div>
+                  <div
+                    aria-hidden="true"
+                    class="vjs-time-control vjs-time-divider"
+                  >
+                    <div>
+                      <span>
+                        /
+                      </span>
+                    </div>
+                  </div>
+                  <div
+                    class="vjs-duration vjs-time-control vjs-control"
+                  >
+                    <span
+                      class="vjs-control-text"
+                      role="presentation"
+                    >
+                      Duration 
+                    </span>
+                    <span
+                      class="vjs-duration-display"
+                      role="presentation"
+                    />
+                  </div>
+                  <div
+                    class="vjs-progress-control vjs-control"
+                  >
+                    <div
+                      aria-label="Progress Bar"
+                      aria-valuemax="100"
+                      aria-valuemin="0"
+                      aria-valuenow="0"
+                      class="vjs-progress-holder vjs-slider vjs-slider-horizontal"
+                      role="slider"
+                      tabindex="0"
+                    >
+                      <div
+                        class="vjs-load-progress"
+                      >
+                        <span
+                          class="vjs-control-text"
+                        >
+                          <span>
+                            Loaded
+                          </span>
+                          : 
+                          <span
+                            class="vjs-control-text-loaded-percentage"
+                          >
+                            0%
+                          </span>
+                        </span>
+                      </div>
+                      <div
+                        class="vjs-mouse-display"
+                      >
+                        <div
+                          aria-hidden="true"
+                          class="vjs-time-tooltip"
+                        />
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="vjs-play-progress vjs-slider-bar"
+                      >
+                        <div
+                          aria-hidden="true"
+                          class="vjs-time-tooltip"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="vjs-live-control vjs-control vjs-hidden"
+                  >
+                    <div
+                      aria-live="off"
+                      class="vjs-live-display"
+                    >
+                      <span
+                        class="vjs-control-text"
+                      >
+                        Stream Type 
+                      </span>
+                      LIVE
+                    </div>
+                  </div>
+                  <button
+                    aria-disabled="false"
+                    class="vjs-seek-to-live-control vjs-control"
+                    title="Seek to live, currently behind live"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="vjs-icon-placeholder"
+                    />
+                    <span
+                      aria-live="polite"
+                      class="vjs-control-text"
+                    >
+                      Seek to live, currently behind live
+                    </span>
+                    <span
+                      aria-hidden="true"
+                      class="vjs-seek-to-live-text"
+                    >
+                      LIVE
+                    </span>
+                  </button>
+                  <div
+                    class="vjs-remaining-time vjs-time-control vjs-control"
+                  >
+                    <span
+                      class="vjs-control-text"
+                      role="presentation"
+                    >
+                      Remaining Time 
+                    </span>
+                    <span
+                      aria-hidden="true"
+                    >
+                      -
+                    </span>
+                    <span
+                      class="vjs-remaining-time-display"
+                      role="presentation"
+                    />
+                  </div>
+                  <div
+                    class="vjs-custom-control-spacer vjs-spacer "
+                  >
+                     
+                  </div>
+                  <div
+                    class="vjs-playback-rate vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"
+                  >
+                    <div
+                      class="vjs-playback-rate-value"
+                      id="vjs-playback-rate-value-label-vjs_video_3_component_285"
+                    >
+                      1x
+                    </div>
+                    <button
+                      aria-describedby="vjs-playback-rate-value-label-vjs_video_3_component_285"
+                      aria-disabled="false"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      class="vjs-playback-rate vjs-menu-button vjs-menu-button-popup vjs-button"
+                      title="Playback Rate"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="vjs-icon-placeholder"
+                      />
+                      <span
+                        aria-live="polite"
+                        class="vjs-control-text"
+                      >
+                        Playback Rate
+                      </span>
+                    </button>
+                    <div
+                      class="vjs-menu"
+                    >
+                      <ul
+                        class="vjs-menu-content"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="vjs-chapters-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"
+                  >
+                    <button
+                      aria-disabled="false"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      class="vjs-chapters-button vjs-menu-button vjs-menu-button-popup vjs-button"
+                      title="Chapters"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="vjs-icon-placeholder"
+                      />
+                      <span
+                        aria-live="polite"
+                        class="vjs-control-text"
+                      >
+                        Chapters
+                      </span>
+                    </button>
+                    <div
+                      class="vjs-menu"
+                    >
+                      <ul
+                        class="vjs-menu-content"
+                      >
+                        <li
+                          class="vjs-menu-title"
+                          tabindex="-1"
+                        >
+                          Chapters
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                  <div
+                    class="vjs-descriptions-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"
+                  >
+                    <button
+                      aria-disabled="false"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      class="vjs-descriptions-button vjs-menu-button vjs-menu-button-popup vjs-button"
+                      title="Descriptions"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="vjs-icon-placeholder"
+                      />
+                      <span
+                        aria-live="polite"
+                        class="vjs-control-text"
+                      >
+                        Descriptions
+                      </span>
+                    </button>
+                    <div
+                      class="vjs-menu"
+                    >
+                      <ul
+                        class="vjs-menu-content"
+                      >
+                        <li
+                          aria-checked="true"
+                          aria-disabled="false"
+                          class="vjs-menu-item vjs-selected"
+                          role="menuitemradio"
+                          tabindex="-1"
+                        >
+                          <span
+                            class="vjs-menu-item-text"
+                          >
+                            descriptions off
+                          </span>
+                          <span
+                            aria-live="polite"
+                            class="vjs-control-text"
+                          >
+                            , selected
+                          </span>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                  <div
+                    class="vjs-subs-caps-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"
+                  >
+                    <button
+                      aria-disabled="false"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      class="vjs-subs-caps-button vjs-menu-button vjs-menu-button-popup vjs-button"
+                      title="Captions"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="vjs-icon-placeholder"
+                      />
+                      <span
+                        aria-live="polite"
+                        class="vjs-control-text"
+                      >
+                        Captions
+                      </span>
+                    </button>
+                    <div
+                      class="vjs-menu"
+                    >
+                      <ul
+                        class="vjs-menu-content"
+                      >
+                        <li
+                          aria-checked="true"
+                          aria-disabled="false"
+                          class="vjs-menu-item vjs-selected"
+                          role="menuitemradio"
+                          tabindex="-1"
+                        >
+                          <span
+                            class="vjs-menu-item-text"
+                          >
+                            captions and subtitles off
+                          </span>
+                          <span
+                            aria-live="polite"
+                            class="vjs-control-text"
+                          >
+                            , selected
+                          </span>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                  <div
+                    class="vjs-audio-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"
+                  >
+                    <button
+                      aria-disabled="false"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      class="vjs-audio-button vjs-menu-button vjs-menu-button-popup vjs-button"
+                      title="Audio Track"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="vjs-icon-placeholder"
+                      />
+                      <span
+                        aria-live="polite"
+                        class="vjs-control-text"
+                      >
+                        Audio Track
+                      </span>
+                    </button>
+                    <div
+                      class="vjs-menu"
+                    >
+                      <ul
+                        class="vjs-menu-content"
+                      />
+                    </div>
+                  </div>
+                  <button
+                    aria-disabled="true"
+                    class="vjs-picture-in-picture-control vjs-hidden vjs-control vjs-button vjs-disabled"
+                    disabled="disabled"
+                    title="Picture-in-Picture"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="vjs-icon-placeholder"
+                    />
+                    <span
+                      aria-live="polite"
+                      class="vjs-control-text"
+                    >
+                      Picture-in-Picture
+                    </span>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    class="vjs-fullscreen-control vjs-control vjs-button"
+                    title="Fullscreen"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="vjs-icon-placeholder"
+                    />
+                    <span
+                      aria-live="polite"
+                      class="vjs-control-text"
+                    >
+                      Fullscreen
+                    </span>
+                  </button>
+                </div>
+                <div
+                  aria-describedby="vjs_video_3_component_503_description"
+                  aria-hidden="true"
+                  aria-label="Modal Window"
+                  aria-live="polite"
+                  class="vjs-error-display vjs-modal-dialog vjs-hidden "
+                  role="dialog"
+                  tabindex="-1"
+                >
+                  <p
+                    class="vjs-modal-dialog-description vjs-control-text"
+                    id="vjs_video_3_component_503_description"
+                  >
+                    This is a modal window.
+                  </p>
+                  <div
+                    class="vjs-modal-dialog-content"
+                    role="document"
+                  />
+                </div>
+                <div
+                  aria-describedby="vjs_video_3_component_509_description"
+                  aria-hidden="true"
+                  aria-label="Caption Settings Dialog"
+                  aria-live="polite"
+                  class="vjs-modal-dialog vjs-hidden  vjs-text-track-settings"
+                  role="dialog"
+                  tabindex="-1"
+                >
+                  <p
+                    class="vjs-modal-dialog-description vjs-control-text"
+                    id="vjs_video_3_component_509_description"
+                  >
+                    Beginning of dialog window. Escape will cancel and close the window.
+                  </p>
+                  <div
+                    class="vjs-modal-dialog-content"
+                    role="document"
+                  >
+                    <div
+                      class="vjs-track-settings-colors"
+                    >
+                      <fieldset
+                        class="vjs-fg vjs-track-setting"
+                      >
+                        <legend
+                          id="captions-text-legend-vjs_video_3_component_509"
+                        >
+                          Text
+                        </legend>
+                        <span
+                          class="vjs-text-color"
+                        >
+                          <label
+                            class="vjs-label"
+                            for="vjs_select_535"
+                            id="captions-foreground-color-vjs_video_3_component_509"
+                          >
+                            Color
+                          </label>
+                          <select
+                            aria-labelledby="captions-text-legend-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509"
+                            id="vjs_select_535"
+                          >
+                            <option
+                              aria-labelledby="captions-text-legend-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509-White"
+                              id="captions-foreground-color-vjs_video_3_component_509-White"
+                              value="#FFF"
+                            >
+                              White
+                            </option>
+                            <option
+                              aria-labelledby="captions-text-legend-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509-Black"
+                              id="captions-foreground-color-vjs_video_3_component_509-Black"
+                              value="#000"
+                            >
+                              Black
+                            </option>
+                            <option
+                              aria-labelledby="captions-text-legend-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509-Red"
+                              id="captions-foreground-color-vjs_video_3_component_509-Red"
+                              value="#F00"
+                            >
+                              Red
+                            </option>
+                            <option
+                              aria-labelledby="captions-text-legend-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509-Green"
+                              id="captions-foreground-color-vjs_video_3_component_509-Green"
+                              value="#0F0"
+                            >
+                              Green
+                            </option>
+                            <option
+                              aria-labelledby="captions-text-legend-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509-Blue"
+                              id="captions-foreground-color-vjs_video_3_component_509-Blue"
+                              value="#00F"
+                            >
+                              Blue
+                            </option>
+                            <option
+                              aria-labelledby="captions-text-legend-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509-Yellow"
+                              id="captions-foreground-color-vjs_video_3_component_509-Yellow"
+                              value="#FF0"
+                            >
+                              Yellow
+                            </option>
+                            <option
+                              aria-labelledby="captions-text-legend-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509-Magenta"
+                              id="captions-foreground-color-vjs_video_3_component_509-Magenta"
+                              value="#F0F"
+                            >
+                              Magenta
+                            </option>
+                            <option
+                              aria-labelledby="captions-text-legend-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509-Cyan"
+                              id="captions-foreground-color-vjs_video_3_component_509-Cyan"
+                              value="#0FF"
+                            >
+                              Cyan
+                            </option>
+                          </select>
+                        </span>
+                        <span
+                          class="vjs-text-opacity vjs-opacity"
+                        >
+                          <label
+                            class="vjs-label"
+                            for="vjs_select_536"
+                            id="captions-foreground-opacity-vjs_video_3_component_509"
+                          >
+                            Opacity
+                          </label>
+                          <select
+                            aria-labelledby="captions-text-legend-vjs_video_3_component_509 captions-foreground-opacity-vjs_video_3_component_509"
+                            id="vjs_select_536"
+                          >
+                            <option
+                              aria-labelledby="captions-text-legend-vjs_video_3_component_509 captions-foreground-opacity-vjs_video_3_component_509 captions-foreground-opacity-vjs_video_3_component_509-Opaque"
+                              id="captions-foreground-opacity-vjs_video_3_component_509-Opaque"
+                              value="1"
+                            >
+                              Opaque
+                            </option>
+                            <option
+                              aria-labelledby="captions-text-legend-vjs_video_3_component_509 captions-foreground-opacity-vjs_video_3_component_509 captions-foreground-opacity-vjs_video_3_component_509-SemiTransparent"
+                              id="captions-foreground-opacity-vjs_video_3_component_509-SemiTransparent"
+                              value="0.5"
+                            >
+                              Semi-Transparent
+                            </option>
+                          </select>
+                        </span>
+                      </fieldset>
+                      <fieldset
+                        class="vjs-bg vjs-track-setting"
+                      >
+                        <legend
+                          id="captions-background-vjs_video_3_component_509"
+                        >
+                          Text Background
+                        </legend>
+                        <span
+                          class="vjs-bg-color"
+                        >
+                          <label
+                            class="vjs-label"
+                            for="vjs_select_537"
+                            id="captions-background-color-vjs_video_3_component_509"
+                          >
+                            Color
+                          </label>
+                          <select
+                            aria-labelledby="captions-background-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509"
+                            id="vjs_select_537"
+                          >
+                            <option
+                              aria-labelledby="captions-background-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509-Black"
+                              id="captions-background-color-vjs_video_3_component_509-Black"
+                              value="#000"
+                            >
+                              Black
+                            </option>
+                            <option
+                              aria-labelledby="captions-background-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509-White"
+                              id="captions-background-color-vjs_video_3_component_509-White"
+                              value="#FFF"
+                            >
+                              White
+                            </option>
+                            <option
+                              aria-labelledby="captions-background-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509-Red"
+                              id="captions-background-color-vjs_video_3_component_509-Red"
+                              value="#F00"
+                            >
+                              Red
+                            </option>
+                            <option
+                              aria-labelledby="captions-background-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509-Green"
+                              id="captions-background-color-vjs_video_3_component_509-Green"
+                              value="#0F0"
+                            >
+                              Green
+                            </option>
+                            <option
+                              aria-labelledby="captions-background-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509-Blue"
+                              id="captions-background-color-vjs_video_3_component_509-Blue"
+                              value="#00F"
+                            >
+                              Blue
+                            </option>
+                            <option
+                              aria-labelledby="captions-background-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509-Yellow"
+                              id="captions-background-color-vjs_video_3_component_509-Yellow"
+                              value="#FF0"
+                            >
+                              Yellow
+                            </option>
+                            <option
+                              aria-labelledby="captions-background-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509-Magenta"
+                              id="captions-background-color-vjs_video_3_component_509-Magenta"
+                              value="#F0F"
+                            >
+                              Magenta
+                            </option>
+                            <option
+                              aria-labelledby="captions-background-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509-Cyan"
+                              id="captions-background-color-vjs_video_3_component_509-Cyan"
+                              value="#0FF"
+                            >
+                              Cyan
+                            </option>
+                          </select>
+                        </span>
+                        <span
+                          class="vjs-bg-opacity vjs-opacity"
+                        >
+                          <label
+                            class="vjs-label"
+                            for="vjs_select_538"
+                            id="captions-background-opacity-vjs_video_3_component_509"
+                          >
+                            Opacity
+                          </label>
+                          <select
+                            aria-labelledby="captions-background-vjs_video_3_component_509 captions-background-opacity-vjs_video_3_component_509"
+                            id="vjs_select_538"
+                          >
+                            <option
+                              aria-labelledby="captions-background-vjs_video_3_component_509 captions-background-opacity-vjs_video_3_component_509 captions-background-opacity-vjs_video_3_component_509-Opaque"
+                              id="captions-background-opacity-vjs_video_3_component_509-Opaque"
+                              value="1"
+                            >
+                              Opaque
+                            </option>
+                            <option
+                              aria-labelledby="captions-background-vjs_video_3_component_509 captions-background-opacity-vjs_video_3_component_509 captions-background-opacity-vjs_video_3_component_509-SemiTransparent"
+                              id="captions-background-opacity-vjs_video_3_component_509-SemiTransparent"
+                              value="0.5"
+                            >
+                              Semi-Transparent
+                            </option>
+                            <option
+                              aria-labelledby="captions-background-vjs_video_3_component_509 captions-background-opacity-vjs_video_3_component_509 captions-background-opacity-vjs_video_3_component_509-Transparent"
+                              id="captions-background-opacity-vjs_video_3_component_509-Transparent"
+                              value="0"
+                            >
+                              Transparent
+                            </option>
+                          </select>
+                        </span>
+                      </fieldset>
+                      <fieldset
+                        class="vjs-window vjs-track-setting"
+                      >
+                        <legend
+                          id="captions-window-vjs_video_3_component_509"
+                        >
+                          Caption Area Background
+                        </legend>
+                        <span
+                          class="vjs-window-color"
+                        >
+                          <label
+                            class="vjs-label"
+                            for="vjs_select_539"
+                            id="captions-window-color-vjs_video_3_component_509"
+                          >
+                            Color
+                          </label>
+                          <select
+                            aria-labelledby="captions-window-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509"
+                            id="vjs_select_539"
+                          >
+                            <option
+                              aria-labelledby="captions-window-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509-Black"
+                              id="captions-window-color-vjs_video_3_component_509-Black"
+                              value="#000"
+                            >
+                              Black
+                            </option>
+                            <option
+                              aria-labelledby="captions-window-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509-White"
+                              id="captions-window-color-vjs_video_3_component_509-White"
+                              value="#FFF"
+                            >
+                              White
+                            </option>
+                            <option
+                              aria-labelledby="captions-window-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509-Red"
+                              id="captions-window-color-vjs_video_3_component_509-Red"
+                              value="#F00"
+                            >
+                              Red
+                            </option>
+                            <option
+                              aria-labelledby="captions-window-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509-Green"
+                              id="captions-window-color-vjs_video_3_component_509-Green"
+                              value="#0F0"
+                            >
+                              Green
+                            </option>
+                            <option
+                              aria-labelledby="captions-window-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509-Blue"
+                              id="captions-window-color-vjs_video_3_component_509-Blue"
+                              value="#00F"
+                            >
+                              Blue
+                            </option>
+                            <option
+                              aria-labelledby="captions-window-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509-Yellow"
+                              id="captions-window-color-vjs_video_3_component_509-Yellow"
+                              value="#FF0"
+                            >
+                              Yellow
+                            </option>
+                            <option
+                              aria-labelledby="captions-window-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509-Magenta"
+                              id="captions-window-color-vjs_video_3_component_509-Magenta"
+                              value="#F0F"
+                            >
+                              Magenta
+                            </option>
+                            <option
+                              aria-labelledby="captions-window-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509-Cyan"
+                              id="captions-window-color-vjs_video_3_component_509-Cyan"
+                              value="#0FF"
+                            >
+                              Cyan
+                            </option>
+                          </select>
+                        </span>
+                        <span
+                          class="vjs-window-opacity vjs-opacity"
+                        >
+                          <label
+                            class="vjs-label"
+                            for="vjs_select_540"
+                            id="captions-window-opacity-vjs_video_3_component_509"
+                          >
+                            Opacity
+                          </label>
+                          <select
+                            aria-labelledby="captions-window-vjs_video_3_component_509 captions-window-opacity-vjs_video_3_component_509"
+                            id="vjs_select_540"
+                          >
+                            <option
+                              aria-labelledby="captions-window-vjs_video_3_component_509 captions-window-opacity-vjs_video_3_component_509 captions-window-opacity-vjs_video_3_component_509-Transparent"
+                              id="captions-window-opacity-vjs_video_3_component_509-Transparent"
+                              value="0"
+                            >
+                              Transparent
+                            </option>
+                            <option
+                              aria-labelledby="captions-window-vjs_video_3_component_509 captions-window-opacity-vjs_video_3_component_509 captions-window-opacity-vjs_video_3_component_509-SemiTransparent"
+                              id="captions-window-opacity-vjs_video_3_component_509-SemiTransparent"
+                              value="0.5"
+                            >
+                              Semi-Transparent
+                            </option>
+                            <option
+                              aria-labelledby="captions-window-vjs_video_3_component_509 captions-window-opacity-vjs_video_3_component_509 captions-window-opacity-vjs_video_3_component_509-Opaque"
+                              id="captions-window-opacity-vjs_video_3_component_509-Opaque"
+                              value="1"
+                            >
+                              Opaque
+                            </option>
+                          </select>
+                        </span>
+                      </fieldset>
+                    </div>
+                    <div
+                      class="vjs-track-settings-font"
+                    >
+                      <fieldset
+                        class="vjs-font-percent vjs-track-setting"
+                      >
+                        <legend
+                          id="captions-font-size-vjs_video_3_component_509"
+                        >
+                          Font Size
+                        </legend>
+                        <select
+                          aria-labelledby="captions-font-size-vjs_video_3_component_509"
+                          id="vjs_select_541"
+                        >
+                          <option
+                            aria-labelledby="captions-font-size-vjs_video_3_component_509 captions-font-size-vjs_video_3_component_509-50"
+                            id="captions-font-size-vjs_video_3_component_509-50"
+                            value="0.50"
+                          >
+                            50%
+                          </option>
+                          <option
+                            aria-labelledby="captions-font-size-vjs_video_3_component_509 captions-font-size-vjs_video_3_component_509-75"
+                            id="captions-font-size-vjs_video_3_component_509-75"
+                            value="0.75"
+                          >
+                            75%
+                          </option>
+                          <option
+                            aria-labelledby="captions-font-size-vjs_video_3_component_509 captions-font-size-vjs_video_3_component_509-100"
+                            id="captions-font-size-vjs_video_3_component_509-100"
+                            value="1.00"
+                          >
+                            100%
+                          </option>
+                          <option
+                            aria-labelledby="captions-font-size-vjs_video_3_component_509 captions-font-size-vjs_video_3_component_509-125"
+                            id="captions-font-size-vjs_video_3_component_509-125"
+                            value="1.25"
+                          >
+                            125%
+                          </option>
+                          <option
+                            aria-labelledby="captions-font-size-vjs_video_3_component_509 captions-font-size-vjs_video_3_component_509-150"
+                            id="captions-font-size-vjs_video_3_component_509-150"
+                            value="1.50"
+                          >
+                            150%
+                          </option>
+                          <option
+                            aria-labelledby="captions-font-size-vjs_video_3_component_509 captions-font-size-vjs_video_3_component_509-175"
+                            id="captions-font-size-vjs_video_3_component_509-175"
+                            value="1.75"
+                          >
+                            175%
+                          </option>
+                          <option
+                            aria-labelledby="captions-font-size-vjs_video_3_component_509 captions-font-size-vjs_video_3_component_509-200"
+                            id="captions-font-size-vjs_video_3_component_509-200"
+                            value="2.00"
+                          >
+                            200%
+                          </option>
+                          <option
+                            aria-labelledby="captions-font-size-vjs_video_3_component_509 captions-font-size-vjs_video_3_component_509-300"
+                            id="captions-font-size-vjs_video_3_component_509-300"
+                            value="3.00"
+                          >
+                            300%
+                          </option>
+                          <option
+                            aria-labelledby="captions-font-size-vjs_video_3_component_509 captions-font-size-vjs_video_3_component_509-400"
+                            id="captions-font-size-vjs_video_3_component_509-400"
+                            value="4.00"
+                          >
+                            400%
+                          </option>
+                        </select>
+                      </fieldset>
+                      <fieldset
+                        class="vjs-edge-style vjs-track-setting"
+                      >
+                        <legend
+                          id="vjs_video_3_component_509"
+                        >
+                          Text Edge Style
+                        </legend>
+                        <select
+                          aria-labelledby="vjs_video_3_component_509"
+                          id="vjs_select_542"
+                        >
+                          <option
+                            aria-labelledby="vjs_video_3_component_509 vjs_video_3_component_509-None"
+                            id="vjs_video_3_component_509-None"
+                            value="none"
+                          >
+                            None
+                          </option>
+                          <option
+                            aria-labelledby="vjs_video_3_component_509 vjs_video_3_component_509-Raised"
+                            id="vjs_video_3_component_509-Raised"
+                            value="raised"
+                          >
+                            Raised
+                          </option>
+                          <option
+                            aria-labelledby="vjs_video_3_component_509 vjs_video_3_component_509-Depressed"
+                            id="vjs_video_3_component_509-Depressed"
+                            value="depressed"
+                          >
+                            Depressed
+                          </option>
+                          <option
+                            aria-labelledby="vjs_video_3_component_509 vjs_video_3_component_509-Uniform"
+                            id="vjs_video_3_component_509-Uniform"
+                            value="uniform"
+                          >
+                            Uniform
+                          </option>
+                          <option
+                            aria-labelledby="vjs_video_3_component_509 vjs_video_3_component_509-Dropshadow"
+                            id="vjs_video_3_component_509-Dropshadow"
+                            value="dropshadow"
+                          >
+                            Drop shadow
+                          </option>
+                        </select>
+                      </fieldset>
+                      <fieldset
+                        class="vjs-font-family vjs-track-setting"
+                      >
+                        <legend
+                          id="captions-font-family-vjs_video_3_component_509"
+                        >
+                          Font Family
+                        </legend>
+                        <select
+                          aria-labelledby="captions-font-family-vjs_video_3_component_509"
+                          id="vjs_select_543"
+                        >
+                          <option
+                            aria-labelledby="captions-font-family-vjs_video_3_component_509 captions-font-family-vjs_video_3_component_509-ProportionalSansSerif"
+                            id="captions-font-family-vjs_video_3_component_509-ProportionalSansSerif"
+                            value="proportionalSansSerif"
+                          >
+                            Proportional Sans-Serif
+                          </option>
+                          <option
+                            aria-labelledby="captions-font-family-vjs_video_3_component_509 captions-font-family-vjs_video_3_component_509-MonospaceSansSerif"
+                            id="captions-font-family-vjs_video_3_component_509-MonospaceSansSerif"
+                            value="monospaceSansSerif"
+                          >
+                            Monospace Sans-Serif
+                          </option>
+                          <option
+                            aria-labelledby="captions-font-family-vjs_video_3_component_509 captions-font-family-vjs_video_3_component_509-ProportionalSerif"
+                            id="captions-font-family-vjs_video_3_component_509-ProportionalSerif"
+                            value="proportionalSerif"
+                          >
+                            Proportional Serif
+                          </option>
+                          <option
+                            aria-labelledby="captions-font-family-vjs_video_3_component_509 captions-font-family-vjs_video_3_component_509-MonospaceSerif"
+                            id="captions-font-family-vjs_video_3_component_509-MonospaceSerif"
+                            value="monospaceSerif"
+                          >
+                            Monospace Serif
+                          </option>
+                          <option
+                            aria-labelledby="captions-font-family-vjs_video_3_component_509 captions-font-family-vjs_video_3_component_509-Casual"
+                            id="captions-font-family-vjs_video_3_component_509-Casual"
+                            value="casual"
+                          >
+                            Casual
+                          </option>
+                          <option
+                            aria-labelledby="captions-font-family-vjs_video_3_component_509 captions-font-family-vjs_video_3_component_509-Script"
+                            id="captions-font-family-vjs_video_3_component_509-Script"
+                            value="script"
+                          >
+                            Script
+                          </option>
+                          <option
+                            aria-labelledby="captions-font-family-vjs_video_3_component_509 captions-font-family-vjs_video_3_component_509-SmallCaps"
+                            id="captions-font-family-vjs_video_3_component_509-SmallCaps"
+                            value="small-caps"
+                          >
+                            Small Caps
+                          </option>
+                        </select>
+                      </fieldset>
+                    </div>
+                    <div
+                      class="vjs-track-settings-controls"
+                    >
+                      <button
+                        class="vjs-default-button"
+                        title="restore all settings to the default values"
+                        type="button"
+                      >
+                        Reset
+                        <span
+                          class="vjs-control-text"
+                        >
+                           restore all settings to the default values
+                        </span>
+                      </button>
+                      <button
+                        class="vjs-done-button"
+                        type="button"
+                      >
+                        Done
+                      </button>
+                    </div>
+                  </div>
+                  <button
+                    aria-disabled="false"
+                    class="vjs-close-button vjs-control vjs-button"
+                    title="Close Modal Dialog"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="vjs-icon-placeholder"
+                    />
+                    <span
+                      aria-live="polite"
+                      class="vjs-control-text"
+                    >
+                      Close Modal Dialog
+                    </span>
+                  </button>
+                  <p
+                    class="vjs-control-text"
+                  >
+                    End of dialog window.
+                  </p>
+                </div>
+              </div>
+            </div>
+            <h5
+              class="MuiTypography-root MuiTypography-h5SemiBold css-o4ikwp-MuiTypography-root"
+            >
+              Latest Release
+            </h5>
+            <div
+              class="MuiTypography-root MuiTypography-p1 css-e7rvfo-MuiTypography-root"
+            >
+              Aired on
+               
+              23/06/2024
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideo.test.js b/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideo.test.js
new file mode 100644
index 000000000..e583a2fe7
--- /dev/null
+++ b/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideo.test.js
@@ -0,0 +1,28 @@
+import { createRender } from "@commons-ui/testing-library";
+import React from "react";
+
+import FeaturedVideos from "./FeaturedVideos";
+
+import theme from "@/charterafrica/theme";
+
+// eslint-disable-next-line testing-library/render-result-naming-convention
+const render = createRender({ theme });
+
+const defaultProps = {
+  items: [
+    {
+      videoId: "awPQ5LfoTys",
+      title: "Latest Release",
+      publishedAt: "23/06/2024",
+    },
+  ],
+  airedOnText: "Aired on",
+  title: "Featured Videos",
+};
+
+describe("FeaturedVideos", () => {
+  it("should render", () => {
+    const { container } = render(<FeaturedVideos {...defaultProps} />);
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideoCard.js b/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideoCard.js
new file mode 100644
index 000000000..19b557e3c
--- /dev/null
+++ b/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideoCard.js
@@ -0,0 +1,109 @@
+import "videojs-youtube";
+import "video.js/dist/video-js.css";
+
+import { RichTypography } from "@commons-ui/core";
+import { Box, styled } from "@mui/material";
+import PropTypes from "prop-types";
+import React, { useEffect, useRef } from "react";
+import videojs from "video.js";
+
+import LineClampedRichTypography from "@/charterafrica/components/LineClampedRichTypography";
+
+const StyledDiv = styled(Box)({
+  minWidth: "100%",
+  height: "100%",
+  "& .video-js .vjs-big-play-button": {
+    height: "100%",
+    left: 0,
+    top: 0,
+    width: "100%",
+    borderRadius: 0,
+    background: "rgba(62,32,44, 0.9)",
+    border: "none",
+    margin: 0,
+  },
+  "& .video-js .vjs-big-play-button:hover": {
+    height: "100%",
+    left: 0,
+    top: 0,
+    width: "100%",
+    borderRadius: 0,
+    background: "rgba(62,32,44, 0.8)",
+  },
+  ".vjs-button > .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before":
+    {
+      position: "relative",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      // Since we are not using icon of height 126 but rather content "\f101"
+      fontSize: 126,
+    },
+});
+
+const FeaturedVideoCard = React.forwardRef(
+  function FeaturedVideoCard(props, ref) {
+    const { sx, videoId, title, publishedAt, airedOnText } = props;
+    const videoRef = useRef(null);
+    const playerRef = useRef(null);
+    const parentRef = useRef(null);
+
+    const src = `https://www.youtube.com/watch?v=${videoId}`;
+
+    useEffect(() => {
+      if (videoRef.current && !playerRef.current) {
+        const options = {
+          autoplay: false,
+          controls: true,
+          preload: "auto",
+          sources: [{ src, type: "video/youtube" }],
+          techOrder: ["youtube"],
+          height: "auto",
+          youtube: { ytControls: 2 },
+        };
+        playerRef.current = videojs(videoRef.current, options);
+      }
+    }, [src]);
+    return (
+      <Box sx={sx} ref={ref}>
+        <StyledDiv ref={parentRef}>
+          <div data-vjs-player>
+            {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
+            <video
+              ref={videoRef}
+              className="video-js vjs-fluid vjs-default-skin hide"
+            />
+          </div>
+        </StyledDiv>
+        <LineClampedRichTypography
+          lineClamp={2}
+          color="primary.dark"
+          variant="h5SemiBold"
+          component="h5"
+          sx={{ typography: { md: "h5" }, marginBottom: 2, mt: 3 }}
+        >
+          {title}
+        </LineClampedRichTypography>
+        <RichTypography color="primary.dark">
+          {airedOnText} {publishedAt}
+        </RichTypography>
+      </Box>
+    );
+  },
+);
+
+FeaturedVideoCard.propTypes = {
+  videoId: PropTypes.string,
+  title: PropTypes.string,
+  publishedAt: PropTypes.string,
+  airedOnText: PropTypes.string,
+};
+
+FeaturedVideoCard.defaultProps = {
+  videoId: undefined,
+  title: undefined,
+  publishedAt: undefined,
+  airedOnText: undefined,
+};
+
+export default FeaturedVideoCard;
diff --git a/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideoCard.snap.js b/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideoCard.snap.js
new file mode 100644
index 000000000..a0988ddc6
--- /dev/null
+++ b/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideoCard.snap.js
@@ -0,0 +1,1214 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FeaturedVideoCard should render 1`] = `
+<div>
+  <div
+    class="MuiBox-root css-0"
+  >
+    <div
+      class="MuiBox-root css-s11qj8"
+    >
+      <div
+        aria-label="Video Player"
+        class="video-js vjs-fluid vjs-default-skin hide vjs-paused vjs_video_3-dimensions vjs-controls-enabled vjs-workinghover vjs-v8 vjs-user-active"
+        data-vjs-player="true"
+        id="vjs_video_3"
+        lang="en-us"
+        role="region"
+        tabindex="-1"
+        translate="no"
+      >
+        <video
+          class="vjs-tech"
+          id="vjs_video_3_html5_api"
+          tabindex="-1"
+        />
+        <div
+          aria-disabled="false"
+          class="vjs-poster vjs-hidden"
+        />
+        <div
+          class="vjs-title-bar vjs-hidden"
+        >
+          <div
+            class="vjs-title-bar-title"
+            id="vjs-title-bar-title-27"
+          />
+          <div
+            class="vjs-title-bar-description"
+            id="vjs-title-bar-description-28"
+          />
+        </div>
+        <div
+          aria-atomic="true"
+          aria-live="off"
+          class="vjs-text-track-display"
+          translate="yes"
+        />
+        <div
+          class="vjs-loading-spinner"
+          dir="ltr"
+        >
+          <span
+            class="vjs-control-text"
+          >
+            Video Player is loading.
+          </span>
+        </div>
+        <button
+          aria-disabled="false"
+          class="vjs-big-play-button"
+          title="Play Video"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="vjs-icon-placeholder"
+          />
+          <span
+            aria-live="polite"
+            class="vjs-control-text"
+          >
+            Play Video
+          </span>
+        </button>
+        <div
+          class="vjs-control-bar"
+          dir="ltr"
+        >
+          <button
+            aria-disabled="false"
+            class="vjs-play-control vjs-control vjs-button"
+            title="Play"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="vjs-icon-placeholder"
+            />
+            <span
+              aria-live="polite"
+              class="vjs-control-text"
+            >
+              Play
+            </span>
+          </button>
+          <button
+            aria-disabled="false"
+            class="vjs-skip-backward-undefined vjs-control vjs-button vjs-hidden"
+            title="Skip Backward"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="vjs-icon-placeholder"
+            />
+            <span
+              aria-live="polite"
+              class="vjs-control-text"
+            >
+              Skip Backward
+            </span>
+          </button>
+          <button
+            aria-disabled="false"
+            class="vjs-skip-forward-undefined vjs-control vjs-button vjs-hidden"
+            title="Skip Forward"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="vjs-icon-placeholder"
+            />
+            <span
+              aria-live="polite"
+              class="vjs-control-text"
+            >
+              Skip Forward
+            </span>
+          </button>
+          <div
+            class="vjs-volume-panel vjs-control vjs-volume-panel-horizontal"
+          >
+            <button
+              aria-disabled="false"
+              class="vjs-mute-control vjs-control vjs-button"
+              title="Mute"
+              type="button"
+            >
+              <span
+                aria-hidden="true"
+                class="vjs-icon-placeholder"
+              />
+              <span
+                aria-live="polite"
+                class="vjs-control-text"
+              >
+                Mute
+              </span>
+            </button>
+            <div
+              class="vjs-volume-control vjs-control vjs-volume-horizontal"
+            >
+              <div
+                aria-label="Volume Level"
+                aria-live="polite"
+                aria-valuemax="100"
+                aria-valuemin="0"
+                aria-valuenow="0"
+                class="vjs-volume-bar vjs-slider-bar vjs-slider vjs-slider-horizontal"
+                role="slider"
+                tabindex="0"
+              >
+                <div
+                  class="vjs-mouse-display"
+                >
+                  <div
+                    aria-hidden="true"
+                    class="vjs-volume-tooltip"
+                  />
+                </div>
+                <div
+                  class="vjs-volume-level"
+                >
+                  <span
+                    class="vjs-control-text"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="vjs-current-time vjs-time-control vjs-control"
+          >
+            <span
+              class="vjs-control-text"
+              role="presentation"
+            >
+              Current Time 
+            </span>
+            <span
+              class="vjs-current-time-display"
+              role="presentation"
+            />
+          </div>
+          <div
+            aria-hidden="true"
+            class="vjs-time-control vjs-time-divider"
+          >
+            <div>
+              <span>
+                /
+              </span>
+            </div>
+          </div>
+          <div
+            class="vjs-duration vjs-time-control vjs-control"
+          >
+            <span
+              class="vjs-control-text"
+              role="presentation"
+            >
+              Duration 
+            </span>
+            <span
+              class="vjs-duration-display"
+              role="presentation"
+            />
+          </div>
+          <div
+            class="vjs-progress-control vjs-control"
+          >
+            <div
+              aria-label="Progress Bar"
+              aria-valuemax="100"
+              aria-valuemin="0"
+              aria-valuenow="0"
+              class="vjs-progress-holder vjs-slider vjs-slider-horizontal"
+              role="slider"
+              tabindex="0"
+            >
+              <div
+                class="vjs-load-progress"
+              >
+                <span
+                  class="vjs-control-text"
+                >
+                  <span>
+                    Loaded
+                  </span>
+                  : 
+                  <span
+                    class="vjs-control-text-loaded-percentage"
+                  >
+                    0%
+                  </span>
+                </span>
+              </div>
+              <div
+                class="vjs-mouse-display"
+              >
+                <div
+                  aria-hidden="true"
+                  class="vjs-time-tooltip"
+                />
+              </div>
+              <div
+                aria-hidden="true"
+                class="vjs-play-progress vjs-slider-bar"
+              >
+                <div
+                  aria-hidden="true"
+                  class="vjs-time-tooltip"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="vjs-live-control vjs-control vjs-hidden"
+          >
+            <div
+              aria-live="off"
+              class="vjs-live-display"
+            >
+              <span
+                class="vjs-control-text"
+              >
+                Stream Type 
+              </span>
+              LIVE
+            </div>
+          </div>
+          <button
+            aria-disabled="false"
+            class="vjs-seek-to-live-control vjs-control"
+            title="Seek to live, currently behind live"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="vjs-icon-placeholder"
+            />
+            <span
+              aria-live="polite"
+              class="vjs-control-text"
+            >
+              Seek to live, currently behind live
+            </span>
+            <span
+              aria-hidden="true"
+              class="vjs-seek-to-live-text"
+            >
+              LIVE
+            </span>
+          </button>
+          <div
+            class="vjs-remaining-time vjs-time-control vjs-control"
+          >
+            <span
+              class="vjs-control-text"
+              role="presentation"
+            >
+              Remaining Time 
+            </span>
+            <span
+              aria-hidden="true"
+            >
+              -
+            </span>
+            <span
+              class="vjs-remaining-time-display"
+              role="presentation"
+            />
+          </div>
+          <div
+            class="vjs-custom-control-spacer vjs-spacer "
+          >
+             
+          </div>
+          <div
+            class="vjs-playback-rate vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"
+          >
+            <div
+              class="vjs-playback-rate-value"
+              id="vjs-playback-rate-value-label-vjs_video_3_component_285"
+            >
+              1x
+            </div>
+            <button
+              aria-describedby="vjs-playback-rate-value-label-vjs_video_3_component_285"
+              aria-disabled="false"
+              aria-expanded="false"
+              aria-haspopup="true"
+              class="vjs-playback-rate vjs-menu-button vjs-menu-button-popup vjs-button"
+              title="Playback Rate"
+              type="button"
+            >
+              <span
+                aria-hidden="true"
+                class="vjs-icon-placeholder"
+              />
+              <span
+                aria-live="polite"
+                class="vjs-control-text"
+              >
+                Playback Rate
+              </span>
+            </button>
+            <div
+              class="vjs-menu"
+            >
+              <ul
+                class="vjs-menu-content"
+              />
+            </div>
+          </div>
+          <div
+            class="vjs-chapters-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"
+          >
+            <button
+              aria-disabled="false"
+              aria-expanded="false"
+              aria-haspopup="true"
+              class="vjs-chapters-button vjs-menu-button vjs-menu-button-popup vjs-button"
+              title="Chapters"
+              type="button"
+            >
+              <span
+                aria-hidden="true"
+                class="vjs-icon-placeholder"
+              />
+              <span
+                aria-live="polite"
+                class="vjs-control-text"
+              >
+                Chapters
+              </span>
+            </button>
+            <div
+              class="vjs-menu"
+            >
+              <ul
+                class="vjs-menu-content"
+              >
+                <li
+                  class="vjs-menu-title"
+                  tabindex="-1"
+                >
+                  Chapters
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div
+            class="vjs-descriptions-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"
+          >
+            <button
+              aria-disabled="false"
+              aria-expanded="false"
+              aria-haspopup="true"
+              class="vjs-descriptions-button vjs-menu-button vjs-menu-button-popup vjs-button"
+              title="Descriptions"
+              type="button"
+            >
+              <span
+                aria-hidden="true"
+                class="vjs-icon-placeholder"
+              />
+              <span
+                aria-live="polite"
+                class="vjs-control-text"
+              >
+                Descriptions
+              </span>
+            </button>
+            <div
+              class="vjs-menu"
+            >
+              <ul
+                class="vjs-menu-content"
+              >
+                <li
+                  aria-checked="true"
+                  aria-disabled="false"
+                  class="vjs-menu-item vjs-selected"
+                  role="menuitemradio"
+                  tabindex="-1"
+                >
+                  <span
+                    class="vjs-menu-item-text"
+                  >
+                    descriptions off
+                  </span>
+                  <span
+                    aria-live="polite"
+                    class="vjs-control-text"
+                  >
+                    , selected
+                  </span>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div
+            class="vjs-subs-caps-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"
+          >
+            <button
+              aria-disabled="false"
+              aria-expanded="false"
+              aria-haspopup="true"
+              class="vjs-subs-caps-button vjs-menu-button vjs-menu-button-popup vjs-button"
+              title="Captions"
+              type="button"
+            >
+              <span
+                aria-hidden="true"
+                class="vjs-icon-placeholder"
+              />
+              <span
+                aria-live="polite"
+                class="vjs-control-text"
+              >
+                Captions
+              </span>
+            </button>
+            <div
+              class="vjs-menu"
+            >
+              <ul
+                class="vjs-menu-content"
+              >
+                <li
+                  aria-checked="true"
+                  aria-disabled="false"
+                  class="vjs-menu-item vjs-selected"
+                  role="menuitemradio"
+                  tabindex="-1"
+                >
+                  <span
+                    class="vjs-menu-item-text"
+                  >
+                    captions and subtitles off
+                  </span>
+                  <span
+                    aria-live="polite"
+                    class="vjs-control-text"
+                  >
+                    , selected
+                  </span>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div
+            class="vjs-audio-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"
+          >
+            <button
+              aria-disabled="false"
+              aria-expanded="false"
+              aria-haspopup="true"
+              class="vjs-audio-button vjs-menu-button vjs-menu-button-popup vjs-button"
+              title="Audio Track"
+              type="button"
+            >
+              <span
+                aria-hidden="true"
+                class="vjs-icon-placeholder"
+              />
+              <span
+                aria-live="polite"
+                class="vjs-control-text"
+              >
+                Audio Track
+              </span>
+            </button>
+            <div
+              class="vjs-menu"
+            >
+              <ul
+                class="vjs-menu-content"
+              />
+            </div>
+          </div>
+          <button
+            aria-disabled="true"
+            class="vjs-picture-in-picture-control vjs-hidden vjs-control vjs-button vjs-disabled"
+            disabled="disabled"
+            title="Picture-in-Picture"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="vjs-icon-placeholder"
+            />
+            <span
+              aria-live="polite"
+              class="vjs-control-text"
+            >
+              Picture-in-Picture
+            </span>
+          </button>
+          <button
+            aria-disabled="false"
+            class="vjs-fullscreen-control vjs-control vjs-button"
+            title="Fullscreen"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="vjs-icon-placeholder"
+            />
+            <span
+              aria-live="polite"
+              class="vjs-control-text"
+            >
+              Fullscreen
+            </span>
+          </button>
+        </div>
+        <div
+          aria-describedby="vjs_video_3_component_503_description"
+          aria-hidden="true"
+          aria-label="Modal Window"
+          aria-live="polite"
+          class="vjs-error-display vjs-modal-dialog vjs-hidden "
+          role="dialog"
+          tabindex="-1"
+        >
+          <p
+            class="vjs-modal-dialog-description vjs-control-text"
+            id="vjs_video_3_component_503_description"
+          >
+            This is a modal window.
+          </p>
+          <div
+            class="vjs-modal-dialog-content"
+            role="document"
+          />
+        </div>
+        <div
+          aria-describedby="vjs_video_3_component_509_description"
+          aria-hidden="true"
+          aria-label="Caption Settings Dialog"
+          aria-live="polite"
+          class="vjs-modal-dialog vjs-hidden  vjs-text-track-settings"
+          role="dialog"
+          tabindex="-1"
+        >
+          <p
+            class="vjs-modal-dialog-description vjs-control-text"
+            id="vjs_video_3_component_509_description"
+          >
+            Beginning of dialog window. Escape will cancel and close the window.
+          </p>
+          <div
+            class="vjs-modal-dialog-content"
+            role="document"
+          >
+            <div
+              class="vjs-track-settings-colors"
+            >
+              <fieldset
+                class="vjs-fg vjs-track-setting"
+              >
+                <legend
+                  id="captions-text-legend-vjs_video_3_component_509"
+                >
+                  Text
+                </legend>
+                <span
+                  class="vjs-text-color"
+                >
+                  <label
+                    class="vjs-label"
+                    for="vjs_select_535"
+                    id="captions-foreground-color-vjs_video_3_component_509"
+                  >
+                    Color
+                  </label>
+                  <select
+                    aria-labelledby="captions-text-legend-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509"
+                    id="vjs_select_535"
+                  >
+                    <option
+                      aria-labelledby="captions-text-legend-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509-White"
+                      id="captions-foreground-color-vjs_video_3_component_509-White"
+                      value="#FFF"
+                    >
+                      White
+                    </option>
+                    <option
+                      aria-labelledby="captions-text-legend-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509-Black"
+                      id="captions-foreground-color-vjs_video_3_component_509-Black"
+                      value="#000"
+                    >
+                      Black
+                    </option>
+                    <option
+                      aria-labelledby="captions-text-legend-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509-Red"
+                      id="captions-foreground-color-vjs_video_3_component_509-Red"
+                      value="#F00"
+                    >
+                      Red
+                    </option>
+                    <option
+                      aria-labelledby="captions-text-legend-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509-Green"
+                      id="captions-foreground-color-vjs_video_3_component_509-Green"
+                      value="#0F0"
+                    >
+                      Green
+                    </option>
+                    <option
+                      aria-labelledby="captions-text-legend-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509-Blue"
+                      id="captions-foreground-color-vjs_video_3_component_509-Blue"
+                      value="#00F"
+                    >
+                      Blue
+                    </option>
+                    <option
+                      aria-labelledby="captions-text-legend-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509-Yellow"
+                      id="captions-foreground-color-vjs_video_3_component_509-Yellow"
+                      value="#FF0"
+                    >
+                      Yellow
+                    </option>
+                    <option
+                      aria-labelledby="captions-text-legend-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509-Magenta"
+                      id="captions-foreground-color-vjs_video_3_component_509-Magenta"
+                      value="#F0F"
+                    >
+                      Magenta
+                    </option>
+                    <option
+                      aria-labelledby="captions-text-legend-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509-Cyan"
+                      id="captions-foreground-color-vjs_video_3_component_509-Cyan"
+                      value="#0FF"
+                    >
+                      Cyan
+                    </option>
+                  </select>
+                </span>
+                <span
+                  class="vjs-text-opacity vjs-opacity"
+                >
+                  <label
+                    class="vjs-label"
+                    for="vjs_select_536"
+                    id="captions-foreground-opacity-vjs_video_3_component_509"
+                  >
+                    Opacity
+                  </label>
+                  <select
+                    aria-labelledby="captions-text-legend-vjs_video_3_component_509 captions-foreground-opacity-vjs_video_3_component_509"
+                    id="vjs_select_536"
+                  >
+                    <option
+                      aria-labelledby="captions-text-legend-vjs_video_3_component_509 captions-foreground-opacity-vjs_video_3_component_509 captions-foreground-opacity-vjs_video_3_component_509-Opaque"
+                      id="captions-foreground-opacity-vjs_video_3_component_509-Opaque"
+                      value="1"
+                    >
+                      Opaque
+                    </option>
+                    <option
+                      aria-labelledby="captions-text-legend-vjs_video_3_component_509 captions-foreground-opacity-vjs_video_3_component_509 captions-foreground-opacity-vjs_video_3_component_509-SemiTransparent"
+                      id="captions-foreground-opacity-vjs_video_3_component_509-SemiTransparent"
+                      value="0.5"
+                    >
+                      Semi-Transparent
+                    </option>
+                  </select>
+                </span>
+              </fieldset>
+              <fieldset
+                class="vjs-bg vjs-track-setting"
+              >
+                <legend
+                  id="captions-background-vjs_video_3_component_509"
+                >
+                  Text Background
+                </legend>
+                <span
+                  class="vjs-bg-color"
+                >
+                  <label
+                    class="vjs-label"
+                    for="vjs_select_537"
+                    id="captions-background-color-vjs_video_3_component_509"
+                  >
+                    Color
+                  </label>
+                  <select
+                    aria-labelledby="captions-background-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509"
+                    id="vjs_select_537"
+                  >
+                    <option
+                      aria-labelledby="captions-background-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509-Black"
+                      id="captions-background-color-vjs_video_3_component_509-Black"
+                      value="#000"
+                    >
+                      Black
+                    </option>
+                    <option
+                      aria-labelledby="captions-background-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509-White"
+                      id="captions-background-color-vjs_video_3_component_509-White"
+                      value="#FFF"
+                    >
+                      White
+                    </option>
+                    <option
+                      aria-labelledby="captions-background-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509-Red"
+                      id="captions-background-color-vjs_video_3_component_509-Red"
+                      value="#F00"
+                    >
+                      Red
+                    </option>
+                    <option
+                      aria-labelledby="captions-background-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509-Green"
+                      id="captions-background-color-vjs_video_3_component_509-Green"
+                      value="#0F0"
+                    >
+                      Green
+                    </option>
+                    <option
+                      aria-labelledby="captions-background-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509-Blue"
+                      id="captions-background-color-vjs_video_3_component_509-Blue"
+                      value="#00F"
+                    >
+                      Blue
+                    </option>
+                    <option
+                      aria-labelledby="captions-background-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509-Yellow"
+                      id="captions-background-color-vjs_video_3_component_509-Yellow"
+                      value="#FF0"
+                    >
+                      Yellow
+                    </option>
+                    <option
+                      aria-labelledby="captions-background-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509-Magenta"
+                      id="captions-background-color-vjs_video_3_component_509-Magenta"
+                      value="#F0F"
+                    >
+                      Magenta
+                    </option>
+                    <option
+                      aria-labelledby="captions-background-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509-Cyan"
+                      id="captions-background-color-vjs_video_3_component_509-Cyan"
+                      value="#0FF"
+                    >
+                      Cyan
+                    </option>
+                  </select>
+                </span>
+                <span
+                  class="vjs-bg-opacity vjs-opacity"
+                >
+                  <label
+                    class="vjs-label"
+                    for="vjs_select_538"
+                    id="captions-background-opacity-vjs_video_3_component_509"
+                  >
+                    Opacity
+                  </label>
+                  <select
+                    aria-labelledby="captions-background-vjs_video_3_component_509 captions-background-opacity-vjs_video_3_component_509"
+                    id="vjs_select_538"
+                  >
+                    <option
+                      aria-labelledby="captions-background-vjs_video_3_component_509 captions-background-opacity-vjs_video_3_component_509 captions-background-opacity-vjs_video_3_component_509-Opaque"
+                      id="captions-background-opacity-vjs_video_3_component_509-Opaque"
+                      value="1"
+                    >
+                      Opaque
+                    </option>
+                    <option
+                      aria-labelledby="captions-background-vjs_video_3_component_509 captions-background-opacity-vjs_video_3_component_509 captions-background-opacity-vjs_video_3_component_509-SemiTransparent"
+                      id="captions-background-opacity-vjs_video_3_component_509-SemiTransparent"
+                      value="0.5"
+                    >
+                      Semi-Transparent
+                    </option>
+                    <option
+                      aria-labelledby="captions-background-vjs_video_3_component_509 captions-background-opacity-vjs_video_3_component_509 captions-background-opacity-vjs_video_3_component_509-Transparent"
+                      id="captions-background-opacity-vjs_video_3_component_509-Transparent"
+                      value="0"
+                    >
+                      Transparent
+                    </option>
+                  </select>
+                </span>
+              </fieldset>
+              <fieldset
+                class="vjs-window vjs-track-setting"
+              >
+                <legend
+                  id="captions-window-vjs_video_3_component_509"
+                >
+                  Caption Area Background
+                </legend>
+                <span
+                  class="vjs-window-color"
+                >
+                  <label
+                    class="vjs-label"
+                    for="vjs_select_539"
+                    id="captions-window-color-vjs_video_3_component_509"
+                  >
+                    Color
+                  </label>
+                  <select
+                    aria-labelledby="captions-window-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509"
+                    id="vjs_select_539"
+                  >
+                    <option
+                      aria-labelledby="captions-window-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509-Black"
+                      id="captions-window-color-vjs_video_3_component_509-Black"
+                      value="#000"
+                    >
+                      Black
+                    </option>
+                    <option
+                      aria-labelledby="captions-window-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509-White"
+                      id="captions-window-color-vjs_video_3_component_509-White"
+                      value="#FFF"
+                    >
+                      White
+                    </option>
+                    <option
+                      aria-labelledby="captions-window-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509-Red"
+                      id="captions-window-color-vjs_video_3_component_509-Red"
+                      value="#F00"
+                    >
+                      Red
+                    </option>
+                    <option
+                      aria-labelledby="captions-window-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509-Green"
+                      id="captions-window-color-vjs_video_3_component_509-Green"
+                      value="#0F0"
+                    >
+                      Green
+                    </option>
+                    <option
+                      aria-labelledby="captions-window-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509-Blue"
+                      id="captions-window-color-vjs_video_3_component_509-Blue"
+                      value="#00F"
+                    >
+                      Blue
+                    </option>
+                    <option
+                      aria-labelledby="captions-window-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509-Yellow"
+                      id="captions-window-color-vjs_video_3_component_509-Yellow"
+                      value="#FF0"
+                    >
+                      Yellow
+                    </option>
+                    <option
+                      aria-labelledby="captions-window-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509-Magenta"
+                      id="captions-window-color-vjs_video_3_component_509-Magenta"
+                      value="#F0F"
+                    >
+                      Magenta
+                    </option>
+                    <option
+                      aria-labelledby="captions-window-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509-Cyan"
+                      id="captions-window-color-vjs_video_3_component_509-Cyan"
+                      value="#0FF"
+                    >
+                      Cyan
+                    </option>
+                  </select>
+                </span>
+                <span
+                  class="vjs-window-opacity vjs-opacity"
+                >
+                  <label
+                    class="vjs-label"
+                    for="vjs_select_540"
+                    id="captions-window-opacity-vjs_video_3_component_509"
+                  >
+                    Opacity
+                  </label>
+                  <select
+                    aria-labelledby="captions-window-vjs_video_3_component_509 captions-window-opacity-vjs_video_3_component_509"
+                    id="vjs_select_540"
+                  >
+                    <option
+                      aria-labelledby="captions-window-vjs_video_3_component_509 captions-window-opacity-vjs_video_3_component_509 captions-window-opacity-vjs_video_3_component_509-Transparent"
+                      id="captions-window-opacity-vjs_video_3_component_509-Transparent"
+                      value="0"
+                    >
+                      Transparent
+                    </option>
+                    <option
+                      aria-labelledby="captions-window-vjs_video_3_component_509 captions-window-opacity-vjs_video_3_component_509 captions-window-opacity-vjs_video_3_component_509-SemiTransparent"
+                      id="captions-window-opacity-vjs_video_3_component_509-SemiTransparent"
+                      value="0.5"
+                    >
+                      Semi-Transparent
+                    </option>
+                    <option
+                      aria-labelledby="captions-window-vjs_video_3_component_509 captions-window-opacity-vjs_video_3_component_509 captions-window-opacity-vjs_video_3_component_509-Opaque"
+                      id="captions-window-opacity-vjs_video_3_component_509-Opaque"
+                      value="1"
+                    >
+                      Opaque
+                    </option>
+                  </select>
+                </span>
+              </fieldset>
+            </div>
+            <div
+              class="vjs-track-settings-font"
+            >
+              <fieldset
+                class="vjs-font-percent vjs-track-setting"
+              >
+                <legend
+                  id="captions-font-size-vjs_video_3_component_509"
+                >
+                  Font Size
+                </legend>
+                <select
+                  aria-labelledby="captions-font-size-vjs_video_3_component_509"
+                  id="vjs_select_541"
+                >
+                  <option
+                    aria-labelledby="captions-font-size-vjs_video_3_component_509 captions-font-size-vjs_video_3_component_509-50"
+                    id="captions-font-size-vjs_video_3_component_509-50"
+                    value="0.50"
+                  >
+                    50%
+                  </option>
+                  <option
+                    aria-labelledby="captions-font-size-vjs_video_3_component_509 captions-font-size-vjs_video_3_component_509-75"
+                    id="captions-font-size-vjs_video_3_component_509-75"
+                    value="0.75"
+                  >
+                    75%
+                  </option>
+                  <option
+                    aria-labelledby="captions-font-size-vjs_video_3_component_509 captions-font-size-vjs_video_3_component_509-100"
+                    id="captions-font-size-vjs_video_3_component_509-100"
+                    value="1.00"
+                  >
+                    100%
+                  </option>
+                  <option
+                    aria-labelledby="captions-font-size-vjs_video_3_component_509 captions-font-size-vjs_video_3_component_509-125"
+                    id="captions-font-size-vjs_video_3_component_509-125"
+                    value="1.25"
+                  >
+                    125%
+                  </option>
+                  <option
+                    aria-labelledby="captions-font-size-vjs_video_3_component_509 captions-font-size-vjs_video_3_component_509-150"
+                    id="captions-font-size-vjs_video_3_component_509-150"
+                    value="1.50"
+                  >
+                    150%
+                  </option>
+                  <option
+                    aria-labelledby="captions-font-size-vjs_video_3_component_509 captions-font-size-vjs_video_3_component_509-175"
+                    id="captions-font-size-vjs_video_3_component_509-175"
+                    value="1.75"
+                  >
+                    175%
+                  </option>
+                  <option
+                    aria-labelledby="captions-font-size-vjs_video_3_component_509 captions-font-size-vjs_video_3_component_509-200"
+                    id="captions-font-size-vjs_video_3_component_509-200"
+                    value="2.00"
+                  >
+                    200%
+                  </option>
+                  <option
+                    aria-labelledby="captions-font-size-vjs_video_3_component_509 captions-font-size-vjs_video_3_component_509-300"
+                    id="captions-font-size-vjs_video_3_component_509-300"
+                    value="3.00"
+                  >
+                    300%
+                  </option>
+                  <option
+                    aria-labelledby="captions-font-size-vjs_video_3_component_509 captions-font-size-vjs_video_3_component_509-400"
+                    id="captions-font-size-vjs_video_3_component_509-400"
+                    value="4.00"
+                  >
+                    400%
+                  </option>
+                </select>
+              </fieldset>
+              <fieldset
+                class="vjs-edge-style vjs-track-setting"
+              >
+                <legend
+                  id="vjs_video_3_component_509"
+                >
+                  Text Edge Style
+                </legend>
+                <select
+                  aria-labelledby="vjs_video_3_component_509"
+                  id="vjs_select_542"
+                >
+                  <option
+                    aria-labelledby="vjs_video_3_component_509 vjs_video_3_component_509-None"
+                    id="vjs_video_3_component_509-None"
+                    value="none"
+                  >
+                    None
+                  </option>
+                  <option
+                    aria-labelledby="vjs_video_3_component_509 vjs_video_3_component_509-Raised"
+                    id="vjs_video_3_component_509-Raised"
+                    value="raised"
+                  >
+                    Raised
+                  </option>
+                  <option
+                    aria-labelledby="vjs_video_3_component_509 vjs_video_3_component_509-Depressed"
+                    id="vjs_video_3_component_509-Depressed"
+                    value="depressed"
+                  >
+                    Depressed
+                  </option>
+                  <option
+                    aria-labelledby="vjs_video_3_component_509 vjs_video_3_component_509-Uniform"
+                    id="vjs_video_3_component_509-Uniform"
+                    value="uniform"
+                  >
+                    Uniform
+                  </option>
+                  <option
+                    aria-labelledby="vjs_video_3_component_509 vjs_video_3_component_509-Dropshadow"
+                    id="vjs_video_3_component_509-Dropshadow"
+                    value="dropshadow"
+                  >
+                    Drop shadow
+                  </option>
+                </select>
+              </fieldset>
+              <fieldset
+                class="vjs-font-family vjs-track-setting"
+              >
+                <legend
+                  id="captions-font-family-vjs_video_3_component_509"
+                >
+                  Font Family
+                </legend>
+                <select
+                  aria-labelledby="captions-font-family-vjs_video_3_component_509"
+                  id="vjs_select_543"
+                >
+                  <option
+                    aria-labelledby="captions-font-family-vjs_video_3_component_509 captions-font-family-vjs_video_3_component_509-ProportionalSansSerif"
+                    id="captions-font-family-vjs_video_3_component_509-ProportionalSansSerif"
+                    value="proportionalSansSerif"
+                  >
+                    Proportional Sans-Serif
+                  </option>
+                  <option
+                    aria-labelledby="captions-font-family-vjs_video_3_component_509 captions-font-family-vjs_video_3_component_509-MonospaceSansSerif"
+                    id="captions-font-family-vjs_video_3_component_509-MonospaceSansSerif"
+                    value="monospaceSansSerif"
+                  >
+                    Monospace Sans-Serif
+                  </option>
+                  <option
+                    aria-labelledby="captions-font-family-vjs_video_3_component_509 captions-font-family-vjs_video_3_component_509-ProportionalSerif"
+                    id="captions-font-family-vjs_video_3_component_509-ProportionalSerif"
+                    value="proportionalSerif"
+                  >
+                    Proportional Serif
+                  </option>
+                  <option
+                    aria-labelledby="captions-font-family-vjs_video_3_component_509 captions-font-family-vjs_video_3_component_509-MonospaceSerif"
+                    id="captions-font-family-vjs_video_3_component_509-MonospaceSerif"
+                    value="monospaceSerif"
+                  >
+                    Monospace Serif
+                  </option>
+                  <option
+                    aria-labelledby="captions-font-family-vjs_video_3_component_509 captions-font-family-vjs_video_3_component_509-Casual"
+                    id="captions-font-family-vjs_video_3_component_509-Casual"
+                    value="casual"
+                  >
+                    Casual
+                  </option>
+                  <option
+                    aria-labelledby="captions-font-family-vjs_video_3_component_509 captions-font-family-vjs_video_3_component_509-Script"
+                    id="captions-font-family-vjs_video_3_component_509-Script"
+                    value="script"
+                  >
+                    Script
+                  </option>
+                  <option
+                    aria-labelledby="captions-font-family-vjs_video_3_component_509 captions-font-family-vjs_video_3_component_509-SmallCaps"
+                    id="captions-font-family-vjs_video_3_component_509-SmallCaps"
+                    value="small-caps"
+                  >
+                    Small Caps
+                  </option>
+                </select>
+              </fieldset>
+            </div>
+            <div
+              class="vjs-track-settings-controls"
+            >
+              <button
+                class="vjs-default-button"
+                title="restore all settings to the default values"
+                type="button"
+              >
+                Reset
+                <span
+                  class="vjs-control-text"
+                >
+                   restore all settings to the default values
+                </span>
+              </button>
+              <button
+                class="vjs-done-button"
+                type="button"
+              >
+                Done
+              </button>
+            </div>
+          </div>
+          <button
+            aria-disabled="false"
+            class="vjs-close-button vjs-control vjs-button"
+            title="Close Modal Dialog"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="vjs-icon-placeholder"
+            />
+            <span
+              aria-live="polite"
+              class="vjs-control-text"
+            >
+              Close Modal Dialog
+            </span>
+          </button>
+          <p
+            class="vjs-control-text"
+          >
+            End of dialog window.
+          </p>
+        </div>
+      </div>
+    </div>
+    <h5
+      class="MuiTypography-root MuiTypography-h5SemiBold css-o4ikwp-MuiTypography-root"
+    >
+      Latest Release
+    </h5>
+    <div
+      class="MuiTypography-root MuiTypography-p1 css-e7rvfo-MuiTypography-root"
+    >
+      Aired on
+       
+      23/06/2024
+    </div>
+  </div>
+</div>
+`;
diff --git a/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideoCard.test.js b/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideoCard.test.js
new file mode 100644
index 000000000..fd89bad81
--- /dev/null
+++ b/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideoCard.test.js
@@ -0,0 +1,23 @@
+import { createRender } from "@commons-ui/testing-library";
+import React from "react";
+
+import FeaturedVideoCard from "./FeaturedVideoCard";
+
+import theme from "@/charterafrica/theme";
+
+// eslint-disable-next-line testing-library/render-result-naming-convention
+const render = createRender({ theme });
+
+const defaultProps = {
+  videoId: "awPQ5LfoTys",
+  title: "Latest Release",
+  publishedAt: "23/06/2024",
+  airedOnText: "Aired on",
+};
+
+describe("FeaturedVideoCard", () => {
+  it("should render", () => {
+    const { container } = render(<FeaturedVideoCard {...defaultProps} />);
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideos.js b/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideos.js
new file mode 100644
index 000000000..5a792919c
--- /dev/null
+++ b/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideos.js
@@ -0,0 +1,45 @@
+import { RichTypography, Section } from "@commons-ui/core";
+import { Box, Grid } from "@mui/material";
+import PropTypes from "prop-types";
+import { forwardRef } from "react";
+
+import FeaturedVideoCard from "./FeaturedVideoCard";
+
+const FeaturedVideos = forwardRef(function FeaturedVideos(props, ref) {
+  const { sx, items, title, airedOnText } = props;
+  return (
+    <Box ref={ref} bgcolor="common.white" sx={sx}>
+      <Section sx={{ px: { xs: 5, sm: 0 }, py: { xs: 5, md: 10 } }}>
+        <RichTypography
+          color="primary.dark"
+          variant="h3Small"
+          component="h3"
+          sx={{ typography: { md: "h3" }, marginBottom: 3.5 }}
+        >
+          {title}
+        </RichTypography>
+        <Grid container spacing={3}>
+          {items?.map((item) => (
+            <Grid xs={12} sm={6} md={4} item key={item.id}>
+              <FeaturedVideoCard {...item} airedOnText={airedOnText} />
+            </Grid>
+          ))}
+        </Grid>
+      </Section>
+    </Box>
+  );
+});
+
+FeaturedVideos.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.shape({})),
+  title: PropTypes.string,
+  airedOnText: PropTypes.string,
+};
+
+FeaturedVideos.defaultProps = {
+  items: undefined,
+  title: undefined,
+  airedOnText: undefined,
+};
+
+export default FeaturedVideos;
diff --git a/apps/charterafrica/src/components/FeaturedVideos/index.js b/apps/charterafrica/src/components/FeaturedVideos/index.js
new file mode 100644
index 000000000..491f56d10
--- /dev/null
+++ b/apps/charterafrica/src/components/FeaturedVideos/index.js
@@ -0,0 +1,3 @@
+import FeaturedVideos from "./FeaturedVideos";
+
+export default FeaturedVideos;
diff --git a/apps/charterafrica/src/lib/data/common/processBlockFeaturedVideos.js b/apps/charterafrica/src/lib/data/common/processBlockFeaturedVideos.js
new file mode 100644
index 000000000..ecc736ce2
--- /dev/null
+++ b/apps/charterafrica/src/lib/data/common/processBlockFeaturedVideos.js
@@ -0,0 +1,80 @@
+import { fetchPlaylistItems } from "@/charterafrica/lib/youtube";
+import formatDateTime from "@/charterafrica/utils/formatDate";
+
+const airedOnText = {
+  en: "Aired on",
+  pt: "Exibido em",
+  fr: "Diffusé sur",
+};
+export async function getVideosFromPlaylist(
+  playlistId,
+  options,
+  locale = "en",
+) {
+  if (!playlistId) {
+    return [];
+  }
+
+  const videosFromApi = await fetchPlaylistItems(playlistId, options);
+  const items =
+    videosFromApi.items?.map(({ snippet, ...restArgs }) => {
+      const { description, publishedAt } = snippet;
+      return {
+        ...snippet,
+        ...snippet?.resourceId,
+        ...restArgs,
+        description: description?.replace(/\r?\n/g, "<br />") || null,
+        publishedAt: formatDateTime(publishedAt, {
+          locale,
+        }),
+      };
+    }) || [];
+  return items;
+}
+
+async function getFeaturedVideos(featured, playlistItems) {
+  if (featured?.featuredType === "latest") {
+    const sortedItems = playlistItems.sort(
+      (a, b) => new Date(b.publishedAt) - new Date(a.publishedAt),
+    );
+    if (sortedItems?.length) {
+      return sortedItems.slice(0, 3);
+    }
+    return null;
+  }
+  if (featured?.featuredType === "custom") {
+    const items =
+      featured?.items?.map((item) =>
+        playlistItems.find((plItem) => plItem.videoId === item),
+      ) ?? null;
+    return items;
+  }
+  return playlistItems;
+}
+
+async function featuredVideos(unProcessedPage, locale) {
+  const page = unProcessedPage;
+  const { blocks } = page;
+  const featuredVideosIndex = blocks.findIndex(
+    (block) => block.slug === "featured-videos",
+  );
+  if (featuredVideosIndex > -1) {
+    const { featured: featuredField, playlist: playlistField } =
+      blocks[featuredVideosIndex];
+    const items = await getVideosFromPlaylist(
+      playlistField?.playlistId,
+      locale,
+    );
+    const featured = await getFeaturedVideos(featuredField, items);
+    const block = {
+      ...blocks[featuredVideosIndex]?.playlist,
+      slug: "featured-videos",
+      items: featured ?? [],
+      airedOnText: airedOnText[locale],
+    };
+    page.blocks[featuredVideosIndex] = block;
+  }
+  return page;
+}
+
+export default featuredVideos;
diff --git a/apps/charterafrica/src/lib/data/common/processPageAbout.js b/apps/charterafrica/src/lib/data/common/processPageAbout.js
index 5c0cd4083..e8638b4f3 100644
--- a/apps/charterafrica/src/lib/data/common/processPageAbout.js
+++ b/apps/charterafrica/src/lib/data/common/processPageAbout.js
@@ -1,3 +1,5 @@
+import processFeaturedVideos from "./processBlockFeaturedVideos";
+
 async function processPageAbout(page, api, { locale }) {
   const { blocks } = page;
   const foundIndex = blocks.findIndex(({ slug }) => slug === "our-grantees");
@@ -15,7 +17,8 @@ async function processPageAbout(page, api, { locale }) {
     };
   }
 
-  return page;
+  const processedPage = await processFeaturedVideos(page, locale);
+  return processedPage;
 }
 
 export default processPageAbout;
diff --git a/apps/charterafrica/src/lib/data/common/processPageConsultation.js b/apps/charterafrica/src/lib/data/common/processPageConsultation.js
index 1f39c9f38..e4fa06b3b 100644
--- a/apps/charterafrica/src/lib/data/common/processPageConsultation.js
+++ b/apps/charterafrica/src/lib/data/common/processPageConsultation.js
@@ -1,7 +1,7 @@
 import {
   fetchDocument,
-  fetchDocuments,
   fetchDocumentIframe,
+  fetchDocuments,
 } from "@/charterafrica/lib/sourceAfrica";
 import { fetchPlaylistItems } from "@/charterafrica/lib/youtube";
 import getDocumentsQuery from "@/charterafrica/utils/documents/documents";
diff --git a/apps/charterafrica/src/lib/data/common/processPageIndex.js b/apps/charterafrica/src/lib/data/common/processPageIndex.js
index d30029140..7f2ebc127 100644
--- a/apps/charterafrica/src/lib/data/common/processPageIndex.js
+++ b/apps/charterafrica/src/lib/data/common/processPageIndex.js
@@ -1,3 +1,5 @@
+import processFeaturedVideos from "./processBlockFeaturedVideos";
+
 const processHero = (page) => {
   const { blocks } = page;
   const heroIndex = blocks.findIndex((block) => block.slug === "hero");
@@ -88,8 +90,8 @@ async function processPageIndex(page, api, context) {
   processHero(page);
   processMooc(page);
   processSpotlight(page, api, context);
-
-  return page;
+  const processedPage = await processFeaturedVideos(page, context.locale);
+  return processedPage;
 }
 
 export default processPageIndex;
diff --git a/apps/charterafrica/src/lib/data/common/processPageOpportunities.js b/apps/charterafrica/src/lib/data/common/processPageOpportunities.js
index 769a19e8c..13b3e6116 100644
--- a/apps/charterafrica/src/lib/data/common/processPageOpportunities.js
+++ b/apps/charterafrica/src/lib/data/common/processPageOpportunities.js
@@ -1,5 +1,7 @@
 import { deepmerge } from "@mui/utils";
 
+import processFeaturedVideos from "./processBlockFeaturedVideos";
+
 import formatDateTime from "@/charterafrica/utils/formatDate";
 
 function processOpportunity(opportunity, pageUrl, api, context) {
@@ -171,7 +173,8 @@ const fetchOpportunitiesCollectionFunctionMap = {
   grants: fetchGrants,
 };
 
-async function processPageOpportunities(page, api, context) {
+async function processPageOpportunities(unProcessedPage, api, context) {
+  const page = await processFeaturedVideos(unProcessedPage, context.locale);
   const { blocks, breadcrumbs = [] } = page;
   const pageUrl = breadcrumbs[breadcrumbs.length - 1].url;
   const opportunitiesBlocks = await Promise.all(
diff --git a/apps/charterafrica/src/pages/[...slugs].page.js b/apps/charterafrica/src/pages/[...slugs].page.js
index 6ff0aba86..01cc990ae 100644
--- a/apps/charterafrica/src/pages/[...slugs].page.js
+++ b/apps/charterafrica/src/pages/[...slugs].page.js
@@ -14,6 +14,7 @@ import Entity from "@/charterafrica/components/Entity";
 import Explainers from "@/charterafrica/components/Explainers";
 import FAQ from "@/charterafrica/components/FAQ";
 import FeaturedPostCard from "@/charterafrica/components/FeaturedPostCard";
+import FeaturedVideos from "@/charterafrica/components/FeaturedVideos";
 import FlourishChart from "@/charterafrica/components/FlourishChart";
 import FocalCountries from "@/charterafrica/components/FocalCountries";
 import Grantees from "@/charterafrica/components/Grantees";
@@ -51,6 +52,7 @@ const componentsBySlugs = {
   explainers: Explainers,
   faq: FAQ,
   "featured-post": FeaturedPostCard,
+  "featured-videos": FeaturedVideos,
   "fellowships-and-grants-header": OpportunityHeader,
   "flourish-chart": FlourishChart,
   "focal-countries": FocalCountries,
diff --git a/apps/charterafrica/src/payload/blocks/EmbeddedPlaylist.js b/apps/charterafrica/src/payload/blocks/EmbeddedPlaylist.js
index c9845401a..b4ea16c5d 100644
--- a/apps/charterafrica/src/payload/blocks/EmbeddedPlaylist.js
+++ b/apps/charterafrica/src/payload/blocks/EmbeddedPlaylist.js
@@ -1,33 +1,8 @@
 import { slateEditor } from "@payloadcms/richtext-slate";
-import { select } from "payload/dist/fields/validations";
 
 import richText from "../fields/richText";
-import YouTubeSelect from "../fields/youtubeSelect/youtubeSelect";
-import {
-  BLOCK_SLUG,
-  getEmbeddedPlaylist,
-  mapPlaylistLinkToId,
-} from "../utils/embeddedPlaylist";
-
-async function validateYouTubeSelect(
-  value,
-  { data: document, hasMany, required, t },
-) {
-  let options = [];
-  const { playlistId, queryString } = getEmbeddedPlaylist(document);
-  if (playlistId) {
-    const response = await fetch(
-      `${process.env.PAYLOAD_PUBLIC_APP_URL}/api/v1/opportunities/consultation/multimedia?${queryString}`,
-    );
-    const data = await response.json();
-    options =
-      data?.items?.map((item) => ({
-        label: item?.snippet?.title,
-        value: item?.snippet?.resourceId?.videoId,
-      })) || [];
-  }
-  return select(value, { hasMany, options, required, t });
-}
+import youtubePlaylistSelect from "../fields/youtubeSelect/youtubePlaylistSelect";
+import { BLOCK_SLUG } from "../utils/embeddedPlaylist";
 
 const EmbeddedPlaylist = {
   slug: BLOCK_SLUG,
@@ -79,121 +54,7 @@ const EmbeddedPlaylist = {
         }),
       ],
     },
-    {
-      type: "collapsible",
-      label: {
-        en: "Playlist",
-      },
-      fields: [
-        {
-          type: "group",
-          name: "playlist",
-          fields: [
-            {
-              name: "title",
-              label: {
-                en: "Title",
-                fr: "Titre",
-                pt: "Título",
-              },
-              admin: {
-                description: () => "e.g. Previous Consultation",
-              },
-              type: "text",
-              localized: true,
-            },
-            {
-              name: "link",
-              label: {
-                en: "URL",
-              },
-              type: "text",
-              admin: {
-                description: () =>
-                  "YouTube playlist URL e.g https://www.youtube.com/watch?list=<id> or https://www.youtube.com/playlist?list=<id>",
-              },
-              required: true,
-            },
-            {
-              name: "playlistId",
-              admin: {
-                hidden: true,
-              },
-              required: true,
-              hooks: {
-                beforeValidate: [mapPlaylistLinkToId],
-              },
-              type: "text",
-            },
-          ],
-        },
-        {
-          name: "featured",
-          type: "group",
-          fields: [
-            {
-              name: "featuredType",
-              label: {
-                en: "Show",
-                ft: "Afficher",
-                pt: "Mostrar",
-              },
-              type: "radio",
-              options: [
-                {
-                  label: {
-                    en: "Most recent in the Playlist",
-                    fr: "Le plus récent dans la playlist",
-                    pt: "Mais recente na lista de reprodução",
-                  },
-                  value: "latest",
-                },
-                {
-                  label: {
-                    en: "Custom selection",
-                    fr: "Sélection personnalisée",
-                    pt: "Seleção personalizada",
-                  },
-                  value: "custom",
-                },
-                {
-                  label: {
-                    en: "None",
-                    ft: "Aucun",
-                    pt: "Nenhum",
-                  },
-                  value: "none",
-                },
-              ],
-              defaultValue: "latest",
-            },
-            {
-              name: "items",
-              label: { en: "Video(s)", fr: "Vidéo(s)", pt: "Vídeo(s)" },
-              type: "select",
-              hasMany: true,
-              // These are just dummy options, YouTubeSelect loads (id, title)
-              // pairs from the playlist link provided above.
-              options: ["-"],
-              required: true,
-              validate: validateYouTubeSelect,
-              admin: {
-                description: () =>
-                  "Enter playlist URL above to select an audio/video",
-                components: {
-                  Field: YouTubeSelect,
-                },
-                condition: (_, siblingData) =>
-                  siblingData?.featuredType === "custom",
-              },
-            },
-          ],
-          admin: {
-            hideGutter: true,
-          },
-        },
-      ],
-    },
+    youtubePlaylistSelect(BLOCK_SLUG),
   ],
 };
 
diff --git a/apps/charterafrica/src/payload/blocks/FeaturedVideos.js b/apps/charterafrica/src/payload/blocks/FeaturedVideos.js
new file mode 100644
index 000000000..1b3c0e9c6
--- /dev/null
+++ b/apps/charterafrica/src/payload/blocks/FeaturedVideos.js
@@ -0,0 +1,21 @@
+import youtubePlaylistSelect from "../fields/youtubeSelect/youtubePlaylistSelect";
+
+const slug = "featured-videos";
+const FeaturedVideos = {
+  slug,
+  labels: {
+    singular: {
+      en: "Featured Video",
+      fr: "Vidéo en vedette",
+      pt: "Vídeo em destaque",
+    },
+    plural: {
+      en: "Featured Videos",
+      fr: "vidéos liées",
+      pt: "Vídeos em Destaque",
+    },
+  },
+  fields: [youtubePlaylistSelect(slug)],
+};
+
+export default FeaturedVideos;
diff --git a/apps/charterafrica/src/payload/collections/Pages.js b/apps/charterafrica/src/payload/collections/Pages.js
index 7bbd786de..37647cb6e 100644
--- a/apps/charterafrica/src/payload/collections/Pages.js
+++ b/apps/charterafrica/src/payload/collections/Pages.js
@@ -10,6 +10,7 @@ import EmbeddedPlaylist from "../blocks/EmbeddedPlaylist";
 import Error from "../blocks/Error";
 import FAQ from "../blocks/FAQ";
 import FeaturedPost from "../blocks/FeaturedPost";
+import FeaturedVideos from "../blocks/FeaturedVideos";
 import FlourishChart from "../blocks/FlourishChart";
 import Global from "../blocks/Global";
 import Grantees from "../blocks/Grantees";
@@ -83,6 +84,7 @@ const Pages = {
         Resources,
         Spotlight,
         Tools,
+        FeaturedVideos,
       ],
       admin: {
         initCollapsed: true,
diff --git a/apps/charterafrica/src/payload/fields/youtubeSelect/youtubePlaylistSelect.js b/apps/charterafrica/src/payload/fields/youtubeSelect/youtubePlaylistSelect.js
new file mode 100644
index 000000000..8c4fc7c3a
--- /dev/null
+++ b/apps/charterafrica/src/payload/fields/youtubeSelect/youtubePlaylistSelect.js
@@ -0,0 +1,150 @@
+import { select } from "payload/dist/fields/validations";
+import { createElement } from "react";
+
+import {
+  getEmbeddedPlaylist,
+  mapPlaylistLinkToId,
+} from "../../utils/embeddedPlaylist";
+
+import YouTubeSelect from "./youtubeSelect";
+
+async function validateYouTubeSelect(
+  value,
+  { data: document, hasMany, required, t },
+  blockSlug,
+) {
+  let options = [];
+  const { playlistId, queryString } = getEmbeddedPlaylist(document, blockSlug);
+  if (playlistId) {
+    const response = await fetch(
+      `${process.env.PAYLOAD_PUBLIC_APP_URL}/api/v1/opportunities/consultation/multimedia?${queryString}`,
+    );
+    const data = await response.json();
+    options =
+      data?.items?.map((item) => ({
+        label: item?.snippet?.title,
+        value: item?.snippet?.resourceId?.videoId,
+      })) || [];
+  }
+  return select(value, { hasMany, options, required, t });
+}
+
+export default function youtubePlaylistSelect(slug) {
+  return {
+    type: "collapsible",
+    label: {
+      en: "Playlist",
+    },
+    fields: [
+      {
+        type: "group",
+        name: "playlist",
+        fields: [
+          {
+            name: "title",
+            label: {
+              en: "Title",
+              fr: "Titre",
+              pt: "Título",
+            },
+            admin: {
+              description: () => "e.g. Previous Consultation",
+            },
+            type: "text",
+            localized: true,
+          },
+          {
+            name: "link",
+            label: {
+              en: "URL",
+            },
+            type: "text",
+            admin: {
+              description: () =>
+                "YouTube playlist URL e.g https://www.youtube.com/watch?list=<id> or https://www.youtube.com/playlist?list=<id>",
+            },
+            required: true,
+          },
+          {
+            name: "playlistId",
+            admin: {
+              hidden: true,
+            },
+            required: true,
+            hooks: {
+              beforeValidate: [mapPlaylistLinkToId],
+            },
+            type: "text",
+          },
+        ],
+      },
+      {
+        name: "featured",
+        type: "group",
+        fields: [
+          {
+            name: "featuredType",
+            label: {
+              en: "Show",
+              ft: "Afficher",
+              pt: "Mostrar",
+            },
+            type: "radio",
+            options: [
+              {
+                label: {
+                  en: "Most recent in the Playlist",
+                  fr: "Le plus récent dans la playlist",
+                  pt: "Mais recente na lista de reprodução",
+                },
+                value: "latest",
+              },
+              {
+                label: {
+                  en: "Custom selection",
+                  fr: "Sélection personnalisée",
+                  pt: "Seleção personalizada",
+                },
+                value: "custom",
+              },
+              {
+                label: {
+                  en: "None",
+                  ft: "Aucun",
+                  pt: "Nenhum",
+                },
+                value: "none",
+              },
+            ],
+            defaultValue: "latest",
+          },
+          {
+            name: "items",
+            label: { en: "Video(s)", fr: "Vidéo(s)", pt: "Vídeo(s)" },
+            type: "select",
+            hasMany: true,
+            // These are just dummy options, YouTubeSelect loads (id, title)
+            // pairs from the playlist link provided above.
+            options: ["-"],
+            required: true,
+            validate: (value, props) =>
+              validateYouTubeSelect(value, props, slug),
+            admin: {
+              description: () =>
+                "Enter playlist URL above to select an audio/video",
+              components: {
+                Field: (props) =>
+                  createElement(YouTubeSelect, { slug, ...props }),
+              },
+              condition: (_, siblingData) =>
+                siblingData?.featuredType === "custom",
+            },
+          },
+        ],
+        admin: {
+          hideGutter: true,
+        },
+      },
+    ],
+  };
+}
diff --git a/apps/charterafrica/src/payload/fields/youtubeSelect/youtubeSelect.js b/apps/charterafrica/src/payload/fields/youtubeSelect/youtubeSelect.js
index 034949639..be8bf6530 100644
--- a/apps/charterafrica/src/payload/fields/youtubeSelect/youtubeSelect.js
+++ b/apps/charterafrica/src/payload/fields/youtubeSelect/youtubeSelect.js
@@ -1,7 +1,7 @@
 import {
-  useAllFormFields,
-  Select,
   getSiblingData,
+  Select,
+  useAllFormFields,
 } from "payload/components/forms";
 import { createElement, useMemo } from "react";
 import useSWR from "swr";
@@ -10,11 +10,11 @@ import { getEmbeddedPlaylist } from "../../utils/embeddedPlaylist";
 
 const fetcher = (url) => fetch(url).then((res) => res.json());
 
-function YouTubeSelect(props) {
+function YouTubeSelect({ slug, ...props }) {
   const [fields] = useAllFormFields();
 
   const document = getSiblingData(fields, "blocks");
-  const { playlistId, queryString } = getEmbeddedPlaylist(document);
+  const { playlistId, queryString } = getEmbeddedPlaylist(document, slug);
   const { data } = useSWR(
     playlistId
       ? `/api/v1/opportunities/consultation/multimedia?${queryString}`
diff --git a/apps/charterafrica/src/payload/utils/embeddedPlaylist.js b/apps/charterafrica/src/payload/utils/embeddedPlaylist.js
index 3eb22fcbe..90739b9b7 100644
--- a/apps/charterafrica/src/payload/utils/embeddedPlaylist.js
+++ b/apps/charterafrica/src/payload/utils/embeddedPlaylist.js
@@ -27,8 +27,8 @@ function getEmbeddedPlaylistFromBlock(block) {
   return { playlistId, queryString };
 }
 
-export function getEmbeddedPlaylist(documents = {}) {
+export function getEmbeddedPlaylist(documents = {}, blockSlug = BLOCK_SLUG) {
   const { blocks } = documents;
-  const block = blocks?.find((b) => b?.blockType === BLOCK_SLUG);
+  const block = blocks?.find((b) => b?.blockType === blockSlug);
   return getEmbeddedPlaylistFromBlock(block);
 }