Skip to content

Instantly share code, notes, and snippets.

@YokiToki

YokiToki/semantic.html

Created July 13, 2017 11:09
Show Gist options
  • Save YokiToki/555c9391da06382b0b1210bd8c52c0b3 to your computer and use it in GitHub Desktop.
Save YokiToki/555c9391da06382b0b1210bd8c52c0b3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
semantic.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.1.1.js" type="text/javascript"></script>
<script src="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.js" type="text/javascript"></script>
<style type="text/css">
.ui.image {
width: 120px;
}
</style>
<script type='text/javascript'>
$(document).ready(function(){
$('.youtube .header').on('click', function(e) {
e.preventDefault();
var el = $(this);
$('.ui.embed')
.embed({
source: 'youtube',
id: el.data('id'),
placeholder: el.data('placeholder')
});
});
$('#reset').on('click', function(e) {
e.preventDefault();
$('.ui.embed')
.embed('reset');
});
$('#destroy').on('click', function(e) {
e.preventDefault();
$('.ui.embed')
.embed('destroy');
});
});
</script>
</head>
<body>
<div class="ui grid">
<div class="six wide column">
<div class="ui relaxed divided list">
<div class="item youtube">
<img alt="" class="ui image" src="https://i.ytimg.com/vi/1UAIxwYEgm0/hqdefault.jpg">
<div class="content">
<a class="header" data-id="1UAIxwYEgm0" data-placeholder="https://i.ytimg.com/vi/1UAIxwYEgm0/hqdefault.jpg" href="https://www.youtube.com/watch?v=1UAIxwYEgm0">Snoop Dogg - Peaches N Cream ft. Charlie Wilson</a>
</div>
</div>
<div class="item youtube">
<img alt="" class="ui image" src="https://i.ytimg.com/vi/hMCMKYAUptE/hqdefault.jpg">
<div class="content">
<a class="header" data-id="hMCMKYAUptE" data-placeholder="https://i.ytimg.com/vi/hMCMKYAUptE/hqdefault.jpg" href="https://www.youtube.com/watch?v=hMCMKYAUptE">Snoop Dogg - Point Seen Money Gone ft. Jeremih</a>
</div>
</div>
<div class="item youtube">
<img alt="" class="ui image" src="https://i.ytimg.com/vi/MwX1XfgjFok/hqdefault.jpg">
<div class="content">
<a class="header" data-id="MwX1XfgjFok" data-placeholder="https://i.ytimg.com/vi/MwX1XfgjFok/hqdefault.jpg" href="https://www.youtube.com/watch?v=MwX1XfgjFok">Snoop Dogg - Vapors</a>
</div>
</div>
</div>
<button class="ui button basic primary" id="reset">Reset</button>
<button class="ui button basic primary" id="destroy">Destroy</button>
</div>
<div class="ten wide column">
<div class="ui embed"></div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment