Back to Blog

How to Embed Code Player in Your Web Pages

Learn how to embed RecDev code screencasts directly into your web pages using a simple iframe.

RecDev Team
3 min read
embedcode-playerscreencasttutorial

How to Embed Code Player in Your Web Pages

RecDev makes it easy to embed your code screencasts directly into your web pages, documentation, or blog posts. This allows your audience to watch your coding sessions without leaving your site.

Simple Embed Code

To embed any code screencast, simply use this iframe code and replace [VIDEOID] with your actual video ID:

html

How to Get Your Video ID

  1. Navigate to your video on RecDev
  2. Copy the video ID from the URL (e.g., if the URL is https://www.recdev.io/watch?v=abc123, your video ID is abc123)
  3. Replace [VIDEOID] in the embed code with your actual video ID

Customization Options

Responsive Design

For responsive embeds that work on all devices, wrap the iframe in a container:

html

Different Sizes

You can adjust the width and height attributes to fit your layout:

  • Small: width="640" height="360"
  • Medium: width="800" height="450"
  • Large: width="990" height="500" (default)
  • Full Width: Use the responsive container above

Use Cases

  • Documentation: Embed coding tutorials directly in your docs
  • Blog Posts: Show code walkthroughs in your articles
  • Portfolio: Display your coding skills and projects
  • Educational Content: Create interactive learning experiences
  • Team Sharing: Share coding sessions with your team

Features

The embedded player includes all the features of the full RecDev player:

  • Playback Controls: Play, pause, seek, and adjust playback speed
  • Code Highlighting: Syntax highlighting for multiple languages
  • Timeline Navigation: Jump to specific moments in your coding session
  • Fullscreen Mode: Expand to fullscreen for better viewing
  • Mobile Responsive: Works seamlessly on all devices

Security

The embed code includes proper security attributes:

  • referrerpolicy="strict-origin-when-cross-origin" for privacy
  • allow attribute controls which browser features are permitted
  • No external scripts or tracking

Getting Started

  1. Record your code screencast using RecDev
  2. Get your video ID from the video URL
  3. Copy the embed code and replace [VIDEOID]
  4. Paste the code into your HTML page
  5. Your code screencast is now embedded!

Start sharing your coding knowledge with the world by embedding your RecDev screencasts today.

How to Embed Code Player in Your Web Pages | RecDev Blog