Participant

Question

Floating video

Forum|Forum|2 years ago
April 23, 2024
2 replies
887 views

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

This topic has been closed for replies.

BenPleysier

Community Expert

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:

This page uses Bootstrap 5.3.3
A main element has been introduced to make it easier for assistive technology and search engines to find the main content
A heading (H tags) hierarchy has been used to create a proper document outline
CSS has been used to convert capiltalised words. Capitals in the code are a no-no for assistive technology
Filenames should not contain spaces. Hence I have replaced spaces with a dash (-)
Consistantly use lower case for image extensions. I have done so in the above code
This is what a mobile view looks like

I hope this helps.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Jon Fritz

Community Expert

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.

Graham36934197yhrnAuthor

Participant

This is the code. I am NOT an HTML programmer! The bold shows the video I have added.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Engineering</title>

a:link {text-decoration: underline; color:#444444;}

a:visited {text-decoration: none; color:#444444;}

a:active {text-decoration: none; color:#444444;}

a:hover {text-decoration: underline; font-weight: bold; color:#444444;}

a img { border: none; }

#container {

background-color: #FFF;

width: 87%;

height: auto;

margin-top: 0px;

margin-right: auto;

margin-bottom: auto;

margin-left: auto;}

#content {

font-family: "Calibri","sans-serif";

color:#444444;

background-color: #FFF;

text-align: justify;

font-size: 18px;

height: 80%;

line-height: 1.5;

padding-top: 24px;

padding-left: 44px;

padding-right: 44px;

padding-bottom: 44px;}

</style>

<!--

function MM_reloadPage(init) { //reloads the window if Nav4 resized

if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}

else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

}

MM_reloadPage(true);

//-->

</script>

</head>

ENGINEERING

PROJECTS DELIVERED

I have a wide range of practical

skills in electronics, mechanical engineering

and software from design to production, test and delivery.

Robotics

• Walking robot (1st year degree team project). Transistor controlled, wired

PC interface, mechanical design.

• 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.

• Line following robot mouse. PIC microcontroller controlled, IR and colour

sensors, featured on local BBC News as part of a schools competition.

• Robot football. Mobile robots that represented the UK internationally.

I re-designed and miniaturised the motor, sensor and comms. boards using

surface-mount components.

• Maze solving robot. PIC microcontroller controlled, sensors, motor controller.

Developed as a commercial kit for schools.

• Robotic survey vessel to survey UK coastal waters. With onboard side-scan

sonar, GPS, Wireless WAN, chemical sensor pod and winch.

• Development of lunar rovers for the <a href="https://www.surrey.ac.uk/surrey-space-centre">Surrey

Space Centre </a>

Medical

• Implant controller and wireless power transmitter for a bone distractor

implant

• 16-channel electro-tactile stimulator. PC controlled FES stimulator with

array of sensory stimulation electrodes

• Vibration feedback device. For haptic feedback, potentially for stroke

patients

• Real-time gait analysis software. The first biomechanical application

using real-time data from the <a href="https://www.qualisys.com">Qualysis</a>

motion capture system

• Dynamic Vestibular Acuity Test for Guy's and St Thomas' Physiotherapy

Department

• WiiFit Balance Assessment Widget, for Guy's and St Thomas' Physiotherapy

Department

• Direct cable input for neonatal ABR test, for the St George's Hospital

Newborn hearing screening programme

• Thermoluminescent dosimeter prototype for <a href="https://www.trueinvivo.co.uk">TRUEInvivo

Ltd </a>

Other

• Air quality measurement system for the<a href="https://www.surrey.ac.uk/global-centre-clean-air-research">

Global Centre for Clearn Air Research</a>, UniS

• Logic Tutor for the Department of Electrical and Electronic Engineering,

UniS

• Reaction time box for School of Psychology, UniS

• Wind Tunnel development of the <a href="https://www.surrey.ac.uk/centre-aerodynamics-environmental-flow/facilities">aerothermal

and environmental flow tunnels </a>

• Electric ducted fan development for the <a href="https://www.surrey.ac.uk/centre-aerodynamics-environmental-flow/research/electric-ducted-fan-propulsion">Centre

for Aerodynamics and Flow </a>

• Design of lunar surface tribology, orbital assembly and planetary rover

labs. for the UK Fair-Space Programme in collaboration with <a href="https://www.310studio.co.uk/university-of-surrey-fairspace-research-laboratory">3|10

studios</a>

• Software: Data aquisition, EMG, metronomes, filtering and gap filling

apps. for various MSc/PhD students

SKILLS

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

Software and Programming Skills

in rough order of proficiency

• Windows (from v 2.1 to date)

• Microsoft tools (Word, Excel, Outlook, Powerpoint, Visio, Access, Onenote)

• LabVIEW (from v 7.1 to 2020) - preferred high-level language

• Embedded C compilers for PIC and Atmel microcontroller families

• Assembly languages for PIC and Atmel microcontroller families

• Proteus Virtual System Modelling, Electronics Workbench and Autodesk Eagle

(Electronics CAD)

• Visual3D and Qualisys Track Manager (Motion analysis and biomechanical

modelling)

• GitHub, VPNs, VNC and other general networking tools like wireshark etc

• Case tools, Endnote Reference Manager

• Matlab (Simulink and Stateflow)

• Microsoft C, Ada, Basic, Python, HTML

• MathCad, Derive and SPSS (maths and stats packages)

• LINUX and DOS

• AutoCAD and ProDesktop (Mechanical CAD)

• Currently learning Dreamweaver for web design - needs practice!

Electronics Design, Development and Repair

Skills

• Analogue and Digital circuit design - more confidence with digital

• Microcontroller systems design (PIC, Atmel, 68000, 8051, Arduino, Raspberry

Pi)

• Bluetooth, RF, RS232, SCI, I2C, TCP/IP, DC and stepper motor control,

wireless power transmission, real-time data logging

• Medical instrumentation, design for electromagnetic compatibility, GUI

design and human-computer interaction

• PCB Design: Through-hole, surface mount and multi-layer board design with

Proteus or Eagle

• PCB Printing: Wet etching with FeCl, milling and drilling, lacquers

• PCB Assembly: Very confident soldering, de-soldering, use of heat guns,

ovens, pick and place

• PCB testing: Own PC-based oscilloscope, familiar with current clamps etc

<div id="Layer1" style="position:absolute; width:271px; height:257px; z-index:3; left: 767px; top: 2243px;">

Soldering surface mount LEDs onto a prototype logic demonstrator

board 

<embed src="content/papers/surface%20mount%20soldering.mp4" width="271" height="266" name="Test board"></embed>

</div>

Mechanical Craft Skills gained

from a traditional toolmakers apprentice

• Turning and milling (mannual and CNC)

• Mechanical fitting incl agricultural machinery

• Sheet metal work, bending and welding (oxyacetylene and arc)

• Surface treatments (anodising, poweder coating)

• Grinding, Jig boring and Gear-cutting

• Heat Treatments (hardening etc)

• Laser sheet metal cutting

• Conventional and NC/CNC planning and operation

• Forging (dabbled)

Craft and DIY Skills

• Woodworking, residential plumbing, mains electrical installation

• PAT Testing and the management of PAT testing systems

• Ground work

• Painting, decorating

Space Design

• Workshop, office and laboratory layout and design

• Project management using the RIBA Plan of Work (Royal Institiute of British

Architects). For example: <a href="content/papers/enflo_layout.PNG"> </a>

</a><a href="content/papers/enflo_layout.PNG"><img src="content/papers/jpg.PNG" width="31" height="40" border="0" /></a>

</div>

</body>

</html>

Jon Fritz

Community Expert

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">
Soldering surface mount LEDs onto a prototype logic demonstrator
board 

<embed src="content/papers/surface%20mount%20soldering.mp4" width="271" height="266" name="Test board"></embed>
</div>

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.