Team:Goettingen/outreach videos

From 2014.igem.org

(Difference between revisions)
m
m
 
(32 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
+
{{:Team:Goettingen/header}}
-
<body>
+
<html>
<html>
-
    <head>
+
<!-- main part -->
-
    </head>
+
<div id="protocolOverview">
-
    <body>
+
<div class="proLP">
-
        <div id="player">
+
<h3>Outreach</h3>
-
        </div>
+
<ul>
-
    </body>
+
        <li><a href="/Team:Goettingen/outreach_overview">Overview</a></li>
-
</html>
+
                <li><a href="/Team:Goettingen/outreach_human_practices">Human Practices</a></li>
-
<script>
+
                <li><a href="/Team:Goettingen/outreach_gallery">Gallery</a></li>
-
/*
+
                <li><a href="/Team:Goettingen/outreach_videos">Videos</a></li>
-
Copyright 2011 : Simone Gianni <simoneg@apache.org>
+
                <li><a href="/Team:Goettingen/outreach_presentation">Presentations</a></li>
 +
                <li><a href="/Team:Goettingen/outreach_newsletter">Paris Bettencourt Newsletters</a></li>
 +
                <li><a href="https://2014.igem.org/Team:Goettingen/outreach_germanproposal">German teams' proposal</a></li>
 +
            </ul>
 +
            </div>
 +
<div class="proRP">
 +
 
 +
                <div id="HP1">
 +
 
 +
                <h2>Videos</h2>
 +
<center>
 +
<video width="640" height="390" controls><source src="https://static.igem.org/mediawiki/2014/5/5a/Goettingen2014-Y2H_Screening.mp4" type="video/mp4">Your browser does not support the video tag.</video><br />
 +
<video width="640" height="390" controls><source src="https://static.igem.org/mediawiki/2014/7/7b/Goettingen2014-PCR.mp4" type="video/mp4">Your browser does not support the video tag.</video><br />
 +
<video width="640" height="390" controls><source src="https://static.igem.org/mediawiki/2014/f/f5/Goettingen2014-Preparation_of_Competent_Cells_from_E._Coli_%28TOP_10%29_-_YouTube.mp4" type="video/mp4">Your browser does not support the video tag.</video><br />
 +
<video width="640" height="390" controls><source src="https://static.igem.org/mediawiki/2014/5/5c/Goettingen2014-E._coli_transformation_-_YouTube.mp4" type="video/mp4">Your browser does not support the video tag.</video><br />
 +
<video width="640" height="390" controls><source src="https://static.igem.org/mediawiki/2014/b/bb/Goettingen2014-Plasmid_Isolation_from_Yeast_-_YouTube.mp4" type="video/mp4">Your browser does not support the video tag.</video><br />
 +
<video width="640" height="390" controls><source src="https://static.igem.org/mediawiki/2014/2/2a/Goettingen2014-New_Robot.mp4" type="video/mp4">Your browser does not support the video tag.</video><br />
 +
<video width="640" height="390" controls><source src="https://static.igem.org/mediawiki/2014/c/c8/Goettingen2014-The_Official_Video.mp4" type="video/mp4">Your browser does not support the video tag.</video><br />
 +
<video width="640" height="390" controls poster="https://static.igem.org/mediawiki/2014/5/5e/Goettingen_Video_TeamCover.png"><source src="https://static.igem.org/mediawiki/2014/a/aa/Goettingen2014-Introduction_of_the_iGEM_team_G%C3%B6ttingen_2014_-_YouTube.mp4" type="video/mp4">Your browser does not support the video tag.</video><br /><br />
 +
</center>
 +
<div><a href="https://2014.igem.org/Team:Goettingen/outreach_gallery" class="button_pre"><b>Previous</b></a>
 +
<a href="https://2014.igem.org/Team:Goettingen/outreach_presentation" class="button_next"><b>Next</b></a></div>
 +
 
 +
                </div>
 +
</div>
 +
<div id="footerbanner"><a href="https://2014.igem.org/Team:Goettingen/team_sponsors"><img src="https://static.igem.org/mediawiki/2014/7/7a/Goettingen_footer_banner.png" /></a></div>
-
Released under The Apache License 2.0
 
-
http://www.apache.org/licenses/LICENSE-2.0
 
-
*/
 
-
(function() {
+
</div>
-
    function createPlayer(jqe, video, options) {
+
</div>
-
        var ifr = $('iframe', jqe);
+
-
        if (ifr.length === 0) {
+
-
            ifr = $('<iframe scrolling="no">');
+
-
            ifr.addClass('player');
+
-
        }
+
-
        var src = 'http://www.youtube.com/embed/' + video.id;
+
-
        if (options.playopts) {
+
-
            src += '?';
+
-
            for (var k in options.playopts) {
+
-
                src+= k + '=' + options.playopts[k] + '&';
+
-
            } 
+
-
            src += '_a=b';
+
-
        }
+
-
        ifr.attr('src', src);
+
-
        jqe.append(ifr); 
+
-
    }
+
-
   
+
-
    function createCarousel(jqe, videos, options) {
+
-
        var car = $('div.carousel', jqe);
+
-
        if (car.length === 0) {
+
-
            car = $('<div>');
+
-
            car.addClass('carousel');
+
-
            jqe.append(car);
+
-
           
+
-
        }
+
-
        $.each(videos, function(i,video) {
+
-
            options.thumbnail(car, video, options);
+
-
        });
+
-
    }
+
-
   
+
-
    function createThumbnail(jqe, video, options) {
+
-
        var imgurl = video.thumbnails[0].url;
+
-
        var img = $('img[src="' + imgurl + '"]');
+
-
        if (img.length !== 0) return;
+
-
        img = $('<img>');   
+
-
        img.addClass('thumbnail');
+
-
        jqe.append(img);
+
-
        img.attr('src', imgurl);
+
-
        img.attr('title', video.title);
+
-
        img.click(function() {
+
-
            options.player(options.maindiv, video, $.extend(true,{},options,{playopts:{autoplay:1}}));
+
-
        });
+
-
    }
+
-
   
+
-
    var defoptions = {
+
-
        autoplay: false,
+
-
        user: null,
+
-
        carousel: createCarousel,
+
-
        player: createPlayer,
+
-
        thumbnail: createThumbnail,
+
-
        loaded: function() {},
+
-
        playopts: {
+
-
            autoplay: 0,
+
-
            egm: 1,
+
-
            autohide: 1,
+
-
            fs: 1,
+
-
            showinfo: 0
+
-
        }
+
-
    };
+
-
   
+
-
   
+
-
    $.fn.extend({
+
-
        youTubeChannel: function(options) {
+
-
            var md = $(this);
+
-
            md.addClass('youtube');
+
-
            md.addClass('youtube-channel');
+
-
            var allopts = $.extend(true, {}, defoptions, options);
+
-
            allopts.maindiv = md;
+
-
            $.get('http://gdata.youtube.com/feeds/users/' + allopts.user + '/uploads?alt=json-in-script&format=5&callback=?', null, function(data) {
+
-
                var feed = data.feed;
+
-
                var videos = [];
+
-
                $.each(feed.entry, function(i, entry) {
+
-
                    var video = {
+
-
                        title: entry.title.$t,
+
-
                        id: entry.id.$t.match('[^/]*$'),
+
-
                        thumbnails: entry.media$group.media$thumbnail
+
-
                    };
+
-
                    videos.push(video);
+
-
                });
+
-
                allopts.allvideos = videos;
+
-
                allopts.carousel(md, videos, allopts);
+
-
                allopts.player(md, videos[0], allopts);
+
-
                allopts.loaded(videos, allopts);
+
-
            });
+
-
        }
+
-
    });
+
-
   
+
-
})();
+
-
       
+
-
$(function() {
+
-
    $('#player').youTubeChannel({user:'mdyv-J42xCtx95RkOLp41A'});
+
-
</script>
+
-
</body>
+
</html>
</html>

Latest revision as of 00:36, 18 October 2014

Outreach

Videos










Retrieved from "http://2014.igem.org/Team:Goettingen/outreach_videos"