diff --git a/site/component/Article/index.jsx b/site/component/Article/index.jsx
index 0f550c4036..bffac5181d 100644
--- a/site/component/Article/index.jsx
+++ b/site/component/Article/index.jsx
@@ -1,18 +1,9 @@
 import React from 'react';
 import { Link } from 'react-router';
-import ImagePreview from './ImagePreview';
-import VideoPlayer from './VideoPlayer';
 import * as utils from '../utils';
-import { getTagName, getAttributes, getChildren, isElement } from 'jsonml.js/lib/utils';
+import { getTagName, getChildren } from 'jsonml.js/lib/utils';
 
 export default class Article extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.imgToPreview = this.imgToPreview.bind(this);
-    this.enhanceVideo = this.enhanceVideo.bind(this);
-  }
-
   componentDidMount() {
     this.componentDidUpdate();
   }
@@ -21,25 +12,6 @@ export default class Article extends React.Component {
     utils.setTitle(`${chinese || english} - Ant Design`);
   }
 
-  imgToPreview(node) {
-    if (getTagName(node) === 'p' &&
-        getTagName(getChildren(node)[0]) === 'img' &&
-        /preview-img/gi.test(getAttributes(getChildren(node)[0]).class)) {
-      const imgs = getChildren(node)
-              .filter((img) => isElement(img) && Object.keys(getAttributes(img)).length > 0)
-              .map((img) => getAttributes(img));
-      return <ImagePreview imgs={imgs} />;
-    }
-    return node;
-  }
-
-  enhanceVideo(node) {
-    if (getTagName(node) === 'video') {
-      return <VideoPlayer video={getAttributes(node)} />;
-    }
-    return node;
-  }
-
   render() {
     const { content, location } = this.props;
     const jumper = content.description.filter((node) => {
@@ -54,10 +26,7 @@ export default class Article extends React.Component {
       );
     });
 
-    const { meta, intro } = content;
-    const description = content.description
-            .map(this.imgToPreview)
-            .map(this.enhanceVideo);
+    const { meta, intro, description } = content;
 
     return (
       <article className="markdown">
diff --git a/site/component/Article/ImagePreview.jsx b/site/component/ImagePreview/index.jsx
similarity index 100%
rename from site/component/Article/ImagePreview.jsx
rename to site/component/ImagePreview/index.jsx
diff --git a/site/component/Article/VideoPlayer.jsx b/site/component/VideoPlayer/index.jsx
similarity index 100%
rename from site/component/Article/VideoPlayer.jsx
rename to site/component/VideoPlayer/index.jsx
diff --git a/site/component/utils.js b/site/component/utils.js
index b567efef99..aeced27fea 100644
--- a/site/component/utils.js
+++ b/site/component/utils.js
@@ -1,8 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Link } from 'react-router';
-import { getTagName, getAttributes, getChildren } from 'jsonml.js/lib/utils';
+import { getTagName, getAttributes, getChildren, isElement } from 'jsonml.js/lib/utils';
 import toReactComponent from 'jsonml-to-react-component';
+import VideoPlayer from './VideoPlayer';
+import ImagePreview from './ImagePreview';
 
 function isHeading(type) {
   return /h[1-6]/i.test(type);
@@ -33,6 +35,19 @@ export function jsonmlToComponent(pathname, jsonml) {
         { dangerouslySetInnerHTML: { __html: getChildren(getChildren(node)[0])[0] } }
       ));
     }],
+    [(node) => getTagName(node) === 'video', (node, index) =>
+      <VideoPlayer video={getAttributes(node)} key={index} />
+    ],
+    [(node) => {
+      return getTagName(node) === 'p' &&
+        getTagName(getChildren(node)[0]) === 'img' &&
+        /preview-img/gi.test(getAttributes(getChildren(node)[0]).class);
+