oEmbed is an open standard format that enables you to easily embed ScreenPal videos and images on external websites by pasting a URL. WordPress automatically converts this link into HTML, eliminating the need to copy and paste longer embed codes.
Add ScreenPal as an oEmbed Provider
Before you can add ScreenPal embeds to your WordPress pages, you need to add ScreenPal as an oEmbed provider within your theme's functions file. You will only need to do this once.
1. From your WordPress Dashboard, do one of the following:
- If you are using a Classic Theme, go to Appearance > Theme File Editor.
- If you are using a Block Theme, go to Tools > Theme File Editor.
2. From the sidebar on the right, click Theme Functions (functions.php).
3. Add the ScreenPal oEmbed snippet to the functions.php file, on its own line:
function sp_sanitize_css_dimension($value) {
$value = trim((string) $value);
if ($value === '') {
return '';
}
if (preg_match('/^(\d{1,2}|100)%$/', $value, $matches)) {
return $matches[1] . '%';
}
if (preg_match('/^(\d{1,5})(?:px)?$/i', $value, $matches)) {
return $matches[1] . 'px';
}
return '';
}
function sp_is_allowed_oembed_host($host) {
$host = strtolower((string) $host);
if ($host === 'screenpal.com' || preg_match('/\A(?:[a-z0-9-]+\.)+screenpal\.com\z/', $host)) {
return true;
}
if ($host === 'screencasthost.com' || preg_match('/\A(?:[a-z0-9-]+\.)+screencasthost\.com\z/', $host)) {
return true;
}
return false;
}
function sp_oembed_shortcode($atts) {
$atts = shortcode_atts(
[
'url' => '',
'wrap' => '1',
'width' => '100%',
'height' => '',
],
$atts,
'sp_oembed'
);
$url = html_entity_decode(trim($atts['url']));
if (!$url) return '';
$parsed = wp_parse_url($url);
$host = !empty($parsed['host']) ? strtolower($parsed['host']) : '';
$path = isset($parsed['path']) ? $parsed['path'] : '';
if (
sp_is_allowed_oembed_host($host)
&& preg_match('#^/(?:player|watch)/([A-Za-z0-9]+)#i', $path, $matches)
) {
$id = $matches[1];
$params = [];
if (!empty($parsed['query'])) {
parse_str($parsed['query'], $params);
unset($params['width'], $params['height']);
}
$params['embedPreview'] = '1';
if (!isset($params['dcc'])) {
$params['dcc'] = '1';
}
$query = http_build_query($params);
$width = sp_sanitize_css_dimension($atts['width']);
$height = sp_sanitize_css_dimension($atts['height']);
if ($width === '') {
$width = '100%';
}
$style = 'width:' . esc_attr($width) . ';border:0;';
if ($height !== '') {
$style .= 'height:' . esc_attr($height) . ';';
}
$html = '<iframe src="' . esc_url('https://' . $host . '/player/' . rawurlencode($id) . ($query ? '?' . $query : '')) . '" title="ScreenPal video Player" style="' . $style . '" scrolling="no" allow="autoplay; fullscreen *;" allowfullscreen></iframe>';
return $atts['wrap'] === '1' ? '<div class="post-video">' . $html . '</div>' : $html;
}
$html = wp_oembed_get($url);
if (!$html) {
return '';
}
return $atts['wrap'] === '1' ? '<div class="post-video">' . $html . '</div>' : $html;
}
add_shortcode('sp_oembed', 'sp_oembed_shortcode');
Tip: You can simply this snippet to the bottom of the file if you like, just above the closing '?>' tag.
4. Click Update File to save your changes.
Embed a ScreenPal video on your WordPress site
Follow the steps below to get the oEmbed link for the ScreenPal content you want to embed.
1. From your ScreenPal Hosting Library, hover over a video and click Manage.
2. Click the
Share Video tab (

).
3. Click Embed Options to display the Video Embed code options.
4. Select the Player Options and Viewer Actions you would like to use.
5. Select the checkbox next to Use oEmbed URL.
6. Click Copy Code under Code Preview to copy the oEmbed URL to use in WordPress.
7. Using your WordPress page editor, add the following to a text module: [sp_oembed url="{YOUR_VIDEO_URL}"] where {YOUR_VIDEO_URL} is the video URL that you copied in step 6.
For example:
[sp_oembed url="https://screenpal.com/player/c0jrbPVp0Zm?ff=1&ahc=1&dcc=1&tl=1&bg=transparent&share=1&download=1&embed=1&cl=1&width=100%&height=100%"]
8. If you would like to control the width and height of your embedded code, you can do so by adding width and height attributes.
For example:
[sp_oembed url="https://screenpal.com/player/c0jrbPVp0Zm?ff=1&ahc=1&dcc=1&tl=1&bg=transparent&share=1&download=1&embed=1&cl=1&width=100%&height=100%" width=1280px height=720px]