quickQuote - Demo

output demo from quickQuote times.github.io/quickQuote/

by Pietro Passarelli

HTML

<!--Video Quote Example-->
<div class='video-quote' id='videoQuoteText-id-n'>
  <span class='glyphicon glyphicon-play-circle'></span>

  <blockquote>
     <small>►  Watch Video </small><br><br>
    A five billion dollar web site, I have so many websites, I have them all over the place. I hire people they do a web site, it costs me three dollars.
    <br><cite id='authorVideoQuote'>Donald Trump</cite>
  </blockquote></div><!-- video quote-->
  <div  id='video-wrap-n' class='video-wrap video-wrap--closed'>
    <video class=' video-js vjs-default-skin' id='video-quote' controls preload='auto' width='100%' height='auto' poster='' data-setup='{}'>
      <source src='http://times.github.io/quickQuote/media/snippet_54.mp4' id='snippetURLVideo' type='video/mp4' />
    </video>
</div> <!--video wrap-->

<!--end of example-->

CSS

/*styling of the video quote*/
      .video-quote  blockquote {
          background: #FAFAFC;
          border-left: 10px solid #E8E8F2;
          margin: 1.5em 10px;
          padding: 0.5em 10px;
          quotes: "\201C""\201D""\2018""\2019";
           cursor:pointer;
      }
      .video-quote  blockquote:before {
          color: #3D5266;
          content: '“';
          font-family: Times!important;
          font-size: 4em;
          line-height: 0.1em;
          margin-right: 0.25em;
          vertical-align: -0.4em;
      }
      .video-quote blockquote p {
          display: inline;
      }
      cite#authorVideoQuote {
         font-style: italic;
      }
      /*classes to show hide video element*/
      .video-wrap {
          overflow: hidden;
          height: auto;
          -webkit-transition: height 0.3s ease;
      }

      .video-wrap--closed {
          height: 0;
      }

JavaScript

/*quickQuote code demo*/
   /*script for dropdown on video*/
      document.getElementById('videoQuoteText-id-n').onclick = function() {
          if (document.getElementById('video-wrap-n').classList.contains('video-wrap--closed')) {
              document.getElementById('video-wrap-n').classList.remove('video-wrap--closed');
             document.getElementById('video-quote').play();
          } else {
              document.getElementById('video-wrap-n').classList.add('video-wrap--closed');
                document.getElementById('video-quote').pause();
          }
      };