MediaBlockVideos

Media Block (videos)

Template ID	Required
oggeh-videos	No

A template for displaying the content of a single media block with videos.

Example:

<template id="oggeh-videos">
  <div class="grid-item col-lg-{{ size_x }}">
    <div class="content">
      <h3>{{ title }}</h3>
      <div data-oggeh-repeat="" class="video-gallery-area">
        <div class=" video-gallery-bg">
          <div class="video-gallery">
            <img src="{{ maximum.url }}" alt="{{ caption.title }}">    
            <div class="overlay-gallery">
              <div class="box">
                <div class="content">
                  <a class="video-popup" href="{{ url }}" alt="{{ caption.title }}" target="_blank" rel="noopener noreferrer">
                    <img src="/img/resources/play-btn.png" alt="{{ caption.title }}">
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

Notes: You can only use the data attribute data-oggeh-repeat with this media/attachments blocks and/or receive a list of content from OGGEH API (see Handling Search Results).

Example API Response Object

{
    "type": "media",
    "col": 1,
    "row": 3,
    "size_x": 6,
    "size_y": 1,
    "title": "Test Video Block",
    "media": [
        {
            "id": 1,
            "code": "xxx",
            "ext": "mp4",
            "type": "video",
            "url": "https://storage.googleapis.com/cdn.oggeh.com/files/xxx/vid/xxx.mp4",
            "thumbnail": {
                "url": "https://storage.googleapis.com/cdn.oggeh.com/files/xxx/img/thumbs/xxx.png"
            },
            "regular": {
                "url": "https://storage.googleapis.com/cdn.oggeh.com/files/xxx/img/photos/xxx.png"
            },
            "maximum": {
                "url": "https://storage.googleapis.com/cdn.oggeh.com/files/xxx/img/medium/xxx.png"
            },
            "original": {
                "url": "https://storage.googleapis.com/cdn.oggeh.com/files/xxx/img/large/xxx.png"
            },
            "tags": [],
            "caption": {
                "title": "Test Video 1",
                "description": ""
            }
        },
        {
            "id": 2,
            "code": "xxx",
            "ext": "mp4",
            "type": "video",
            "url": "https://storage.googleapis.com/cdn.oggeh.com/files/xxx/vid/xxx.mp4",
            "thumbnail": {
                "url": "https://storage.googleapis.com/cdn.oggeh.com/files/xxx/img/thumbs/xxx.png"
            },
            "regular": {
                "url": "https://storage.googleapis.com/cdn.oggeh.com/files/xxx/img/photos/xxx.png"
            },
            "maximum": {
                "url": "https://storage.googleapis.com/cdn.oggeh.com/files/xxx/img/medium/xxx.png"
            },
            "original": {
                "url": "https://storage.googleapis.com/cdn.oggeh.com/files/xxx/img/large/xxx.png"
            },
            "tags": [],
            "caption": {
                "title": "Test Video 2",
                "description": ""
            }
        }
    ]
}