JSFiddle - React, Tailwind, and code Playground

Video plugin 2.0 prototype

by tonytlwu

HTML

<div id="widget-content">
    <div class="container" id="widget-form-container">
        <div class="row row-content">
            <!-- Nav Tabs -->
            <ul class="nav nav-stacked col-xs-3 nav-pills">
                <li class="active">	<a href="#video" data-toggle="tab" id="toggle-list-layouts">Set up video</a>

                </li>
            </ul>
            <!-- End of Nav Tabs -->
            <!-- Tab Panes -->
            <div class="tab-pane active" id="video">
                <div class="tab-content col-xs-9">
                    <div class="form-horizontal">
                        <div class="tab-pane-header">
                             <h3>Configure your video</h3>

                            <p>Choose how you want your video to play</p>
                        </div>
                        <div class="tab-pane-content">
                            <div class="form-group">
                                <div class="col-xs-4 control-label">
                                    <label for="link-text">What kind of video do you want to add?</label>
                                </div>
                                <div class="col-xs-8">
                                    <div class="radio">
                                        <label>
                                            <input type="radio" name="video_type" value="embed"><strong>Use an uploaded video</strong> &mdash; The uploaded video will play offline and the app size will be larger</label>
                                    </div>
                                    <div class="radio">
                                        <label>
                                            <input type="radio" name="video_type" value="stream"><strong>Use an online video</strong> &mdash; An internet connection will be required to play and the app size will be smaller</label>
                                    </div>
                                </div>
                           ...

CSS

/*************************
 *
 *	Document    : Fliplet Widget Styles
 *	Created on  : Jun 23, 2011, 5:44:22 PM
 *	Author      : Weboo
 *	Description : Fliplet Widget Styles
 *
 ************************/

/***********************/

/*       IMPORTS       */

/***********************/
 @import url(http://fonts.googleapis.com/css?family=Dosis:200, 400, 700|Open+Sans:300italic, 400italic, 700italic, 400, 300, 700&subset=latin, latin-ext);
 html, body {
    min-height: 100%;
    word-wrap: break-word;
}
* {
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
/* ---------------------------------------------------------------------------------------------------------- 
01 Padding-less columns -------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
 @media screen and (max-width: 767px) {
    .col-xs-no-padding {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    .col-sm-no-padding {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .col-md-no-padding {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
@media screen and (min-width: 1200px) {
    .col-lg-no-padding {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
/* Section: Legacy consistency */
 .btn {
    vertical-align: middle;
    height: 2.6979166667em;
    line-height: 2.6979166667em;
    padding: 0 0.833333em;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    margin: 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    border-width: 1px;
}
.btn-default...

JavaScript

$(':input[name="video_type"]').on('change', function () {
    if ($(this).val() === 'embed') {
        $('.embed-fields').removeClass('hidden');
        $('.streaming-fields').addClass('hidden');
    } else {
        $('.embed-fields').addClass('hidden');
        $('.streaming-fields').removeClass('hidden');
    }
    $('.streaming-fields-preview').addClass('hidden');
    $('.streaming-fields-preview span').removeClass('hidden');
    $('.streaming-fields-preview .embed-responsive').addClass('hidden');
});

$(':input[name="video_source_url"]').on('change keyup paste input', function () {
	$('.streaming-fields-preview').removeClass('hidden');
    setTimeout(function(){
        $('.streaming-fields-preview span').addClass('hidden');
        $('.streaming-fields-preview .embed-responsive').removeClass('hidden');
    },1000);
});

$('#try-stream').on('click', function () {
    $(':input[name="video_source_url"]').val('https://vimeo.com/channels/staffpicks/137643804').trigger('change');
});