Add height/width to an embedded replay web viewer

Help! ReplayWeb.page
1

I’m trying to use replay-web to embed a wacz in a web page. I’ve gotten it to work, but I can’t seem to figure out how to adjust the size of the embedded window. If you go to https://www.wticalumni.com/embed/CTDA_test.htm you can see the problem. I’ve tried all sorts of variations of height and width and it doesn’t do anything. This is just a test proof of concept to see if it can be done… then I’ll embed it on another site!

Here’s my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>

  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>CT Digital Archive</title>
  
  </head>

}
<body>
<img  src="CTDA Banner.png">


<script src="https://cdn.jsdelivr.net/npm/replaywebpage@2.2.5/ui.js"> </script> 


<replay-web-page 
source="https://www.wticalumni.com/embed/WTIC.wacz" url="https://www.wticalumni.com/index.htm">
</replay-web-page>

</body>
</html>

Thanks!

2

Looks like you’ve run into this common embedding issue!

I also might recommend setting box-sizing: border-box; and margin: 0; to remove the default margin.

If you want a similar reference site to compare against, check out mine in the web inspector :slight_smile:

3

@Hank I really appreciate the reply. I’ve spent the past hour trying to implement your suggestion, but not having coded in css before I haven’t been successful. Could I please impose on you to annotate my code to include the suggestions you’ve made? Thanks so much.

4

Sure, here’s a few pointers!

There’s a few different ways of adding CSS to a page, the best one to use (at this stage of you learning web development) depends on your personal organizational best practices.

  1. You can use the style="CSS HERE" attribute and apply it to any HTML tag.
  2. You can add class="CLASSNAME" and reference that class name in your CSS, either located in a seperate CSS file, or in a <style>CSS HERE</style> section of your HTML.

Here’s the aforementioned CSS suggestions wrapped in a <style> tag so you can paste it within the <body> section of your code. This CSS code targets the <html> and <body> tags and applies the CSS properties inside the curly brackets to those tags. This is generally how CSS works! You target a class (which can be done by adding a period before the class name like .class-name) or entire tag (as shown here by referencing tagname with no period), and then apply CSS properties to those tags.

If you’re curious what exactly each tag does, check out their MDN pages!

<style>
  html, body {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
  }
</style>
5

You’re a lifesaver… I’m trying to get a local digital archive for our US state of Connecticut to host a wacz of a website I run… you’ve gotten me one step closer. Thanks so much.

1 Like