Skip to main content
K
KevinB9
Inspiring
February 9, 2018
Answered

Update iWeb videos?

  • February 9, 2018
  • 2 replies
  • 1577 views

Hi. Back in 2009 I authored a website using the click and drag (really easy) methods in iWeb. iWeb is no longer supported by Apple and my videos are no longer HTML5 compliant. Here is an example of the source code for one of my videos:

<div id="id25" style="height: 207px; left: 563px; position: absolute; top: 7324px; width: 354px; z-index: 1; " class="style_SkipStroke shape-with-text">
   <div class="text-content graphic_textbox_layout_style_default_External_354_207" style="padding: 0px; ">
   <div class="graphic_textbox_layout_style_default">
   <p style="padding-top: 0pt; " class="paragraph_style_14"> The Busters - 1997<br /></p>
   <p class="paragraph_style_14"><br /></p>
   <p class="paragraph_style_9"><span class="style_2">Ok, this is a different song, but it shows the extent to which the term, “Rum and Coca Cola” is recognized all over the world as a shorthand description of tropical pleasures.<br /></span></p>
   <p class="paragraph_style_9"><br /></p>
   <p class="paragraph_style_4">This clip features some very nice horn work from this German ska band at the E-Werk concert in Cologne.<br /></p>
   <p class="paragraph_style_4"><br /></p>
   <p style="padding-bottom: 0pt; " class="paragraph_style_4">When I’m depressed I listen to this version. Snaps me right out of it.</p>
   </div>
   </div>
   </div>

I understand I need to use the <video> tag to be HTML5 compliant. Can anyone suggest a shortcut way to update the video? Thanks.

Kevin Burke

Cambridge, Massachusetts

    This topic has been closed for replies.
    Correct answer Nancy OShea

    Hi, Nancy

    Here is the link:  versions

    Some of the files are MP4's and some are audio files. Let me know if you can see and hear them.

    I can tell you this - if you go to the trouble of restoring "disabled internet files" as recommended by Apple, you will be able to hear them, but I can't expect all my readers to take the time and trouble to do this.

    Once again, my goal is to rebuild this site using Dreamweaver.

    Thanks.

    K


    Apple discontinued their QuickTime player plugin because modern  browsers no longer support it.

    Apparently, your media source is coming from JavaScript.

    <script type="text/javascript"><!--

    writeMovie39();
    -->    </script>

    With this as the result:

    <object id="id95" type="video/quicktime" data="Media/le%20chat%20mort.mp4" style="height: 256px; left: 554px; position: absolute; top: 11295px; width: 320px; z-index: 1; " width="320" height="256"><param name="src" value="Media/le%20chat%20mort.mp4"><param name="controller" value="true"><param name="autoplay" value="false"><param name="scale" value="tofit"><param name="volume" value="100"><param name="loop" value="false"></object>

    You would need to remove all instances of the JavaScript and replace it with <video> or <audio> tags as follows:

    <video control="control">

    <source poster="YOUR_POSTER_IMAGE.png" src="Media/le%20chat%20mort.mp4" type="video/mp4">

    </video>

    <audio controls>

    <source src="YOUR_AUDIO.mp3" type="audio/mp3">

    </audio>

    2 replies

    K
    KevinB9Author
    Inspiring
    February 9, 2018

    Hi, Nancy

    Thank you as always. My problem is that I am a web developer only a couple days out of the year and I forget everything I learned the year before. A recipe for disaster. I am a historian and musicologist.

    I don't get what you mean by starting a "new, blank document". I don't want a new document. I want to correct my current document. It would take months if not years to recreate my site from scratch. (www.rumandcocacolareader.com)

    Let me restate the problem: I have a huge academic website authored in iWeb. It has about 40 video and sound files. These files can no longer be read by modern browsers. According to Apple I have to go into the code and change the <embed> tag to the <video> tag in order to be HTML compliant, but when I look at the code I can't see any <embed> tags!

    My basic strategy (I think) should be to copy all the code from the old iWeb site, paste it into a new Dreamweaver document and then go about changing the code one tag at a time to make the videos and sound files HTML compliant - right?

    K

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    February 9, 2018

    iWeb didn't generate great code.  And what you've posted contains no reference to video.  It's just CSS and paragraph text.    The code I posted above is an HTML5 document with a responsive video. 

    <!--CHANGE MP4 AND POSTER IMAGE TO YOUR OWN-->

    <video src="https://clips.vorwaerts-gmbh.de/VfE_html5.mp4" poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/poster.png"></video>

    \

    Nancy

    Nancy O'Shea— Product User & Community Expert
    K
    KevinB9Author
    Inspiring
    February 10, 2018

    Hi, Nancy

    I'm still looking for a solution.

    iWeb didn't generate great code.

    Ok, but iWeb allowed millions of us to put our hearts and ideas on the web without getting bogged down in code. The internet is a channel, not an obstacle. Have you seen my site?

    And what you've posted contains no reference to video.  It's just CSS and paragraph text.  

    Right! Where the heck is the video or the imbed?

    The code I posted above is an HTML5 document with a responsive video.

    Yes but I can do that by starting from scratch in Dreamweaver. But how do I retrofit my iWeb code? there must be millions of people in the same boat. I have looked at lots of tutorials but they all reference third party apps which have their own learning curve.

    Best wishes,

    K

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    February 9, 2018

    Copy & paste this code into a new, blank document.  The Play Button is an SVG overlay.

    <!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>

    .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 MP4 AND POSTER IMAGE TO YOUR OWN-->

    <video src="https://clips.vorwaerts-gmbh.de/VfE_html5.mp4" poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/poster.png"></video>

    </div>

    <script>

    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— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices