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 / timed_fullscreen_event.html
Last active February 5, 2016 20:41
With the new Vidyard Events functionality, we're starting to see some fun, new use cases. In this example, we display a full screen event for a few seconds, then automatically dismiss it and resume video playback.
<!-- Include this below all other code in your event -->
<script type='text/javascript'>
window.addEventListener("message", function(event) {
var ctaId = window.frameElement.id.split('_')[1];
var playerId = window.frameElement.src.split('/');
playerId = playerId[playerId.length-3];
// only allow from domains that end in allowedDomains
if (!event.origin.match(/vidyard\.(dev|com)$/)) { return; }
if (typeof event.data !== 'string') { return; }
try {
@jramsahai
jramsahai / gtm_vidyard_event_listener.html
Last active June 23, 2016 03:48
We've worked with the Cardinal Path team quite a bit on projects using the Progress Events framework. I was asked to build out a setup into Google Tag Manager based off the instructions found here: http://www.cardinalpath.com/youtube-video-tracking-with-google-tag-manager-v2-and-universal-analytics-a-step-by-step-guide/
<script type='text/javascript' src="//play.vidyard.com/v0/api.js"></script>
<script type='text/javascript' src="//play.vidyard.com/v1/progress-events.js"></script>
<script type='text/javascript'>
VidyardProgressEvents(function (result){
if (result.event==1) {
dataLayer.push({
event: 'vidyard',
eventCategory: 'video',
eventAction: "Play",
eventLabel: result.player.metadata.chapters_attributes[result.chapter].video_attributes.name
@jramsahai
jramsahai / progress_events_v1_sample.html
Last active June 23, 2016 03:50
The Vidyard Progress Events Framework will allow you to execute arbitrary javascript at fixed intervals during the playback of the video. This basic example will write view data to the browser console.
<!--
Include this script below: Google Analytics, Player Embed(s), and Vidyard API
Example Customer Implementations:
VidyardProgressEvents(function (result){console.log(result.event)});
VidyardProgressEvents(function (result){console.log(result.event)}, [1,10,20,30,40,50,60,70,80,90]);
// Returns:
// result.event as integer
// result.chapter as integer
// result.player as a Vidyard player object
-->
@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 / embed_in_eloqua.html
Last active July 19, 2016 18:00
The following JavaScript and HTML is required for embedding on an Eloqua landing page. Note that this is not required for embedding on an Eloqua HTML landing page.
<!--
Replace [UUID] with the UUID of the player you are attemping to embed.
To find the UUID of a player, see http://support.vidyard.com/articles/Public_Support/Find-the-UUID-for-your-player/
-->
<div id="[UUID]">
</div>
@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 / 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 / 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 / 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];
}