ePublishing Knowledge BaseePublishing Knowledge Base EditorialHow do I add a video to body of my article?

How do I add a video to body of my article?

Depending on your article template, you can add a video in two spots of your articles:

  1. Above the body area.
  2. Within the body of any page of your article.

This article refers to the second option.

Open your text editor or notepad program on your computer.

You'll use this to copy your embed code into for easy setup.

On Mac, this is TextEdit or Notes.

On Windows, this is Notepad.

If the video is in the Media Manager, create the embed code for the video to use the ePublishing default video player.

Find the ID number of the video in the Media Manager for the specific video.

Find the ID number of the video in the Media Manager for the specific video.

Using your text editor, create the embed code using the ID number of the video.

Copy and paste the following embed code, replacing YOURDOMAIN and IDHERE with your domain on the id number of the video:

<iframe src="http://www.YOURDOMAIN.com/media/video/IDHERE/embed" height="360" width="640" frameborder="0" allowfullscreen></iframe>

Here's an example:

<iframe src="http://www.epublishing.com/media/video/2/embed" height="360" width="640" frameborder="0" allowfullscreen></iframe>

Using your text editor, create the embed code using the ID number of the video.

If the video is on YouTube, Vimeo, or other 3rd party site, copy the embed code for the video while in those services. For example:

Have a responsive website? Wrap the video embed with a special div class.

If you have a responsive website that changes layout based on which device the reader is using, you must do this step.

Within your article or other content, wrap the embed code with the following DIV tag: <div class="video-embed-container">PASTE YOUR EMBED CODE HERE</div>

Within your article or other content, wrap the embed code with the following DIV tag: &lt;div class=&quot;video-embed-container&quot;&gt;PASTE YOUR EMBED CODE HERE&lt;/div&gt;

If the CSS indicated above (video-embed-container) is not yet available on your website, update your CSS file with the following code snippet:

.video-embed-container {

 position: relative;

 padding-bottom: 56.25%;

 padding-top: 35px;

 height: 0;

 overflow: hidden;

}

 

Questions or not familiar/comfortable with CSS? Ask your solutions manager before making this change.

In your article in the Article Manager, open the WYSIWYG. This will also work in other tools, such as the Page Manager.

In your article in the Article Manager, open the WYSIWYG. This will also work in other tools, such as the Page Manager.

Select the Source button.

Select the Source button.

This will switch the view mode of the WYSIWYG editor from its current mode to the HTML source code.

Find the area between paragraphs where you want to place this video.

Find the area between paragraphs where you want to place this video.

Depending on how you have been creating your paragraphs, you may see them wrapped in <p> .... </p>  tags, with soft breaks <br /> tags, or wrapped in <div ...> .... </div> tags.

Copy the div wrapped video embed code from your text editor and paste it in the desired location.

Copy the div wrapped video embed code from your text editor and paste it in the desired location.

Click SOURCE again in your WYSIWYG editor; you may see your video.

Click SOURCE again in your WYSIWYG editor; you may see your video.

Hit the Commit Changes button and return to the article tool.

Hit the Commit Changes button and return to the article tool.

Final step: Make sure everything works! Preview or Save and View.

Final step: Make sure everything works! Preview or Save and View.

If the tool has a preview function, click Preview.

Scroll down and click Preview. When you are happy with the results, click Save to preserve your work.

If the tool has a preview function, click Preview.

If the tool you are using does not have preview functionality, be sure to SAVE and review the content on your site immediately.

NOTE: Certain pages are cached and will not let you see the changes immediately. You may have to wait up to 15 minutes to see the change.