video sizing

Report · Feb 11, 2021

Hi, I'm hoping someone in here can help with this problem. I originally posted about this in Adobe Premier community, but supposedly this is a html question which I dont necessarily agree with but anyway.

I'm trying to resize a video but I'm having problems. Attached is a picture of what it looks like on-line. I'm trying to do away with the black around the video.

here is the html code.

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>more info</title>
 <link href="OEP.css" rel="stylesheet" type="text/css">
 <style type="text/css">
	 video {
		 position:relative;
		 height:50;
		 width:50;
	 }
 </style>
</head>

<body>
<div class="blue">
  <br />
</div>	
<div class="grey">
	<br />
</div>	
	<div id="oep">
	Ossian Enterprise Park	
</div>
<div class="grey">
	<br />
</div>
<div class="blue">
	<br />
</div>	
<nav>
	<h4><a href="homeTest.html">Home</a></h4><h4><a href="BusinessParkOptions.html">Options</a>	</h4>
	<h4><a href="Building_Site_Overview.html">Building Site Overviequ</a></h4>
</nav>	
	<h1>sample1</h1>
<video autoplay>
	<source src="assets/Sample.mp4" type="video/mp4">
	</video>
	<h1>Sample2</h1>
<video autoplay>
<source src="assets/SampleB.mp4" type="video/mp4">
</video>		
	<h1>Sample3</h1>
<video autoplay>
<source src="assets/SampleC.mp4" type="video/mp4">
</video>	
<footer style="float:none">
  building_overview building_overview
  <div id="BDH">
	<h1>Business Done Here!</h1> 
</div>	
<img src="assets/footer1.jpg" width="900" height="84" alt=""/> </footer>
</body>
</html>

Report · Feb 11, 2021

What is the native video's height and width in pixels?

I ask because if you upscale it too much with CSS, the results will be distorted.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Feb 11, 2021

height is 720width is 1280

I need it smaller

Report · Feb 11, 2021

How small?

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Feb 11, 2021

I don't know how to explain it but maybe a little bit bigger than sample 1.

Report · Feb 12, 2021

The modern web needs to be responsive on any device. That means every site visitor should have a good experience regardless of what sized device they have -- big, small and everything in between.

With video, it's especially important to preserve the native video's aspect ratio. But we still have no idea what you have in mind for page layout, so this is all just guess work.

For this demo I'm using Bootstrap's responsive mobile-first framework and a YouTube video.

Here's the code:

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap Responsive Video Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">Brand/Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
</ul>
<!--Search form-->
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container">
<div class="row">
<div class="jumbotron mx-auto">
<h2>Bootstrap 4 in Dreamweaver</h2>
<p>Responsive video. This uses YouTube 
&lt;
iframe
&gt; 
but MP4  will work, too.</p>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<h2>Aspect ratio 1:1</h2>
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
<div class="col-lg-6">
<h2>Aspect ratio 4:3</h2>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-6">
<h2>Aspect ratio 16:9</h2>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
<div class="col-lg-6">
<h2>Aspect ratio 21:9</h2>
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col">
<footer>Footer goes here.... </footer>
</div>
</div>
</div>

<!--First jQuery then Popper then Bootstrap JS--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Feb 11, 2021

Hi @mindyt743513,

NOTE: Autoplay won't work in most devices unless volume is muted.

NOTE 2: Autoplay assumes everyone wants to consume excess bandwidth which is rarely true. For this reason many people like me have autoplay blockers enabled to stop it. Gratuitous media should never be forced on people. It must be their choice to view it or not.

Try this code in a new document and see what you think:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Video Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
body {
margin: 0;
background: black;
}
.video-wrapper { position: relative; }
.video-wrapper > video {
width: 100%;
vertical-align: middle;
}
.video-wrapper > video.has-media-controls-hidden::-webkit-media-controls {
display: none;
}
.video-overlay-play-button {
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 10px calc(50% - 50px);
position: absolute;
top: 0;
left: 0;
display: block;
opacity: 0.95;
cursor: pointer;
background-image: linear-gradient(transparent, #000);
transition: opacity 150ms;
}
.video-overlay-play-button:hover { opacity: 1; }
.video-overlay-play-button.is-hidden { display: none; }
</style>
</head>
<body>
<div class="video-wrapper">
<!--CHANGE POSTER IMAGE AND VIDEO TO YOUR OWN-->
<video poster="path/YOUR_POSTER_IMAGE.jpg" muted="muted" autoplay="autoplay" >
<source src="path/YOUR_VIDEO.mp4" type="video/mp4">
</video>
</div>


<script>
//Invoke the play button on load
var videoPlayButton,
videoWrapper = document.getElementsByClassName('video-wrapper')[0],
video = document.getElementsByTagName('video')[0],
videoMethods = {
renderVideoPlayButton: function() {
if (videoWrapper.contains(video)) {
this.formatVideoPlayButton()
video.classList.add('has-media-controls-hidden')
videoPlayButton = document.getElementsByClassName('video-overlay-play-button')[0]
videoPlayButton.addEventListener('click', this.hideVideoPlayButton)
}
},
formatVideoPlayButton: function() {
videoWrapper.insertAdjacentHTML('beforeend', '\
<svg class="video-overlay-play-button" viewBox="0 0 200 200" alt="Play video">\
<circle cx="100" cy="100" r="90" fill="none" stroke-width="15" stroke="#fff"/>\
<polygon points="70, 55 70, 145 145, 100" fill="#fff"/>\
</svg>\
')
},
hideVideoPlayButton: function() {
video.play()
videoPlayButton.classList.add('is-hidden')
video.classList.remove('has-media-controls-hidden')
video.setAttribute('controls', 'controls')
}
}
videoMethods.renderVideoPlayButton()
</script>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Feb 12, 2021

I finally got it to size right!

Report · Feb 12, 2021

I finally got it to size right!

============

I guess we'll have to take your word for it 🙂

Glad you got it sorted.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Adobe Community

video sizing