video sizing

Participant ,
Feb 11, 2021 Feb 11, 2021

Copy link to clipboard

Copied

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.  

Capture.JPG

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>

Views

140

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 11, 2021 Feb 11, 2021

Copy link to clipboard

Copied

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Feb 11, 2021 Feb 11, 2021

Copy link to clipboard

Copied

height is 720width is 1280

I need it smaller 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 11, 2021 Feb 11, 2021

Copy link to clipboard

Copied

How small?

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Feb 11, 2021 Feb 11, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 12, 2021 Feb 12, 2021

Copy link to clipboard

Copied

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.

 

image.png

 

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 11, 2021 Feb 11, 2021

Copy link to clipboard

Copied

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Feb 12, 2021 Feb 12, 2021

Copy link to clipboard

Copied

I finally got it to size  right!  

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 12, 2021 Feb 12, 2021

Copy link to clipboard

Copied

LATEST

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines