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 / push_to_ga.html
Last active September 13, 2017 17:50
Using Google Analytics Event tracking and the Vidyard player API, we can push player events into Google Analytics to allow us to capture some useful viewership data along side the standard web traffic reporting.
<html>
<head>
<!-- Vidyard player API script -->
<script src="//play.vidyard.com/v0/api.js"></script>
<!-- Google Analytics tracking code -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@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 / load_multiple_inline_players_ondemand.html
Last active March 17, 2022 17:05
A slight modification to this: https://gist.github.com/jramsahai/040be6747bf60f207337. This one will allow you to load multiple players in different locations on the page on demand.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
// Generate and return embed code for a given player UUID
function getEmbedCode(uuid) {
var script=document.createElement('script');
script.type='text/javascript';
script.id='vidyard_embed_code_'+uuid;
script.src='//play.vidyard.com/'+uuid+'.js?v=3.1.1&type=inline&autoplay=0';
@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 / jump_to_time.html
Last active August 30, 2017 13:42
I'm often asked if there's a way to jump to a specific time in a video. While the functionality doesn't exist in the player itself (because of the possibility of having multiple players on the same page) it's pretty easy to do for one player on a page using our Player API. Here's an example of how it can be done.
<html>
<head>
</head>
<body>
<!-- Vidyard inline embed code -->
<script type="text/javascript" id="vidyard_embed_code_hedIuHeKRKySm1qx9xXV7w" src="//play.vidyard.com/hedIuHeKRKySm1qx9xXV7w.js?v=3.1&type=inline"></script>
<script src="//play.vidyard.com/v0/api.js"></script>
<script type="text/javascript">
// Parsing the query string
function get_parameter_by_name(name) {
@jramsahai
jramsahai / play_on_visible.html
Last active March 19, 2020 15:37
Autoplaying a video when it enters the browser viewport is all the rage these days. I decided to take a shot at it with a fairly simple example of the base use case with the Vidyard player. There's some tweaking that will be required to handle certain situations (What if there are two players in view? What if the user pauses a video?) but it wor…
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function isElementInViewport (el) {
//special bonus for those using jQuery
if (typeof jQuery === "function" && el instanceof jQuery) {
el = el[0];
}
@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 / 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 / personalization.html
Last active September 29, 2016 13:45
[DEPRECATED] This is no longer necessary as the javascript player embed will now read the custom ID.
<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 / 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 */
}