3D FlipBook - The video will not be displayed after embedding HTML code

z***3@live.com

2022-03-24

2022-03-28

Hello! I copied the embedded code of my video at bilibili.com(in China) into the HTML code and uploaded the HTML file to the WordPress plug-in, but it was not displayed. The following is the HTML code. Please check it for me:

here is the embedded code of bilibili.com:

<iframe src="//player.bilibili.com/player.html?aid=551876666&bvid=BV1pi4y1y73A&cid=540128308&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

then i put it in the html file:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Source code</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.min.js"></script>
</head>
<body>
<div class="source-link">
  <a class="show-source" href="#" data="embedded-video">Show source code</a>
</div>

<div class="sample-container">

</div>

<script src="js/three.min.js"></script>
<script src="js/pdf.min.js"></script>

<script type="text/javascript">
  window.PDFJS_LOCALE = {
    pdfJsWorker: 'js/pdf.worker.js',
    pdfJsCMapUrl: 'cmaps'
  };
</script>
<script src="js/3dflipbook.min.js"></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 src="//player.bilibili.com/player.html?aid=551876666&bvid=BV1pi4y1y73A&cid=540128308&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>'
          }]);
        }
      };
      return props;
    },
    template: {"html":"templates\/default-book-view.html","styles":["css\/font-awesome.min.css","css\/short-white-book-view.css"],"script":"js\/default-book-view.js","sounds":{"startFlip":"sounds\/start-flip.mp3","endFlip":"sounds\/end-flip.mp3"},"init":"safari-fa-init.html"}  });
</script>
</body>
</html>

Replies

a***r@3dflipbook.net

2022-03-24

hi there, watch: https://www.youtube.com/watch?v=ekpAGfmPI5k, for YouTube: https://www.youtube.com/watch?v=DD-gpMaP-84