E-Responsive video

Step 1. HTML markup

• Root: Source/html/fragments/lipsum/video.html
• Embed <iframe>tag: The <iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document.

Step2. Create Video wrapper

When the width value of iframe is 100%, the problem is the video appears to be cut off. Even though the width value grows bigger, height value is not changed. So we should make a wrapper using blow code. It makes responsive video.

Step3. JavaScript for WYSIWYG

In the WYSIWYG area, client will input only URL tag of video. In this case,

JavaScript will change URL tag to the HTML markup which I want.

Final Code

Reference

Fluid Width Video