Formatting: Video

About

Formatting Video is a configuration that can be added to YouTube videos IFRAME or videos uploaded to Blogger - (Demo).

Specification

Configuration

Description

box

Value	Preview
none	View
border	View
shadow	View

formatting

By default, the system will process all IFRAME elements with src https://www.youtube.com/embed/** and https://www.blogger.com/video.g** that placed at supported sections (see data Specification). By setting the value to no in this configuration, the corresponding IFRAME elements will not be processed with formatting (they will use the browser's default style).

Usage

YouTube Video This formatting will process all IFRAME elements that load YouTube videos. Specifically, iframe elements with a src starting with https://www.youtube.com/embed/.
```
        
<iframe src="https://www.youtube.com/embed/***"></iframe>
        
        
```
Note: In the HTML above, no additional configurations are added. All configurations will use the Default Value.

Add the desired configuration by including the attribute
data-configuration-name='Value' on the IFRAME element.

Example:
```
        
<iframe src="https://www.youtube.com/embed/***" data-box="shadow"></iframe>
        
        
```

Blogger Video For videos added using the upload method, the HTML in the blog post editor looks something like this:

        
<object class="BLOG_video_class" contentid="4b3db01643eb6ecb" ...></object>

To add a configuration, wrap the object element with a wrapper element like this:

        
<div data-box='shadow'>
  <object class="BLOG_video_class" contentid="4b3db01643eb6ecb" ...></object>
</div>

Others

This formatting will also automatically make videos to be responsive (the video width will follow the available area width, with an aspect ratio of 16:9). The width and height attributes on the iframe and object elements will be ignored.