How to set the size of the Component View (Vue.js)

Component View is being trained based on “GitHub - zoom/meetingsdk-sample-vuejs: Use the Zoom Meeting SDK in a Vue.js App”. The size of the Component View is small when launched as it is, and I would like to specify the size of the Component View using CSS or other means, but I don’t know how to do this.

Which Web Meeting SDK version?
@zoomus/websdk”: “^2.4.0”

Meeting SDK Code Snippets

    <h1>Zoom Meeting SDK Sample Vue.js 2</h1>
    <!-- For Component View -->
    <div id="meetingSDKElement" class="meetingSDKElement">
      <!-- Zoom Meeting SDK Component View Rendered Here -->

    <button @click="getSignature">Join Meeting</button>

import axios from "axios";
import ZoomMtgEmbedded from '@zoomus/websdk/embedded';

export default {
  name: 'HelloWorld',
  created () {
  data () {
    return {
      client: ZoomMtgEmbedded.createClient(),
      // This Sample App has been updated to use SDK App type credentials
      sdkKey: "Rb6z6DOTaqMTDGIMxoXnqaeYTk5ZLUHLbD9s",
      meetingNumber: '',
      passWord: '',
      role: 0,
      signatureEndpoint: "http://localhost:4000",
      userEmail: "",
      userName: "Vue.js",
      // pass in the registrant's token if your meeting or webinar requires registration. More info here:
      // Meetings:
      // Webinars:
      registrantToken: ''
  methods: {
    getSignature() {, {
        meetingNumber: this.meetingNumber,
        role: this.role
      .then(res => {
      .catch(error => {
    startMeeting(signature) {
      let meetingSDKElement = document.getElementById('meetingSDKElement');

        debug: true,
        zoomAppRoot: meetingSDKElement,
        language: 'en-US',
        customize: {
          meetingInfo: ['topic', 'host', 'mn', 'pwd', 'telPwd', 'invite', 'participant', 'dc', 'enctype'],
          toolbar: {
            buttons: [
                text: 'Custom Button',
                className: 'CustomButton',
                onClick: () => {
                  console.log('custom button');

        sdkKey: this.sdkKey,
        signature: signature,
        meetingNumber: this.meetingNumber,
        password: this.passWord,
        userName: this.userName,
        userEmail: this.userEmail,
        tk: this.registrantToken

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
main {
  width: 70%;
  margin: auto;
  text-align: center;

main button {
  margin-top: 20px;
  background-color: #2D8CFF;
  color: #ffffff;
  text-decoration: none;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 40px;
  padding-right: 40px;
  display: inline-block;
  border-radius: 10px;
  cursor: pointer;
  border: none;
  outline: none;

main button:hover {
  background-color: #2681F2;

  width: 500px;
  height: 400px;

To Reproduce(If applicable)
Steps to reproduce the behavior:

  1. Go to ‘…’
  2. Click on ‘…’
  3. Scroll down to ‘…’
  4. See error

If applicable, add screenshots to help explain your problem.

Device (please complete the following information):

  • Device: [e.g. Macbook Pro]
  • OS: [e.g. macOS 11]
  • Browser: [e.g. Chrome]
  • Browser Version [e.g. 88.0.4324.150 (Official Build) (x86_64)]

Additional context
Add any other context about the problem here.

I can set default size for using this parameter!!

Hi Koudai. You can customize component view size by video property inside customize property in the client initialization method. check below the sample code

      debug: true,
      zoomAppRoot: meetingSDKElement,
      language: 'en-US',
      customize: {
        video: {
          isResizable: true,
          viewSizes: {
            default: {
              width: 500,
              height: 220

        meetingInfo: [
1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.