Control Output Dimensions/Size

  • 1
  • Question
  • Updated 1 year ago
I want to control the final video size. When I say size I mean the dimensions. So lets say I take a screen shot of a youtube video for example (but I mean any video). The size of the screen shot is around 800px wide. I want to have an outputed video of say 420px wide. Lets say I want to embed it into a box of a specific size on a website/HTML file. No matter what I do, and what setting I bugger with, the video always comes out at some weird size. If I don't put it into a large container on my website/HTML file, I can only view a small portion of the video. It won't scale.

Shouldn't be that hard................ BUT, I cannot control the outputted video size. Again when I say size I mean the physical size of the video, not file size in Mb. Every search with the word size renders file byte size. 

Almost bald from pulling my last hairs out.
Photo of vmartin

vmartin

  • 2 Posts
  • 0 Reply Likes

Posted 1 year ago

  • 1
Photo of kayakman

kayakman, Champion

  • 6238 Posts
  • 1827 Reply Likes
try this ...

do a custom production, in the wizard, specify the desired video dimensions [use same aspect as captured clip]; keep in mind that downsizing the video will hurt its quality; you should get a video size that will fit/embed in the same sized control on your web site page

I don't embed videos anymore; maybe others can chime in here?
Photo of Joe Morgan

Joe Morgan

  • 5629 Posts
  • 2920 Reply Likes
You can set the embed size of a video when doing a Custom Production.



That should give the person viewing the video the option of watching the video in full HD if that's the actual  resolution of the video.
Plus, it gives you the ability to embed the video at the dimensions your website requires or restricts you to.And /Or the size you desire.
To the best of my knowledge, "Which is extremely limited on this"

Regards,Joe
Photo of Dubie

Dubie

  • 950 Posts
  • 730 Reply Likes
Hello vmartin

You state you are putting the video into a web page.

Here is some coding for your web page(s) that may help.

You can adjust the video size in the CSS file and your page(s) will also be responsive for
different devices.

These are bare bones basic pages So you'll need to "Pretty" them up to your liking or adapt the
code into your present page

This is for a straight HTML5 page.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
  <meta name="description" content="" />
  <meta name="author" content="" />
  <title>HTML5 mp4 Page</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<br />
<div class="auto-style1">
<span class="auto-style2">HEAD TEXT HERE</span>
</div>
<br>
<!--Remove the word controls or autoplay if not wanted but you need to have at least one of them-->
<video class="videobox" controls autoplay><source src="YOUR mp4 VIDEO LINK HERE" type="video/mp4">
</video>
<br>
<br>
<!--auto update year/copyright script-->
<p class="auto-style1"><span class="auto-style3">
&copy;<script type="text/javascript">
  document.write(new Date().getFullYear());
</script>
All Rights Reserved
</span>
</p>
</body>
</html>

CSS (Change the width % for video size)

.videobox {
display:block;
width:50%;  /* or higher to scale best*/
min-width:280px; /* or thereabouts */
margin: 1em auto;
box-shadow: 0.5em 0.5em 0.5em #333333;
}
.auto-style1 {
text-align: center;
}
/*Head Text*/
.auto-style2 {
color: #000000;
text-decoration: overline underline;
font-size: 2.5em; /* pixels/16=1em  ie; 2.5=40px */
font-weight: bold;
text-shadow: -2px 2px black ;
  }
/*copyright text*/
  .auto-style3 {
color: #000000;
}

The results



Browser scaled down to simulate mobile




If you prefer to use iframe embeds try this.

HTML ( The iframe link will usually have the width and height that you can change)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
  <meta name="description" content="" />
  <meta name="author" content="" />
 <title>Iframe Video Page</title>
  <link href="style.css" rel="stylesheet">
</head>
<body>
<br />
<div class="auto-style1">
<span class="auto-style2">Head Text</span>
</div>
<br>
<br>
<div class="video-wrapper">
 <div class="video-container">
  <iframe> Iframe Video Link Here></iframe>
 </div>
</div>
<br />
<br />
<!--auto update year/copyright script-->
<p class="auto-style1"><span class="auto-style3">
&copy;<script type="text/javascript">
  document.write(new Date().getFullYear());
</script>
All Rights Reserved
</span>
</p>
</body>
</html>


CSS

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 0px;
  height: 0;
  margin: 1em auto;
}
.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0.5em 0.5em 0.5em #292929;
}
.auto-style1 {
 text-align: center;
 font-size: 18px;
}
/*Head Text*/
.auto-style2 {
 color: #000000;
 text-decoration: overline underline;
 font-size: 2.5em; /* pixels/16=1em  ie; 2.5=40px */
 font-weight: bold;
 text-shadow: -2px 2px black ;
}
/*copyright text*/
.auto-style3 {
 color: #000000;
}

The Results



Browser scaled down to simulate mobile



If you need help with the code let me know.

:)
Photo of vmartin

vmartin

  • 2 Posts
  • 0 Reply Likes
Thank you for your impute folks.
Still getting used to Camtasia, I don't use it very often so have these issues when I do use it. I also just updated to v9, so getting used to that new version as well.

I have been experimenting with the embed size vs video size vs record size vs project settings. It's always been confusing to me, but I'll keep experimenting. I have been using iFrames to inset video's into the HTML. I had just uploaded to UTube and linked it in the past, but am changing to embedded video with the files on my server, so I now need to have a better understanding. The code is much appreciated Dubie as my iFrame code is not that inclusive.