Skip to content

Instantly share code, notes, and snippets.

@gormus

gormus/jsbin.imoDamEd.css

Created November 27, 2013 08:22
Show Gist options
  • Save gormus/7672369 to your computer and use it in GitHub Desktop.
Save gormus/7672369 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.imoDamEd.css
@import url("http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600|Open+Sans+Condensed:300,700");
img {
border: 0;
max-width: 100%;
height: auto;
}
.group-header {
position: relative;
z-index: 1;
float: left;
max-height: 380px;
overflow: hidden;
}
.field-name-field-video-thumbnail {
border: 10px solid #d2d2d2;
position: relative;
z-index: 20;
}
.field-name-field-video-thumbnail img {
display: block;
}
.field-name-field-thumbnail-headline {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 21;
background: transparent url("http://test-headstrongnation.gotpantheon.com/sites/all/themes/custom/hsn/images/play-button-small.png") no-repeat center;
cursor: pointer;
}
.field-name-field-thumbnail-headline:hover {
background-color: rgba(255,255,255,0.1);
}
.field-name-field-thumbnail-headline p {
margin: 0;
font-family: 'Open Sans Condensed',sans-serif;
font-size: 45px;
font-weight: bold;
text-transform: uppercase;
color: #ffffff;
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
}
.field-name-field-youtube-field {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.field-name-field-youtube-field iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 0;
}
Raw
jsbin.imoDamEd.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<script src="//www.youtube.com/iframe_api"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
</head>
<body>
<div class="group-header">
<div class="field field-name-field-video-thumbnail field-type-image field-label-hidden">
<div class="field-items">
<div class="field-item even">
<img typeof="foaf:Image" src="http://test-headstrongnation.gotpantheon.com/sites/default/files/styles/640_360_thumb/public/video-thumbnail/aboutushires.jpg?itok=GQwZOVuD" alt="" />
</div>
</div>
</div>
<div class="field field-name-field-thumbnail-headline field-type-text field-label-hidden">
<div class="field-items">
<div class="field-item even">
<p>The Story of Headstrong</p>
</div>
</div>
</div>
<div class="field field-name-field-youtube-field field-type-youtube field-label-hidden">
<div class="field-items">
<div class="field-item even">
<iframe class="iframe-class" id="ytplayer" width="640"
height="360" src="http://www.youtube.com/embed/mwAbqFgJPv8?enablejsapi=1&autoplay=0& disablekb=1&modestbranding=1&autohide=1&rel=0&theme=light&showinfo=0&origin=http://jsbin.com"
frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
jsbin.imoDamEd.js
var player,
origin = location.protocol + '//' + location.hostname;
function onYouTubeIframeAPIReady() {
player = new YT.Player('ytplayer', {});
}
$(document).ready(function() {
$(".field-name-field-thumbnail-headline").click(function() {
$(".field-name-field-youtube-field").css("zIndex", 99);
player.playVideo();
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment