Update iWeb videos?

Report · Feb 08, 2018

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

Report · Feb 09, 2018

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

<!doctype html>

<head>

<title>Video Demo</title>

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

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', '\

<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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Feb 09, 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

Report · Feb 09, 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.

<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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Feb 09, 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

Report · Feb 09, 2018

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.

Wappler, the only real Dreamweaver alternative.

Report · Feb 10, 2018

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?

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Feb 11, 2018

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

Report · Feb 11, 2018

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

Apparently, your media source is coming from JavaScript.

writeMovie39();
--></script>

With this as the result:

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

</video>

</audio>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Feb 12, 2018

Hi, Nancy

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

Best wishes,

Kevin

Adobe Community

Update iWeb videos?

1 Correct answer