FreewayTalk

8 replies to this thread. Most Recent

Robert Mitton

6 Jun 2019, 7:08 am

[Pro] https://lightningmobileelectric.com/

Hello there, hope everyone is doing well.

I was asked to build a new website for a client and they want a “hero” banner video. I took their RAW video and converted and compressed it into three web usable files, mp4, webm, and ogg. Using Walter’s VideoBackground Action.

Having problems, one it won’t load in Safari because it is lacking the QT 7 plug-in!

In all the other web browsers Firefox, Chrome, Epic and Opera the video loads, however, its placement is above 200 or more pixels below the top, though I have the image frame/action at the very top. Also, the entire rest of the webpage is completely black or blocked out since I have HTML text below the video and it is not appearing, even in the source code! The page background color is set to white.

The text reads: Testing some text.

Also, I would like for the video to always start automatically, NOT show the controls and to loop.

I am wondering if this might be easier and better by properly embedding a YouTube video? And if so, how to do so with all the settings mentioned above, please?

And since I started this post my server at Hostgator has seemed to gone down!

Any and all help appreciated!

Thanks,

Robert

VideoBackground problems and ???

Robert Mitton

6 Jun 2019, 8:17 am

I found an article that might help this situation, but I am not a code person whatsoever and therefore I do not know how to do what might be an easy task.

https://howtogetonline.com/how-to-embed-a-hero-background-video.php

This is the mark up item script:

<div id="hero">
<div class="videoContainer">
<iframe class="videoContainer__video" width="x" height="y" src="https://youtu.be/Nz9QnOm7vUg/to/video/embed" frameborder="0">
</iframe>
</div>

</div>

and this is the CSS style:

.videoContainer { position: absolute; width: 100%; height: 100%; top: 0; left: 0; bottom: 0; right: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } #hero { position: relative; } iframe { /* optional */ width: 100%; height: 100%; }

The problem is that I can not figure out how to enter/import the CSS???

And would this solution work? And if so, is there anything that should be done to make to play automatically, hide the controls and loops?

Thanks again,

Robert

Robert Mitton

6 Jun 2019, 9:23 am

The first attempt is me using my server space on Hostgator

The next two are trying to use YouTube and some scripts, but no luck yet. I just do not understand code.

https://lightningmobileelectric.com/videotest2.html https://lightningmobileelectric.com/videotest3.html

Eventually, I think we will get there.

waltd

6 Jun 2019, 11:39 am

On Jun 6, 2019, at 3:08 AM, Robert Mitton <[email protected]> wrote:

Hello there, hope everyone is doing well.

I was asked to build a new website for a client and they want a “hero” banner video. I took their RAW video and converted and compressed it into three web usable files, mp4, webm, and ogg. Using Walter’s VideoBackground Action.

Having problems, one it won’t load in Safari because it is lacking the QT 7 plug-in!

Looking at the Action code, I can’t figure why that would be happening. The Action doesn’t use QuickTime, only native HTML5 video. How did you create/prepare/compress the video files for your background element?

In all the other web browsers Firefox, Chrome, Epic and Opera the video loads, however, its placement is above 200 or more pixels below the top, though I have the image frame/action at the very top. Also, the entire rest of the webpage is completely black or blocked out since I have HTML text below the video and it is not appearing, even in the source code! The page background color is set to white.

The text reads: Testing some text.

Also, I would like for the video to always start automatically, NOT show the controls and to loop.

Browsers have their own defaults in this area. In the Action, I set the audio to muted, and the autoplay and loop to on. I omit the controls parameter, which is how you set the controls to not appear according to the HTML5 spec. If the browser overrides that, they are out of spec. See more here: https://stackoverflow.com/questions/14161516/html5-video-completely-hide-controls

I am wondering if this might be easier and better by properly embedding a YouTube video? And if so, how to do so with all the settings mentioned above, please?

YouTube video will always show the YouTube controls and overlay. Do you really want some random ad for deodorant covering your site?

Walter

And since I started this post my server at Hostgator has seemed to gone down!

Any and all help appreciated!

Thanks,

Robert

VideoBackground problems and ???

Freeway user since 1997

http://www.walterdavisstudio.com

Robert Mitton

8 Jun 2019, 6:51 am

Looking at the Action code, I can’t figure why that would be happening. The Action doesn’t use QuickTime, only native HTML5 video. How did you create/prepare/compress the video files for your background element?


I’ve been using Miro Video Converter for taking RAW video and convert it into a much smaller mp4 file and also use it to convert to the other video format. I’ve never had a problem with it, but then again I have never used one of the files like this.



YouTube video will always show the YouTube controls and overlay. Do you really want some random ad for deodorant covering your site?

Walter



Yeah, I though maybe there was a way to do the YouTube thing without the ads, but no. They don’t want that. However, they decided to go with someone that builds WordPress “websites” and knows nothing about SEO other than Yoast.

Robert Mitton

8 Jun 2019, 8:08 am

So I decided to try another compression and video editor. The RAW video file is 145 MB and with Cisdem Video Converter it is now down to 10.7 MB! And this file is behaving much better!

However, it is not doing what I was expecting because I have it inside of an HTML box that is 1200x671 and that is what I want to keep it at. I would like to keep it within a website that is set for 1200 pixels wide. With what I have going on now, how would I get that to happen, please?

And thank you Walter!

Robert Mitton

8 Jun 2019, 8:43 am

And here is a curious thing. I can not get the watermark to show up and I have made several different watermarked videos now, I can not get this to show up on the internet via the website. However, the watermark shows up perfectly just going to were it sits on the server: https://lightningmobileelectric.com/Resources/GoPro-LME-exterior-lighting-Wal-Mart3.mp4

And idea what is happening here? It’s pretty odd to me.

Once again thanks to all!

Robert Mitton

8 Jun 2019, 9:51 am

Even more curious, the last video’s watermark was made by using the video editor Cisdem Video Converter’s text editor. So this attempt I actually imported a png into the video via the same video converter and still it does not show up on a webpage!

https://lightningmobileelectric.com/videotest1.html https://lightningmobileelectric.com/Resources/GoPro-LME-exterior-lighting-Wal-Mart6.mp4

????

Back to Top

waltd

8 Jun 2019, 12:18 pm

The two other formats (Ogg/Vorbis and WebM) are both 404. Further, the WebM video has a .mov file extension, which is wrong. It should have a .webm file extension.

The MP4 video is there, with the proper logo/text overlay, but it’s not being displayed by Safari. What I see at the page in question is only the static JPEG image. The video tag code is written out correctly, the CSS is correct to place it “behind” the page, but the video tag references missing files.

For a start, try making a new Freeway document, with a new Site Folder elsewhere on your Mac, and re-convert the video. See if you can get all four files to upload to your server: .mp4, .webm, .ogv, and .jpeg. Make sure they are all there where the HTML file says they should be.

Walter

On Jun 8, 2019, at 5:51 AM, Robert Mitton <[email protected]> wrote:

Even more curious, the last video’s watermark was made by using the video editor Cisdem Video Converter’s text editor. So this attempt I actually imported a png into the video via the same video converter and still it does not show up on a webpage!

https://lightningmobileelectric.com/videotest1.html https://lightningmobileelectric.com/Resources/GoPro-LME-exterior-lighting-Wal-Mart6.mp4

????

Freeway user since 1997

http://www.walterdavisstudio.com