Let Others Publish Your Video on Their Domains

One of the reasons for hosting your own videos is that you have full control.

When you host your own videos, you may want to let others publish the same videos on their web pages. It might be as a service, for publicity, out of generosity, or some other reason.

There are several ways to create code for website owners to publish your videos:

Using the HTML5 video tag.
Using the HTML iframe tag.
Using pure JavaScript delivered with PHP.

All of the methods work with both WordPress and non-WordPress websites (WordPress caveat in next paragraph).

A factor to consider when publishing in WordPress for all but the last method (JavaScript delivered with PHP) is the WordPress 5+ Gutenberg editor. The editor requires a learned skill to insert HTML code into a post, page, or widget. Therefore, if you use any but the JavaScript with PHP method, detailed instructions may be required for how to publish your HTML code with Gutenberg.

For the JavaScript method, the Local Syndication plugin is used with a shortcode. The shortcode's URL is the same URL as the JavaScript has for non-WordPress sites. Here is the shortcode:

[syndicate_local url="URL_FROM_JAVASCRIPT" script="yes"]

Be all that as it may, each individual method has its own factors to consider.

The HTML5 `video` Tag Method

The HTML5 video tag is used to deliver videos on your own web page. Providing the same code you are using for others to put on their pages can be a good idea, except for one thing:

Their web pages must be HTML5.

Because there are a number of websites using non-HTML5 versions, the video tag is not advisable for code distributed to websites which might be using an HTML version less than 5.0.

The HTML `iframe` Tag Method

This can be a good choice. Probably every browser in use on the internet can render the iframe tag.

With the iframe tag, your video can play even on websites that use HTML versions earlier than 5.0. The content in an iframe is independent from the content of the rest of the web page.

To employ the iframe tag, you'll need to create a special HTML5 web page with your video tag being its only web page content.

Here is an example.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video</title>
<style>
html, body { font-size:100%; margin:0; }
</style>
<!--
See 
https://www.willmaster.com/library/web-content-prep/videos-from-your-website.php
to construct video tag.
-->
</head>
<body>
<video style="width:100%; height:auto;" controls>
<source src="https://example.com/videos/video.mp4" type="video/mp4">
</video>
</body>
</html>

Replace https://example.com/videos/video.mp4 with the URL of your video.

When you have that page on your server, make a note of its URL and create an iframe tag for your site visitors to copy.

This is an example iframe tag.

<iframe 
   src="https://example.com/video.html" 
   style="width:600px; height:315px;" 
   frameborder="0">
</iframe>

Replace https://example.com/video.html with the URL of the page you created in the previous step.

Test the iframe tag you created by putting it on a temporary web page at a different domain or, if you don't have another domain to test with, do this: Save the temporary web page on your hard drive and drag it into your browser's address bar. It should load and make your video available on the page.

When the iframe has passed your test, make the iframe code available to site visitors or owners — perhaps with detailed instructions, especially if they use WordPress.

A separate web page needs to be made for each video you wish to make available in this way. Then an iframe tag to load that separate web page.

The JavaScript Delivered With PHP Method

This method is functionally similar to the above except it's delivered via JavaScript and, importantly, the PHP script automatically generates both the iframe tag and the HTML5 video tag content for the iframe.

A PHP script is uploaded to your domain server.

After that, a JavaScript tag is made available for each video.

The method works on both WordPress and non‑WordPress sites, on web pages that use whatever version of HTML.

Here is the PHP script. No customization required.

<?php
/*
Deliver Video
Version 1.0
December 18, 2018
Will Bontrager Software LLC
https://www.willmaster.com/
*/

if( empty($_GET['v']) ) { SendText('Inappropriate access.'); }
TrimAndStripSlashes($_GET);
if( isset($_GET['do']) ) { DeliverIframeTag(); }
else { DeliverPageContent(); }

function DeliverIframeTag()
{
    header('Content-type: text/javascript');
    $params = array();
    $params[] = "v={$_GET['v']}";
    if( isset($_GET['p']) and $_GET['p'] ) { $params[] = "p={$_GET['p']}"; }
    $parameters = implode('&',$params);
    $css = array();
    $css[] = 'overflow:hidden;';
    $css[] = (isset($_GET['w']) and $_GET['w']) ? "width:{$_GET['w']}px;" : 'width:100%;';
    $css[] = (isset($_GET['h']) and $_GET['h']) ? "height:{$_GET['h']}px;" : 'height:auto;';
    if( isset($_GET['css']) and $_GET['css'] ) { $css[] = $_GET['css']; }
    $url = ((isset($_SERVER['HTTPS']) and $_SERVER['HTTPS'])?'https://':'http://')."{$_SERVER['HTTP_HOST']}{$_SERVER['PHP_SELF']}";
    $style = "style='".implode(' ',$css)."'";
    $iframe = <<<IFRAME
<iframe src='$url?$parameters' $style frameborder='0' scrolling='no'></iframe>
IFRAME;
    SendText($iframe);
} # function DeliverIframeTag()

function DeliverPageContent()
{
    header('Content-type: text/html');
    $ta = explode('.',$_GET['v']);
    $extension = array_pop($ta);
    $ta = $videotag = array();
    if( isset($_GET['p']) and $_GET['p'] ) { $ta[] = "poster='{$_GET['p']}'"; }
    $ta[] = 'style="width:100%; height:auto;"';
    $videotag[] = '<video ' . implode(' ',$ta) . ' controls>';
    $videotag[] = "<source src='{$_GET['v']}' type='video/$extension'>";
    $videotag[] = '</video>';
    $tag = implode(PHP_EOL,$videotag);
    $page=<<<PAGE
<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video</title>
<style>html,body{font-size:100%;font-family:sans-serif;margin:0;}</style>
</head><body>$tag</body></html>
PAGE;
    echo $page;
    exit;
} # function DeliverPageContent()

