Embedding a video into an article can be a great way to enhance the content and engage readers. When done properly, embedded videos can provide useful demonstrations, interviews, presentations, and more. There are a few key steps to embedding a video successfully:
Choose an Appropriate Video
First, choose a video that is relevant and adds value for readers. Make sure the video directly supports the topic of your article. Readers should gain additional insight from watching the embedded video. Some types of videos that work well embedded in articles include:
- Short demonstrations or how-to videos
- Expert interviews or testimonials
- Presentations or lectures related to the article topic
- Animated explainer videos
Keep the video short and engaging. Under 5 minutes is ideal. You want viewers to watch the entire video without losing interest.
Optimize the Video for Embedding
Once you’ve chosen an appropriate video, there are a few optimization tips to follow:
- Upload the video to YouTube or Vimeo and get the embed code.
- Make sure the video has a title, description, and tags to help with SEO.
- Make the video public or unlisted so it can be embedded.
- Use a thumbnail preview image that looks appealing.
Properly optimizing the video will improve the experience for readers and help with visibility.
Embed the Video with HTML
To embed a video in HTML, you’ll need to use an iframe element. Here is the basic syntax:
<iframe width="560" height="315" src="VIDEO URL" frameborder="0" allowfullscreen></iframe>
Just replace the VIDEO URL with the actual video embed code provided by YouTube, Vimeo, etc. For example:
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
Adjust the width and height attributes as needed to fit the video nicely into your page layout. Common sizes include 560×315, 640×360, and 640×480.
Position the Video Thoughtfully
Where you place the embedded video within your article can impact the user experience. Here are some tips on positioning:
- Place the video high up near the start of the relevant section so it’s visible when readers scroll through.
- Avoid placing videos mid-paragraph as it interrupts the flow of reading.
- Consider putting the video after an introduction paragraph or two to provide context first.
- Use videos in between sections as “breaks” to keep the article visually interesting.
Think about the ideal viewing experience and be strategic with video placement.
Enhance the Video with Captions
Adding captions to your embedded video improves accessibility and viewer understanding. To include captions:
- Upload a caption file such as SRT to the video platform.
- Enable captions in the video embed code.
- Use a third-party caption service to add captions to the video.
Properly captioned videos are essential for deaf and hearing-impaired readers. All viewers can benefit from captions by reading along as they watch.
Wrap the Video in a Figure Element
For better semantics and accessibility, wrap the iframe video embed in HTML figure tags:
<figure> <iframe...></iframe> <figcaption>Add video caption here</figcaption> </figure>
The figcaption element allows you to add a caption or description for the video. This improves comprehension for vision impaired users relying on screen readers.
Optimize the Video for Mobile
With increasing mobile usage, making sure your embedded videos function well on mobile devices is crucial. Here are some tips for mobile optimization:
- Use muted autoplay to begin videos automatically on mobile.
- Set videos to play inline on mobile instead of full screen.
- Use lower video resolutions like 480p for smoother mobile playback.
- Compress videos to reduce file size and required bandwidth.
Testing your embedded videos on mobile screens first is highly recommended. Ensure videos play smoothly without choppiness or other issues.
Provide a Hyperlinked Thumbnail
Lead into your embedded video by including a clickable thumbnail image that hyperlinks to the video URL. This creates a clear call-to-action for the user to play the video. For example:
<a href="https://www.youtube.com/embed/12345"> <img src="thumbnail.jpg" alt="Watch Video"> </a>
Use relevant text like “Watch Video” as the image alt attribute for accessibility.
Include a Transcript
Adding a text transcript aids comprehension and SEO. Include a transcript below or beside the video highlighting the main points covered. Transcribe the speech exactly, timestamping if helpful. You can embed the transcript in a collapsed box that expands on click so it’s optional for users to view.
Make the Video Easy to Find
If you have multiple videos embedded in one article, consider adding an anchor link table of contents pointing users to each video section. Or use in-page links allowing users to easily jump between video segments. Proper headings, spacing, and sizing also help users scan and find videos quickly.
Test Embedded Videos Thoroughly
Flawless functionality is key for embedded videos. Be sure to extensively test videos prior to publishing your article. Check that:
- Videos play smoothly without issues or errors.
- Videos appear correctly sized across devices.
- Captions display accurately.
- Controls function properly.
- Links to the videos work.
Fix any problems to ensure a seamless viewing experience. Videos that fail or have issues reflect poorly on your content.
Learn From Video Metrics
Use video analytics to identify viewing patterns. This provides insight to improve your future video embedding. Metrics to analyze include:
- Video play rate – % of readers who clicked to play the video.
- Average percentage viewed – how much of the video viewers watched on average.
- Top drop-off points – sections where viewers stopped watching.
- Replay rate – how often the video was replayed.
Studying metrics helps you hone your video content over time. Create videos that attract more clicks and hold viewer attention.
Follow Accessibility Best Practices
Strive to make embedded videos accessible for all your readers by following these practices:
- Transcribe or caption videos to support those with hearing impairments.
- Use concise and descriptive alt text for video thumbnails.
- Provide play/pause buttons and volume controls.
- Avoid flashing imagery that could trigger seizures.
- Support keyboard-only navigation access to video controls.
Reviewing Web Content Accessibility Guidelines (WCAG) for multimedia content can help you ensure your videos are inclusive and accessible.
Optimizing Video SEO
Search engines cannot directly index the content inside your videos. However, you can optimize your video SEO in other ways:
- Include the video title, descriptions and keywords on the page containing the video.
- Transcribe the video and include the transcript on the page.
- Link relevant text on the page to specific time codes in the video.
- Have a knowledgeable narrator explain the video content thoroughly.
Proper page optimization gives search engines more cues about your embedded video content.
Conclusion
When embedded effectively, videos bring articles to life. Follow these tips to seamlessly integrate videos into your content:
- Choose engaging, relevant videos.
- Optimize videos for embedding.
- Position videos thoughtfully within your article structure.
- Write useful captions, transcripts and descriptions.
- Ensure videos function properly on mobile devices.
- Analyze video metrics to improve over time.
Well-executed video embedding grabs reader attention, boosts comprehension, and enhances content quality.