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 / 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 / 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 / dynamically_resize_player_using_css.html
Last active January 14, 2019 16:20
If you're looking for a way to dynamically resize the Vidyard inline JavaScript player, you'll find an example of one way to do it below.
<!--
Refer to this article for more information:
http://knowledge.vidyard.com/Core_Features/Publish_your_players/011_Publish_your_player/014_Dynamically_resize_the_inline_player
-->
<html>
<head>
<style type="text/css">
.innerContainer {
position: relative;
display: block;
@jramsahai
jramsahai / visualforce_example.html
Created December 10, 2018 20:54
<apex:page sidebar="false" showHeader="false" standardStylesheets="false" cache="false" applyHtmlTag="false">
<html>
<head>
<style type="text/css">
.container {
max-width: 960px;
margin: 0 auto;
}
.controls{
width:75px;
@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 / 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 / get_visitor_id.js
Created July 27, 2017 13:28
Using the Vidyard player API to grab the Vidyard visitor ID for a given viewer.
var player = new Vidyard.player(uuid);
var callback = function() {
if (!player.metadata.visitorID) { return; }
// We have a visitor ID, do things!
console.log(player.metadata.visitorID);
// If we only want this callback to execute exactly once:
callback = function() {};
};
player.on('ready', callback);
@jramsahai
jramsahai / button_selector.html
Created March 23, 2017 16:13
Button Selector
<script src="https://code.jquery.com/jquery-1.12.4.js"></script><script>
$(function() {
$("#feedback_yes").click(function() {
$("#feedback_buttons").hide();
$("#feedback_text").hide();
$("#feedback_response").show();
$("#feedback_response").html("We're happy to help!");
setTimeout(function() { API.closeCta({ disablePlay: true }); }, 3000);
});
@jramsahai
jramsahai / cyoa_annotation.html
Created March 23, 2017 16:12
Choose Your Own Adventure
<style type="text/css">.related-videos {
position: relative;
float: left;
display: block;
overflow: auto;
padding: 20px;
padding-bottom: 0;
text-align: center;
color: #fff;
}
@jramsahai
jramsahai / dropdown_annotation.html
Created March 23, 2017 16:10
Dropdown Annotation
<style type="text/css">.navbar {
margin: 5px;
}
ul {
position: relative;
display: block;
list-style-type: none;
margin: 0;
padding: 0;