Skip to content

Instantly share code, notes, and snippets.

@jramsahai

jramsahai/swap_player_visibility.html

Last active September 23, 2015 14:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jramsahai/a6562477d1fe0afe1705 to your computer and use it in GitHub Desktop.
Save jramsahai/a6562477d1fe0afe1705 to your computer and use it in GitHub Desktop.
Download ZIP
Code needed to swap visibility of players when the screen shrinks enough. This was used on the tour page for video 3.
Raw
swap_player_visibility.html
<!--
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 values that you may need to change to work on your page.
-->
<html>
<head>
<style type="text/css">
/* Desktop CSS */
/* Change the min-width to reflect the width of your player + the necessary spacing for the CTA */
@media (min-width: 972px) {
#video-2 .vidyard_player {
/*show the player WITH the CTA*/
display: block;
}
#video-1 .vidyard_player {
/*hide the player WITHOUT the CTA*/
display: none;
}
.cta {
position: relative;
width: 100% !important;
height: 0;
/*The value of 56.25% MUST match the aspect ratio of your player*/
/*56.25% represents 16:9*/
padding: 56.25% 0 0 0;
}
.outerContainer {
/*The max-height should be the most the height of the player will be*/
max-height: 360px;
}
.vidyard_player {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*The max-width is the widest your player will be WITH the CTA*/
max-width: 971px;
/*The max-height should be the most the height of the player will be*/
max-height: 360px;
}
.vidyard_player > span {
width: 100% !important;
height: 100% !important;
margin: 0 auto !important;
}
}
/* Mobile CSS */
/* Change the max-width to reflect the width of your player + the necessary spacing for the CTA */
@media (max-width: 972px) {
#video-2 .vidyard_player {
/*hide the player WITH the cta*/
display: none;
}
#video-1 .vidyard_player {
/*show the player WITHOUT the cta*/
display: block;
}
.nocta {
position: relative;
width: 100% !important;
height: 0;
/*The value of 56.25% MUST match the aspect ratio of your player*/
/*56.25% represents 16:9*/
padding: 56.25% 0 0 0;
}
.outerContainer {
/*The max-height should be the most the height of the player will be*/
max-height: 360px;
}
.vidyard_player {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*The max-width is the widest your player will be WITHOUT the CTA*/
max-width: 640px;
/*The max-height should be the most the height of the player will be*/
max-height: 360px;
}
.vidyard_player > span {
width: 100% !important;
height: 100% !important;
margin: 0 auto !important;
}
}
</style>
</head>
<body>
<div>
<div class="outerContainer">
<div id='video-1' class="nocta">
<!-- This player DOES NOT have a CTA -->
<script type='text/javascript' id='vidyard_embed_code_pDyPBENuQEoFZjipGtLDHg' src='//play.vidyard.com/pDyPBENuQEoFZjipGtLDHg.js?v=3.1.1&type=inline&html5_first=1'></script>
</div>
</div>
<div class="outerContainer">
<div id='video-2' class="cta">
<!-- This player DOES have a CTA -->
<script type='text/javascript' id='vidyard_embed_code_fV2vQOCvC_DHRZA5Bh2OTQ' src='//play.vidyard.com/fV2vQOCvC_DHRZA5Bh2OTQ.js?v=3.1.1&type=inline&html5_first=1'></script>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment