Migrate local video header to cloud storage

interest

Since the Ocean theme includes and initiates the videos and images about header via local folder themes/ocean/source/images/ocean/, the page loads slowly at mobile device. So I decided to transfer these large files to cloud side to promote loading speed.

  1. Find the local image folder as referred above.

  2. upload these files to cloudinary, it provides plugin as a module to js file:

    1
    cloudinary.videoTag('gitblog/ocean/ocean_j5rpnt').toHtml();

    the src ref-way can be find at “edit” page by right clicking on cloudinary/file.
    Here I did not use this short path cuz I am not in need of a large quantity of inserted files.

  1. Modify themes/ocean/_config.yml:
    1
    2
    3
    4
    5
    6
    7
    # Ocean Video
    # Because I put videos in multiple formats on the same path, I just labeled the path here.
    ocean:
      overlay: true
      path: https://res.cloudinary.com/elizashi/
      # path: /images/ocean/
      brand: /images/ming-inverted.svg
  2. Find the ocean.ejs file in themes/ocean/layout/_partial/, and modify as follows:
    1
    2
    3
    4
    5
    <% if (theme.ocean.overlay) { %>
      <div class="video-frame">
        <img src="<%- theme.ocean.path %>image/upload/v1564042232/gitblog/ocean/overlay-hero_hfo1px.png" alt="Decorative image frame">
      </div>
    <% } %>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div class="video-media">
      <video playsinline="" autoplay="" loop="" muted="" data-autoplay=""
             poster="<%- theme.ocean.path %>image/upload/v1564042234/gitblog/ocean/ocean_dvmafj.png" x5-video-player-type="h5">
        <source src="<%- theme.ocean.path %>video/upload/v1564042238/gitblog/ocean/ocean_j5rpnt.mp4" type="video/mp4">
        <source src="<%- theme.ocean.path %>video/upload/v1564042232/gitblog/ocean/ocean_p4kg5c.ogv" type="video/ogg">
        <source src="<%- theme.ocean.path %>video/upload/v1564042238/gitblog/ocean/ocean_qgwvjh.webm" type="video/webm">
        <p>Your user agent does not support the HTML5 Video element.</p>
      </video>
      <div class="video-overlay"></div>
    </div>
    As I mentioned that I am not using many external src so I modify each file address one by one.
    If files come to more, shall turn to use the cloudinary.videoTag func to insert files or the code will get lengthy and jumbled.