function TrimAndStripSlashes(&$arr) { array_walk_recursive($arr, 'TrimAndStripSlashesFromArrayItems'); }
function TrimAndStripSlashesFromArrayItems(&$item, $key) { $item = trim(stripslashes($item)); }
function SendText($s)
{
   foreach( preg_split('/[\r\n]+/',trim($s)) as $line )
   {
      $js = str_replace("\\","\\\\",$line);
      $js = str_replace("'","\\'",$js);
      $js = str_replace("<!--","<'+'!--",$js);
      $js = str_replace("-->","--'+'>",$js);
      $js = preg_replace('/(scr)(ipt)/i','$1\'+\'$2',$js);
      echo "document.writeln('$js');\n";
   }
   exit;
}
?>

Upload the PHP script as delivervideo.php or other .php file name that you prefer. Make a note of its URL.

(For the following examples, we'll assume https://example.com/delivervideo.php is the URL.)

For every video you make available for publishing on other websites, a line of JavaScript (for non-WordPress sites) or a shortcode (for WordPress sites) needs to be composed for them to copy.

Here is an example line of JavaScript for non-WordPress sites:

<script src="https://example.com/delivervideo.php?do=1&w=600&h=315&v=https://example.com/videos/video.mp4"></script>

And here is an example shortcode (for use with the WordPress Local Syndication plugin):

[syndicate_local url="https://example.com/delivervideo.php?do=1&w=600&h=315&v=https://example.com/videos/video.mp4" script="yes"]

Note that the URL value for both the JavaScript scr attribute and the shortcode url attribute are identical.

There are four places to customize for the above JavaScript and shortcode scr and url attribute values.

Replace https://example.com/delivervideo.php with the URL of the PHP script you installed further above.
Replace 600 with the width of the video.
Replace 315 with the height of the video.
Replace https://example.com/videos/video.mp4 with the URL of the video.

Make both the JavaScript and shortcode available to your website owners so they can put your video on their web pages, whether or not they use WordPress. (WordPress users will also need a link to the Local Syndication plugin.)

Optional Information That May Be Provided

The above four items (URL to PHP script, width, height, and URL to video) are all required.

Two additional items of information are optional. If provided, the information is appended to the URL sent to the delivervideo.php script via the JavaScript or the shortcode.

The URL of a poster image.

A poster image is an image to represent the video before the video plays. It is specified with &p= followed by the poster image URL. Example:
```
&p=https://example.com/images/picture.jpg
```
To specify a poster image, replace https://example.com/images/picture.jpg with the URL of the image to use.
CSS to style the video tag that delivervideo.php automatically creates.

The delivervideo.php PHP script automatically creates a video tag for your video. The video tag can be styled. Specify the CSS formatted the way you would format a style tag value — except every space needs to be replaced with a + character and no # character may be used (use color name or rgb() for color specifications).

As an example, a CSS style value border:6px solid rgb(0,0,250); with + replacing spaces becomes border:6px+solid+rgb(0,0,250);.

In the JavaScript and the shortcode, the CSS is specified with &css= followed by the CSS. Example:
```
&css=border:6px+solid+rgb(0,0,250);+border-radius:6px;
```
To specify your CSS, replace border:6px+solid+rgb(0,0,250);+border-radius:6px; with the CSS to use.

Here are the earlier JavaScript and shortcode examples but with the two additional optional items of information appended to the src and url values.

<script src="https://example.com/delivervideo.php?do=1&w=600&h=315&v=https://example.com/videos/video.mp4&p=https://example.com/images/picture.jpg&css=border:6px+solid+rgb(0,0,250);+border-radius:6px;"></script>

[syndicate_local url="https://example.com/delivervideo.php?do=1&w=600&h=315&v=https://example.com/videos/video.mp4&p=https://example.com/images/picture.jpg&css=border:6px+solid+rgb(0,0,250);+border-radius:6px;" script="yes"]

Illustrating How it Works

To illustrate how it works, here is JavaScript and shortcode to put a Willmaster video on your web page. (The shortcode requires Local Syndication plugin.)

<script src="https://www.willmaster.com/external/video/delivervideo.php?do=1&w=500&h=263&v=https://www.willmaster.com/videos/TechTip935Video.mp4&p=https://www.willmaster.com/videos/TechTip935Video.jpg&css=border:6px+solid+rgb(0,0,250);+border-radius:6px;"></script>

[syndicate_local url="https://www.willmaster.com/external/video/delivervideo.php?do=1&w=500&h=263&v=https://www.willmaster.com/videos/TechTip935Video.mp4&p=https://www.willmaster.com/videos/TechTip935Video.jpg&css=border:6px+solid+rgb(0,0,250);+border-radius:6px;" script="yes"]

Put either the JavaScript or the shortcode on your page and you have this 72‑second video about automatic copyright updating on web pages.

You now have ways to provide code to website owners so they can publish your HTML5 videos on their websites. It works on both WordPress and non‑WordPress sites.

Your Videos Published On Your Website lists other articles related to publishing videos with the video tag.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.