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:
- Above the body area.
- 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.
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>
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:
The above three screen shots were taken from youtube.com.
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>
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, select Source Code in the WYSIWYG.
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.
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.
Click SOURCE again in your WYSIWYG editor; you may see your video.
Hit the Save button at the top.
Final step: Make sure everything works! Preview or Save and View.
Click on "Preview" at the top to make sure your video displays how you intended. Save.
