Skip to content

Instantly share code, notes, and snippets.

View jramsahai's full-sized avatar

Ji Ramsahai jramsahai

2 followers · 1 following
View GitHub Profile
@jramsahai
jramsahai / play_link.html
Last active August 29, 2015 14:01
Sometimes you might want to create a play button for the Vidyard player outside of the player itself. Here's one way to do it using a hyperlink with the player API.
@jramsahai
jramsahai / pause_between_chapters.html
Created June 26, 2014 18:44
Pausing the player after each chapter allows you to take some kind of alternate action with the viewer in the middle of the player. Use the opportunity to hit them with a CTA of some kind (additional info, form, etc.) then start them right back on the video from where they left off. I used the player API and a new play event.
<html>
<head>
<script src="//play.vidyard.com/v0/api.js"></script>
</head>
<body>
<script type="text/javascript" id="vidyard_embed_code_hsEU_eBjTeQ1Wk1NxIF99w" src="//play.vidyard.com/hsEU_eBjTeQ1Wk1NxIF99w.js?v=3.1&type=inline"></script>
<script type="text/javascript">
var video = new Vidyard.player("hsEU_eBjTeQ1Wk1NxIF99w");
var paused = 0;
video.on("play", function() {
@jramsahai
jramsahai / load_inline_player_on_demand.html
Created September 30, 2014 14:35
Depending on the number of players you are planning on displaying on your page, it might be a good idea to avoid loading every single player when the page loads. Creating all of those Flash objects at once can really slow things down. Here's a suggestion on how you can dynamically load an inline player. This example also shows how to change the …
<htmL>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
function getEmbedCode(uuid) {
var script=document.createElement('script');
script.type='text/javascript';
script.id='vidyard_embed_code_'+uuid;
script.src='https://play.vidyard.com/'+uuid+'.js?v=3.1&type=inline';
return script;
@jramsahai
jramsahai / GET_on_play.html
Created November 17, 2014 15:43
Some web analytics platforms provide you with a unique URL to send a GET request to when an event on the page executes. As an example, you can send a GET request to a tracking pixel URL when the player starts with the following code. This uses the player API.
<html>
<head>
<script src="//play.vidyard.com/v0/api.js"></script>
<script>
function httpGet(theUrl) {
var xmlHttp = null;
xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", theUrl, false );
xmlHttp.send( null );
return xmlHttp.responseText;
@jramsahai
jramsahai / eventlistener.js
Created September 12, 2015 22:54
Based this off the script we use to fire player completion milestones into Google Analytics events. Really easy way to set up the player API to listen for events from all players on a page.
/*****
Purpose:
This code detects all inline embedded Vidyard players on a page and sets up the necessary event
listeners allowing you to execute code on the standard Vidyard player API events such as play,
pause, ready, etc. The script will also calculate when 0, 25, 50, 75 and 99 percent of a chapter
has been viewed and allow you to execute code at these points.
Usage:
This script should be included below the Vidyard API, web analytics tracking code (if applicable) and
all Vidyard embedded players. You can use the following line example to include it:
@jramsahai
jramsahai / swap_player_visibility.html
Last active September 23, 2015 14:51
Code needed to swap visibility of players when the screen shrinks enough. This was used on the tour page for video 3.
<!--
The code below is a page with two embedded players. The player in the div "video-1" DOES NOT have a popout CTA on it. The player in the div "video-2" DOES have a CTA on it.
We have used media queries to separate the CSS into two branches. They have been labeled "Desktop CSS" and "Mobile CSS" in the comments. You can see that the split occurs when the screen width dips below 972px.
This is calculated by taking the maximum width of your player and adding enough pixels to cover the width of your CTA. By default this is 331px, which accounts for 300px plus a 31px border. In our example, the player is 640px so 640+331=971px.
*** You will likely need to change the value of 972px in BOTH media queries to accommodate the dimensions and layout of your page. Again, this should be the maximum width of your player + the width of your CTA ***
Your page must allow sufficient space in the iframe for both the player and the popout CTA when the CTA enabled player is visible.
I have done my best to comment the relevant
@jramsahai
jramsahai / personalized_with_generic_player.html
Last active December 22, 2015 21:40
Modified version of https://gist.github.com/jramsahai/a1cf80fdf0e9116b79da where a secondary generic player is shown instead of the personalized player if no custom_id is given.
<html>
<head>
<style type="text/css">
#innerContainer {
position: relative;
display: block;
width: 100% !important;
height: 0;
padding: 56.25% 0 0 0; /* This should reflect your video aspect ratio */
}
@jramsahai
jramsahai / sample_adventure_final_cta.html
Created December 23, 2015 14:05
Sample code for a choose-your-own-adventure event.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Choose your next video!</h1>
<div>
<a href="http://play.vidyard.com/EXAMPLE.html">
The first video
</a>
@jramsahai
jramsahai / launch_lightbox_from_hyperlink.html
Last active December 25, 2015 07:29
I was asked to provide the code to launch the lightbox from a hyperlink. There was some interesting conversation on http://stackoverflow.com/questions/688196/how-to-use-a-link-to-call-javascript so I went with this.
@jramsahai
jramsahai / embedded_form_in_CTA.html
Last active December 26, 2015 03:59
When embedding forms into a pop-out or final call to action (CTA), we have a couple options. Sure, it's easy to dump the form code into the source editor when you create the CTA, but consider the situation where you have the same form used in multiple players. The amount of work needed to make changes to the form could be trouble. Instead, what …
<html>
<head>
</head>
<body>
<!-- By default, the pop-out CTA is 300px wide. You might want to set the div width and height to allow for a border -->
<div style="width:260px; height:250px;">
<!-- Sample HTML form. Can be replaced with a form from your favourite MAP (e.g. Hubspot, Silver Pop, etc.) -->
<form>
<table>
<tr>