The huge gap is caused bu the changes you made to the video iframe rule:
.tk-video-wrapper iframe {
position: absolute;
top: 0%;
left: 18%;
width: 66%;
height: 66%;
overflow: hidden;
}
Change this back to the original default:
.tk-video-wrapper iframe {
position: absolute;
top: 0%;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
The iframe rule should never be changed, it provide the correct aspect ratio space for the video.
To adjust the size of the video you simply adjust the width of the video wrapper. To get it to have the same width as the mp4 underneath you just set the width to 55%. Do this with a special style class:
.vid-55 {
width: 55%;
margin: 0 auto;
}
and then open the Toolkit Modify interface and enter: vid-55 into the User Class box. Now the video will be the same size as your mp4.
Next, you have entered your text description with a <br> that is inside the video wrapper div. Never do this since the wrapper div forms part of the video viewport. Remove that <br> and text, and the place the text into the empty <p> tag you already have on the page, just past the video wrapper.
