9 Replies Latest reply on Feb 12, 2018 7:08 AM by KevinB9

    Update iWeb videos?

    KevinB9 Level 1

      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

        • 1. Re: Update iWeb videos?
          Nancy OShea Adobe Community Professional & MVP

          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>

          1 person found this helpful
          • 2. Re: Update iWeb videos?
            KevinB9 Level 1

            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

            • 3. Re: Update iWeb videos?
              Nancy OShea Adobe Community Professional & MVP

              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

              • 4. Re: Update iWeb videos?
                KevinB9 Level 1

                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

                 

                • 5. Re: Update iWeb videos?
                  BenPleysier Adobe Community Professional & MVP

                  I usually upload the video to YouTube and embed it into my document like

                   

                  <!DOCTYPE html>
                  <html lang="en">
                  <head>
                  <meta charset="utf-8">
                  <meta http-equiv="X-UA-Compatible" content="IE=edge">
                  <meta name="viewport" content="width=device-width, initial-scale=1">
                  <title>Untitled Document</title>
                  <!-- Bootstrap CSS -->
                  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
                  </head>
                  <body class="container">
                  <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
                  </div>
                  </body>
                  </html>
                  

                   

                  Copy and paste the above into a new document and view in browser.

                  • 6. Re: Update iWeb videos?
                    Nancy OShea Adobe Community Professional & MVP

                    KevinB9  wrote

                     

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

                     

                    It should be in your source code.   What's the URL to one of your problem pages?

                    • 7. Re: Update iWeb videos?
                      KevinB9 Level 1

                      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

                      • 8. Re: Update iWeb videos?
                        Nancy OShea Adobe Community Professional & MVP

                        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>

                        • 9. Re: Update iWeb videos?
                          KevinB9 Level 1

                          Hi, Nancy

                           

                          I think you are right about the Javascript. Thank you. I will try the fix as you suggest.

                           

                          Best wishes,

                          Kevin