I am trying to resize a video in a custom theme based on Aware. I have tried using just a YouTube url, the as well as embedding an iFrame with the width and height set in the Template.
The video displays at the size in all cases.
Because I had customized both the scss and layout html I double checked it by trying the same on a basic Aware theme. Same result.
Finally I set up a test page on a site built with the Focus theme and use the exact same 3 methods and the videos displayed at all three different sizes.
Is there a different way to resize a video in Aware?
Aware — our first responsive theme — dynamically resized YouTube videos and other embedded content to ensure that it always fits properly on the site (at desktop size, tablet size and mobile size). As such, it's not possible to specify a fixed width for the video, as it will always be dynamically scaled to fit the page it's on.
Showing 7 reactions
Sign in with
Hines Digital
Certified Architect
Certified Expert
Hines Digital
Certified Architect
Certified Expert
Act for America
Greg Evers for Congress
Marston Digital Solutions
Certified Architect
Certified Expert
Act for America
Greg Evers for Congress
Marston Digital Solutions
Certified Architect
Certified Expert
<div id=“content”>
<center>
<div id=“intro”>
<div class=“text-content”>
<div id=“menu” style=“width:20%;float:left;”>
</div> <div id=“content” style=“width:60%;align:center;”> <center><h3>HOW TO MAKE A DIFFERENCE</h3></center> </div> <div id=“content=” style=“width:20%;float:right;”> </div> </div> </div> <div class=“padbottommore”> </div>
</center>
</div>
Act for America
Greg Evers for Congress
Marston Digital Solutions
Certified Architect
Certified Expert
I actually found a work around. I placed the video embed inside the center column of a 3 column container and used padtopmore and padbottomore to create the spacing I wanted. By putting the video inside a column with a width defined as a percentage if shrank the video down to the size I wanted.
The code is:
<div id=“content”>
<div id=“intro”>
<div class=“text-content”>
<div id=“menu” style=“width:20%;float:left;”>
</div> <div id=“content” style=“width:60%;align:center;”> <center><h3>HOW TO MAKE A DIFFERENCE</h3></center> </div> <div id=“content=” style=“width:20%;float:right;”> </div> </div> </div>
I know it isn’t particularly elegant but it works. You can see the results at http://www.icaucus.us/
So now that we know it is possible to resize a video in Aware care to tell me how the heck I make it center within the left column? :-)</div>
Act for America
Greg Evers for Congress
Marston Digital Solutions
Certified Architect
Certified Expert