Copy link to clipboard
Copied
I have created inserted a video as a layer, but can't align it with the text or have it move dynamically when the window is resized. Any tips?
Thanks
Copy link to clipboard
Copied
Copy/paste the entire page's code (html and css) into a forum response so we have a better understanding of what you're seeing and what you're going for.
Someone will be able to point you in the right direction pretty quickly with that.
Copy link to clipboard
Copied
Copy link to clipboard
Copied
It looks like the APDiv button from a pre-mobile-aware version of DW was used to add the video.
Unless the desired effect is to have the video sit at an exact position, in pixels, from the top/left of the browser window at all times, the APDiv button can't be used.
Pre-CC versions of DW aren't going to be of much help when trying to create responsive or mobile-friendly pages. They came out before those concepts became the internet standard.
You should be able to use a standard container, then change the settings of that container to get the video back into the remainder of your content using float:left or float:right, margin and padding settings in your CSS.
The following is a bandaid on a compound fracture of your site's femur (but it will work). Change your bold text to:
<div style="float:right; margin:10px">
<p align="center">Soldering surface mount LEDs onto a prototype logic demonstrator
board </p>
<p>
<embed src="content/papers/surface%20mount%20soldering.mp4" width="271" height="266" name="Test board"></embed></p>
</div>
Copy link to clipboard
Copied
@Jon Fritz : Embed is a self-closing element. This should read
<embed src="content/papers/surface%20mount%20soldering.mp4" width="271" height="266" name="Test board">
Copy link to clipboard
Copied
This page is really showing its age.
I'm guessing this site was built with very old software.
I don't know if you're ready for future shock but here goes... If you don't have a modern code editor yet, get one. See list below.
This is a sample Bootstrap layout with YouTube videos in different aspect ratios. First we determine which aspect ratio most closely resembles your video. Copy & paste this into a new, blank HTML5 document.
<!doctype html>
<html lang="en">
<head>
<title>Bootstrap 5.2.3 Responsive Video</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!--Bootstrap JS Bundle-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<!--REPEAT THIS COL AS MANY TIMES AS NEEDED-->
<div class="col mx-auto text-center">
<h2>YouTube Hosted ~ Aspect ratio 1:1</h2>
<!--ADJUST ASPECT RATIO TO SUIT VIDEO: 1x1, 4x3, 16x9 or 21x9-->
<div class="ratio ratio-1x1">
<!--USE PUBLICLY AVAIL YOUTUBE VIDEOS-->
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
<div class="col mx-auto text-center">
<h2>YouTube Hosted ~ Aspect ratio 4:3</h2>
<div class="ratio ratio-4x3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
<div class="col mx-auto text-center">
<h2>YouTube Hosted ~ Aspect ratio 16:9</h2>
<div class="ratio ratio-16x9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
<div class="col mx-auto text-center">
<h2>YouTube Hosted ~ Aspect ratio 21:9</h2>
<div class="ratio ratio-21x9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
</div><!--/END ROW-->
<hr>
<div class="row">
<div class="col mx-auto text-center">
<footer>Footer goes here.... </footer>
</div>
</div><!--/END ROW-->
</div><!--/CONTAINER-->
</body>
</html>
Once we know your video's aspect ratio, we can feed your content into a modern layout that works on all devices.
CODE EDITORS (FREE & PAID):
-- Adobe Dreamweaver CC - https://www.adobe.com/products/dreamweaver.html
-- Codespaces (free, browser-based) - https://github.com/features/codespaces
-- Nova (Mac only, formerly called Coda) - https://nova.app/
-- Pinegrow - https://pinegrow.com/
-- Sublime Text - http://www.sublimetext.com/
-- Visual Studio Code (free) - https://code.visualstudio.com/
Copy link to clipboard
Copied
Copy the following code and paste it in a new document to see what I have created. It may need some more styling.
<!doctype html>
<html>
<head>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
</head>
<body is="dmx-app" id="test">
<main>
<div class="container">
<div class="row mb-4">
<div class="col">
<h1 class="h4 text-uppercase fw-bold">Engineering</h1>
</div>
</div>
<div class="row nb-4">
<div class="col text-center">
<h2 class="h4 text-uppercase fw-bold">Projects Delivered</h2>
<p class="fst-italic">I have a wide range of practical skills in <span class="fw-bold">electronics, mechanical </span>engineering and <span class="fw-bold">software </span> from design to production, test and delivery.</p>
</div>
</div>
<div class="row mb-2">
<div class="col">
<h3 class="h6 fst-italic fw-bold">Robotics</h3>
<ul>
<li> Walking robot (1st year degree team project). Transistor controlled, wired PC interface, mechanical design.</li>
<li>Walking robot (BEng project). 12 DOF robot with servo controlled legs, ultrasound range-finding, digital compass, autonomous navigation, RF remote controller. Awarded UK Tektronics Engineering Prize</li>
<li>Line following robot mouse. PIC microcontroller controlled, IR and colour sensors, featured on local BBC News as part of a schools competition.</li>
<li>Robot football. Mobile robots that represented the UK internationally. I re-designed and miniaturised the motor, sensor and comms. boards using surface-mount components.</li>
<li>Maze solving robot. PIC microcontroller controlled, sensors, motor controller. Developed as a commercial kit for schools.</li>
<li>Robotic survey vessel to survey UK coastal waters. With onboard side-scan sonar, GPS, Wireless WAN, chemical sensor pod and winch.</li>
<li> Development of lunar rovers for the <span class="text-decoration-underline">Surrey Space Centre</span></li>
</ul>
</div>
</div>
<div class="row">
<div class="col">
<h3 class="h6 fst-italic fw-bold">Medical</h3>
<ul>
<li>Implant controller and wireless power transmitter for a bone distractor implant</li>
<li> 16-channel electro-tactile stimulator. PC controlled FES stimulator with array of sensory stimulation electrodes</li>
<li>Vibration feedback device. For haptic feedback, potentially for stroke patients</li>
<li>Real-time gait analysis software. The first biomechanical application using real-time data from the Qualysis motion capture system</li>
<li>Dynamic Vestibular Acuity Test for Guy's and St Thomas' Physiotherapy Department</li>
<li>WiiFit Balance Assessment Widget, for Guy's and St Thomas' Physiotherapy Department</li>
<li>Direct cable input for neonatal ABR test, for the St George's Hospital Newborn hearing screening programme</li>
<li>Thermoluminescent dosimeter prototype for <span class="text-decoration-underline">TRUEInvivo Ltd</span></li>
</ul>
</div>
</div>
<div class="row mb-4">
<div class="col">
<h3 class="h6 fst-italic fw-bold">Other</h3>
<ul>
<li>Air quality measurement system for the <span class="text-decoration-underline">Global Centre for Clearn Air Research</span>, UniS</li>
<li>Logic Tutor for the Department of Electrical and Electronic Engineering, UniS</li>
<li>Reaction time box for School of Psychology, UniS</li>
<li>Wind Tunnel development of the <span class="text-decoration-underline">aerothermal and environmental flow tunnels</span></li>
<li>Electric ducted fan development for the <span class="text-decoration-underline">Centre for Aerodynamics and Flow</span></li>
<li>Design of lunar surface tribology, orbital assembly and planetary rover labs. for the UK Fair-Space Programme in collaboration with <span class="text-decoration-underline">3|10 studios</span></li>
<li>Software: Data aquisition, EMG, metronomes, filtering and gap filling apps. for various MSc/PhD students</li>
</ul>
</div>
</div>
<div class="row">
<div class="col text-center">
<h2 class="h4 text-uppercase fw-bold">Skills</h2>
<p class="fst-italic">I am mostly self-taught and will pick up and learn any tool needed for the task, whether it's a new piece of software, technical widget or a JCB</p>
</div>
</div>
<div class="row">
<div class="col">
<h3 class="h6"><span class="fst-italic fw-bold">Software and Programming Skills</span><span class="text-body-secondary"> in rough order of proficiency</span>
</h3>
<ul>
<li>Windows (from v 2.1 to date)</li>
<li>Microsoft tools (Word, Excel, Outlook, Powerpoint, Visio, Access, Onenote)</li>
<li>LabVIEW (from v 7.1 to 2020) - preferred high-level language</li>
<li>Embedded C compilers for PIC and Atmel microcontroller families</li>
<li>Assembly languages for PIC and Atmel microcontroller families</li>
<li>Proteus Virtual System Modelling, Electronics Workbench and Autodesk Eagle (Electronics CAD)</li>
<li>Visual3D and Qualisys Track Manager (Motion analysis and biomechanical modelling)</li>
<li>GitHub, VPNs, VNC and other general networking tools like wireshark etc</li>
<li>Case tools, Endnote Reference Manager</li>
<li>Matlab (Simulink and Stateflow)</li>
<li>Microsoft C, Ada, Basic, Python, HTML</li>
<li>MathCad, Derive and SPSS (maths and stats packages)</li>
<li>LINUX and DOS</li>
<li>AutoCAD and ProDesktop (Mechanical CAD)</li>
<li>Currently learning Dreamweaver for web design - needs practice!</li>
</ul>
</div>
</div>
<div class="row">
<div class="col">
<h3 class="h6 fst-italic fw-bold">Electronics Design, Development and Repair Skills</h3>
<ul>
<li>Analogue and Digital circuit design - more confidence with digital</li>
<li>Microcontroller systems design (PIC, Atmel, 68000, 8051, Arduino, Raspberry Pi)</li>
<li>Bluetooth, RF, RS232, SCI, I2C, TCP/IP, DC and stepper motor control, wireless power transmission, real-time data logging</li>
<li>Medical instrumentation, design for electromagnetic compatibility, GUI design and human-computer interaction</li>
<li>PCB Design: Through-hole, surface mount and multi-layer board design with Proteus or Eagle</li>
<li>PCB Printing: Wet etching with FeCl, milling and drilling, lacquers</li>
<li>PCB Assembly: Very confident soldering, de-soldering, use of heat guns, ovens, pick and place</li>
<li>PCB testing: Own PC-based oscilloscope, familiar with current clamps etc</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12 col-lg-7">
<h3 class="h6"><span class="fst-italic fw-bold">Mechanical Craft Skills</span><span class="text-body-secondary"> gained from a traditional toolmakers apprentice</span></h3>
<ul>
<li>Turning and milling (mannual and CNC)</li>
<li>Mechanical fitting incl agricultural machinery</li>
<li>Sheet metal work, bending and welding (oxyacetylene and arc)</li>
<li>Surface treatments (anodising, poweder coating)</li>
<li>Grinding, Jig boring and Gear-cutting</li>
<li>Heat Treatments (hardening etc)</li>
<li>Laser sheet metal cutting</li>
<li>Conventional and NC/CNC planning and operation</li>
<li>Forging (dabbled)</li>
</ul>
</div>
<div class="col text-lg-center">
<p>Soldering surface mount LEDs onto a prototype logic demonstrator board</p>
<embed src="content/papers/surface-mount-soldering.mp4" type="video/mp4">
</div>
</div>
<div class="row">
<div class="col">
<h3 class="h6 fw-bold fst-italic">Craft and DIY Skills</h3>
<ul>
<li>Woodworking, residential plumbing, mains electrical installation</li>
<li>PAT Testing and the management of PAT testing systems</li>
<li>Ground work</li>
<li>Painting, decorating</li>
</ul>
</div>
</div>
<div class="row">
<div class="col">
<h3 class="h6 fw-bold fst-italic">Space Design</h3>
<ul>
<li>Workshop, office and laboratory layout and design</li>
<li>Project management using the RIBA Plan of Work (Royal Institiute of British Architects). For example</li>
</ul>
</div>
</div>
<div class="row mb-lg-4">
<div class="col">
<a href="content/papers/fairpsacelabs.png"><img src="content/papers/jpg.jpg" width="31" height="48" alt="[This is required]" loading="lazy"></a>
<a href="content/papers/enflo_layout.png"><img src="content/papers/jpg.png" width="31" height="48" alt="[This is required]" loading="lazy"></a>
</div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
Notes:
I hope this helps.