Website B video is embedded in the web page, and relevant controls are hidden

Web page embedding B Station video is mainly used ifame , His address is ：

https://player.bilibili.com/player.html?cid=&aid=84267566&page=1&as_wide=1&high_quality=1&danmaku=0

The following parameter description ：

key	attribute
cid	It should be a client iid, Can not fill
aid	video id, Required
page	B Stop video , In the anthology , Several videos ( The default value is 1）
as_wide	Whether the widescreen 1: Wide screen , 0: Small screen
high_quality	Whether HD
danmaku	Whether to open the barrage 1: Turn on ( Default ), 0: close

among aid Is required , Other parameters can be left blank

This aid How to get it ？ This requires a request B Stand at this interface

https://api.bilibili.com/x/web-interface/view?bvid=BV1gY4y1E7h8

1、aid obtain

bvid How to get ？ stay B Station play video url We can see

If the web page is uploaded For link extraction, you need to visit the address above to get the video aid

We can call the backend to access , The front end provides bvid, Back end to request B Station to get aid The address of , Return to the front end according to the obtained content

2、 encapsulation

Here we use vue For example ：

<template>
  <div class="iframe-box">
    <div class="vedio">
      <iframe class="vedio-iframe" :src="src" frameborder="no" scrolling="no" danmaku="0" allowfullscreen="true" id="iframe" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts" ></iframe>
    </div>
  </div>
</template>

ifame Parameter description ：

key	attribute
allowfullscreen	Set up true It is too , Can be called by requestFullscreen() Method to activate full screen mode
scrolling	This property controls whether to scroll through the frame auto: Scroll bar displayed when the content of the frame is out of range .yes: Display scroll bars in real time .no: Never show scrollbars .
frameborder	This property 1 Value is displayed , The default of this framework 0 Use screen
…	…

There is no more detail here , You can refer to this iframe

js Part of the code :

<script setup lang="ts" name="iframe">
import ( ref ) from "vue";

const props = defineProps({
    
  cid: {
    
    type: String,
    default: "",
  },
  aid: {
    
    type: String,
    default: "",
  },
  page: {
    
    type: String,
    default: "1",
  },
  as_wide: {
    
    type: String,
    default: "1",
  },
  high_quality: {
    
    type: String,
    default: "1",
  },
  danmaku: {
    
    type: String,
    default: "0",
  },
})

const {
     cid, aid, page, as_wide, high_quality, danmaku } = props;

const baseURL = "https://player.bilibili.com/player.html?";

const src = ref<String>(`${
      baseURL}cid=${
      cid}&aid=${
      aid}&page=${
      page}&as_wide=${
      as_wide}&high_quality=${
      high_quality}&danmaku=${
      danmaku}`);

</script>

css Part of the code ：

<style lang="scss" scoped> .iframe-box {
    
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.vedio {
    
  width: 100%;
  //  Because you want to hide the following tips , All add more  40px,  If you want to hide controls, add more  30px
  height: calc(100vh + 40px);
  min-height: 300px;
  position: relative;
  padding: 0;
  overflow: hidden;
  margin: 0;
  box-sizing: border-box;

  .vedio-iframe {
    
    width: 100%;
    height: 100%;
    border: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
}
</style>

final result ：

Originally, I didn't remove the appearance below ：

At present, I only know how to hide below , Others don't understand for the time being , Because you can't get iframe The elements in , Its style cannot be modified