Reactjs和奎尔：设置尺寸嵌入式视频

Question

我有下面这段代码，我尝试嵌入自定义尺寸的视频对他们来说：

import React, { Component } from 'react'; 
import ReactQuill from 'react-quill'; 
import '../node_modules/quill/dist/quill.snow.css'; 

const CustomToolbar =() => (
    <div id="toolbar"> 
    <select className="ql-header"> 
     <option value="1"></option> 
     <option value="2"></option> 
     <option selected></option> 
    </select> 
    <button className="ql-bold"></button> 
    <button className="ql-italic"></button> 
    <button className="ql-strike"></button> 
    <button className="ql-underline"></button> 
    <select className="ql-color"> 
     <option value="red"></option> 
     <option value="green"></option> 
     <option value="blue"></option> 
     <option value="orange"></option> 
     <option value="violet"></option> 
     <option value="#d0d1d2"></option> 
     <option selected></option> 
    </select> 
    <button className="ql-vimeo"> 
     <span className="toolbar-space">Vimeo</span> 
    </button> 
    <button className="ql-dailyMotion"> 
     <span className="toolbar-space" >Dailymotion</span> 
    </button> 
    <button className="ql-youtube" > 
     <span className="toolbar-space" >Youtube</span> 
    </button> 
    <button className="ql-facebook"> 
     <span className="toolbar-space">Facebook</span> 
    </button> 
    </div> 
) 

/** 
* Basic Editor 
*/ 
class MyEditor extends Component { 

    constructor(props) { 
     super(props) 
     this.state={text:''} 

     var self=this;//Usefull to bind the method 
     this.modules = { 
      toolbar: { 
      container: "#toolbar", 
      'image-tooltip': true, 
      'link-tooltip': true, 
      handlers:{ 
       dailyMotion: this.insertDailyMotion.bind(self), 
       youtube: this.insertYoutube.bind(self), 
       vimeo: this.insertVimeo.bind(self), 
       facebook: this.insertFacebook.bind(self) 
      } 
      } 
     } 

     this.reactQuillRef=null; 
    } 

    onTextChange(value) { 
     this.setState({text:value}) 
    } 

    insertVideo(video) { 
     const editor = this.reactQuillRef.getEditor(); 
     const index = editor.getSelection().index || 0; 
     editor.insertEmbed(index, 'video', video); 
     editor.format('width',1000); 
     editor.format('height',1000); 
    } 

    insertDailyMotion(){ 
     this.insertVideo("//www.dailymotion.com/embed/video/x5rx12e"); 
    } 

    insertYoutube(){ 
     this.insertVideo("https://www.youtube.com/embed/1rDQccuLEvY?ecver=2"); 
    } 

    insertVimeo(){ 
     this.insertVideo("https://player.vimeo.com/video/221105534"); 
    } 

    insertFacebook(){ 
     this.insertVideo("https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fenikosgr%2Fposts%2F1427262130644621&width=500") 
    } 

    render(){ 
     return (
     <div> 
     <CustomToolbar /> 
     <ReactQuill 
      ref = { (el) => { this.reactQuillRef = el; } } 
      value = {this.state.body} 
      onChange = {this.handleChange} 
      modules = {this.modules} 
      formats = {MyEditor.formats} 
      theme="snow" 
      /> 
     </div> 
    ) 
    } 

} 

MyEditor.formats = [ 
    'header', 'font', 'size', 
    'bold', 'italic', 'underline', 'strike', 'blockquote', 
    'list', 'bullet', 'indent', 
    'link', 'image', 'color','script','video' 
] 

export default MyEditor; 

但我尝试设置嵌入式iframe的大小，但最远的我尝试最远的失败。你有什么想法为什么我不能设置包含视频的iframe的大小。

编辑1

我想还是使用增量通过更改下面的方法进入这个没有成功：

insertVideo(video) { 
    const editor = this.reactQuillRef.getEditor(); 
    const index = editor.getSelection().index || 0; 
    const delta=[ 
    { 
     insert:{ 
     video: video, 
     attributes:{ 
      width: 900, 
      height: 900 
     } 
    } 
    }, 
    ] 
    editor.updateContents(delta); 
} 

仍然没有成功。该视频比900X900像素更小。

Answer 1

季米特里斯你只需要下面的规则添加到您的CSS宽度：100％到iframe类（我添加了一个加号，以标明的变化），并且将大小设置为全宽。或者你可以设置一个像800px的固定数量。

.ql-editor .ql-video { 
    display: block; 
    max-width: 100%; 
    + width: 100%; 
}