3D FlipBook Embedded video

The example shows how you can embed images collection into your page using 3D FlipBook jQuery plugin. It shows how to use CSS Layer to embed youtube video and chose the plugin template (skin) . Some coding skills are required. Create a div:

  <div class="sample-container"></div>

Do not forget to set required height for the div container. Add script:

  <script type="text/javascript">
    function theKingIsBlackPageCallback(n) {
      return {
        type: 'image',
        src: 'books/image/theKingIsBlack/'+(n+1)+'.jpg',
        interactive: false
      };
    }
    $('.sample-container').FlipBook({
      pageCallback: theKingIsBlackPageCallback,
      pages: 40,
      propertiesCallback: function(props) {
        props.cover.color = 0x000000;
        props.cssLayersLoader = function(n, clb) {
          if(!n) {
            clb([{
              css: [
                '.center-page {',
                  'position: absolute;',
                  'left: 50%;',
                  'top: 50px;',
                  'transform: translate(-50%, 0);',
                '}',
                'iframe {',
                  'border: 0;',
                '}'
              ].join(''),
              html: '<iframe class="center-page" src="https://www.youtube.com/embed/0vrdgDdPApQ" allowfullscreen width="800" height="450"></iframe>'
            }]);
          }
        };
        return props;
      },
      template: {
        html: 'templates/default-book-view.html',
        styles: [
          'css/short-white-book-view.css'
        ],
        links: [
          {
            rel: 'stylesheet',
            href: 'css/font-awesome.min.css'
          }
        ],
        script: 'js/default-book-view.js',
        sounds: {
          startFlip: 'sounds/start-flip.mp3',
          endFlip: 'sounds/end-flip.mp3'
        }
      }
    });
  </script>

cssLayersLoader load any HTML content and place it before a book page. CSS layer cannot be transformed as 3D surface, so it disappear while pages are flipping. See more about CSS layers in API documentation.