Commit 702a9f2b

VID-8 Add embed code snippet to player page

Also adds some basic styling to the page. Scripts and CSS will be broken out into seperate files later

Commit 702a9f2b.

Authored 2019-03-30T10:23:29.000+00:00 by B Tasker in project Websites / videos.bentasker.co.uk

+102 lines -14 lines

Changes

diff --git a/Player.html b/Player.html
--- a/Player.html
+++ b/Player.html

# @@ -1,24 +1,112 @@

# <html>

# <head>

# -<script type="text/javascript" src="https://videos.bentasker.co.uk/resources/embed/embed.js"></script>

# -</head>

# -<body>

# -

# -<center>

# -<div id="maincontainer" style="width: 50%; height: 50%">

# + <script type="text/javascript" src="https://videos.bentasker.co.uk/resources/embed/embed.js"></script>

# + <style type="text/css">

# + #videobar {

# + background: white;

# + border-bottom: 1px solid #888;

# + margin-bottom: 5px;

# + overflow: hidden;

# + text-overflow: ellipsis;

# + margin: auto;

# + font-size: 0.8em;

# + text-align: left;

# + }

# -<script type="text/javascript">

# -// Get the video path from the request URL

# -const urlParams = new URLSearchParams(window.location.search);

# -vidurl = urlParams.get('url');

# + #vbartext {

# + background: #C5C5C5;

# + padding: 10px;

# + border-bottom: 1px solid #888;

# + color: #000;

# + font-weight: bold;

# + }

# + #vbartext a {

# + color: #000;

# + text-decoration: none;

# + }

# +

# + #embedsect {

# + padding: 9px 12px;

# + white-space: pre;

# + word-break: normal;

# + border: 1px solid #cccccc;

# + -moz-border-radius: 3px 3px 3px 3px;

# + border-radius: 3px 3px 3px 3px;

# + margin: 9px 0;

# + border-width: 1px;

# + max-height: 30em;

# + overflow: auto;

# + text-align: left;

# + }

# +

# + </style>

# -embedBensPlayer(vidurl);

# -</script>

# + <script type="text/javascript">

# + function toggleembed(){

# + var d = document.getElementById('embedsect');

# + if (d.style.display == 'none'){

# + d.style.display = 'block';

# + }else{

# + d.style.display = 'none';

# + }

# +

# + // From https://stackoverflow.com/a/1173319

# + function selectText(containerid) {

# + if (document.selection) { // IE

# + var range = document.body.createTextRange();

# + range.moveToElementText(document.getElementById(containerid));

# + range.select();

# + } else if (window.getSelection) {

# + var range = document.createRange();

# + range.selectNode(document.getElementById(containerid));

# + window.getSelection().removeAllRanges();

# + window.getSelection().addRange(range);

# + }

# +

# + // Get the video path from the request URL

# + const urlParams = new URLSearchParams(window.location.search);

# + vidurl = urlParams.get('url');

# +

# + document.addEventListener("DOMContentLoaded", function(event) {

# + d = document.getElementById('embedsecturl');

# + // It's basically userinput, so escape it

# + t = document.createTextNode(vidurl);

# + d.innerHTML = '';

# + d.appendChild(t);

# +

# + var t2 = t.cloneNode(true);

# + document.getElementById('title').appendChild(t2);

# + });

# +

# + </script>

# +</head>

# +<body>

# -</div>

# -</center>

# + <center>

# + <h1 id="title"></h1>

# + <div id="maincontainer" style="width: 50%; height: 50%">

# + <script type="text/javascript">embedBensPlayer(vidurl);</script>

# + <div id="videobar">

# + <div id="vbartext">

# + <a href="#" onclick="return toggleembed();">Embed Video</a>

# + <div class="clr"></div>

# + </div>

# +

# + <div id="embedsect" style="display: none" onclick="selectText('embedsect')"><div style="width: 60%">

# +   <script type="text/javascript" src="https://videos.bentasker.co.uk/resources/embed/embed.js"></script>

# +   <script type="text/javascript">embedBensPlayer('<span id='embedsecturl'></span>');</script>>

# + </div></div>

# + </div>

# + </center>

# </body>

# </html>

Websites / videos.bentasker.co.uk: 702a9f2b

VID-8 Add embed code snippet to player page

Changes