• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

responsive videos

Contributor ,
Feb 07, 2024 Feb 07, 2024

Copy link to clipboard

Copied

Hello.  I am still using dreamweaver and I used the Responsive Video Embed on the Insert Panel as seen below:

beng2000_0-1707335526656.png

 

The code looks like this:

<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="videos/firstpagevideoopt.mp4"></iframe>
</div>

The video is on my server.

It plays fine, but I cannot find a way to hide the video controls. Been trying for a while now.

There is a way to hide the controls in a html5 video tag, but I am having a rough time with the CSS for the video tag.

Any help will be greatly appreciated.

Ben

Views

287

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 07, 2024 Feb 07, 2024

Copy link to clipboard

Copied

https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_video2 

 

See if the above helps. If you don't want any controls then remove 'controls' from the <video> tag and replace with 'autoplay' without the '  '.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 17, 2024 Feb 17, 2024

Copy link to clipboard

Copied

Thank you.

 

I think what I need is animation on the website, not a video. I don't know how to incorporate animation in my designs yet, but I will learn.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 07, 2024 Feb 07, 2024

Copy link to clipboard

Copied

WHY?

Hiding player controls is annoying & not recommended for all sorts of reasons: 

  • It adversely affect user's access to media. 
  • It removes volume/mute/play/pause/fullscreen/replay/closed captioning.
  • Many people have autoplay blockers. They won't see anything.
  • Office workers who share space with co-workers need player controls.
  • Parents with a sleeping baby nearby need player controls.
  • Podcast listeners need a way to turn off competing media. 
  • In the absence of player controls, annoyed people will be forced to leave your site.

 

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 08, 2024 Feb 08, 2024

Copy link to clipboard

Copied

quote

 ln the absence of player controls, annoyed people will be forced to leave your site.

 


By @Nancy OShea

 

It's getting harder to find  a website that isn't annoying to some degree these days.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 08, 2024 Feb 08, 2024

Copy link to clipboard

Copied

quote

WHY?

Hiding player controls is annoying & not recommended for all sorts of reasons: 

  • It adversely affect user's access to media. 
  • It removes volume/mute/play/pause/fullscreen/replay/closed captioning.
  • Many people have autoplay blockers. They won't see anything.
  • Office workers who share space with co-workers need player controls.
  • Parents with a sleeping baby nearby need player controls.
  • Podcast listeners need a way to turn off competing media. 
  • In the absence of player controls, annoyed people will be forced to leave your site.

 


By @Nancy OShea

 

100% agree with Nancy on this. It's best to have controls. If you want to be able to customize your video without having to worry with the code and given that the bootstrap code you are using is out of date in DW, you may want to consider using the updated bootstrap code for videos, or consider a solution like Vimeo or Wistia that can provide you with easy to access controls and customizations for your videos.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 17, 2024 Feb 17, 2024

Copy link to clipboard

Copied

Hi Ben. I use Visual Studio Code as well.  In DW, I just put the links to Bootstrap 4 and delete the DW generated Bootstrap. Just want to be used to doing this.

 

I just learned Bootstrap 4 last year.  I know I need to use Bootstrap 5 now.  In your opinion, is there a high learning curve between 4 and 5.

 

Also, the sites I make with Bootstrap look like cookie cutter sites to me because of the top navbar. I am not sure how to make sites look differently with the navbar.  I would eventually like to design with code and not Bootstrap.

 

Furthermore, I know HTML5 and CSS but not JavaScript, so I'm doing a course from Udemy on JavaScript and SEO.  SEO has changed dramatically over the years.  I validate my sites, and I'm absorbing all info from Google Search Essentials.  

 

Thanks!

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 17, 2024 Feb 17, 2024

Copy link to clipboard

Copied

quote

In your opinion, is there a high learning curve between 4 and 5.

 

By @beng2000

 

No, not really.........all you're doing when using Bootstrap is just adding a bunch of default css utility classes. If you can copy and paste, parrot fashion, then you're good to go but are fairly limited in what you can do with a framework. Using frameworks of any kind will hold you back, in my opinion, as they tend to 'restrict' you from exploring outside the box given they only provide limited options, which, unless you can code, you are unlikely to be able to craft those options into something 'unique' or to your own requirements.

 

 

quote

 

Also, the sites I make with Bootstrap look like cookie cutter sites to me because of the top navbar. I am not sure how to make sites look differently with the navbar.  I would eventually like to design with code and not Bootstrap.

 

 

By @beng2000

 

Limited options, unable to code, leads to similar results, an over-reliance on a framework. Learn to code and break free to express yourself. It's positive that you are already thinking about the future and eventually lessening your dependence on a box of pre-formed components.

 

quote

Furthermore, I know HTML5 and CSS but not JavaScript, so I'm doing a course from Udemy on JavaScript and SEO.  SEO has changed dramatically over the years.  I validate my sites, and I'm absorbing all info from Google Search Essentials.  

 

By @beng2000

 

I highly recommend learning javascript, that's when you will leap up a whole flight of steps and gain a whole lot of independence. Javascript combined with html/css is when it all starts really coming together, you will be able to think of it and do it, rather than settling for second best. Don't forget a server side language like node.js, php, python etc will give you even more freedom and powers. Good luck, you're embarking on a journey of a life-time, which I've already been through.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 17, 2024 Feb 17, 2024

Copy link to clipboard

Copied

I think that you are wanting a background video, similar to what is shown here: Meet BunchOKids

This is how to add it to the site: Wappler Documentation - Adding Background Videos

This is a video on sidebar navigation using Bootstrap v5.3

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 17, 2024 Feb 17, 2024

Copy link to clipboard

Copied

Nancy, very good reasons NOT to take controls out.  Instead of videos with no controls, what I really want is animation. A small amount on the index page. A new thing to learn, which I don't mind.  Thanks!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 17, 2024 Feb 17, 2024

Copy link to clipboard

Copied

LATEST
quote

what I really want is animation. A small amount on the index page. A new thing to learn, which I don't mind.  Thanks!

By @beng2000

==========

Here you go...

 

Animated WebP maker:

https://ezgif.com/webp-maker

 

Video to WebP maker:

https://ezgif.com/video-to-webp

 

Anime.js JavaScript Animation Library (ver 3.2.2):

https://animejs.com/

 

Wow.js -- Reveal Animations on Scroll

https://wowjs.uk/

 

 

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 08, 2024 Feb 08, 2024

Copy link to clipboard

Copied

I'm not sure why you don't want the video controls, maybe they are intrusive for you? You know you can create a more descreet play button, which you can overlay onto the video, a bit like the youTube play button if that would be more suitable........shout out if you want an example.

 

As long as you don't have noise associated with the video onload then I think its OK to have it autoplay onload, many, many websites do that as its all about movement, animation these days, not static, motionless experiences! Unless I'm mistaken Chrome no longer has the ability to switch off autoplay unless it was re-instated in newer versions..........I think you can still switch off sound in the browser, however few will know how to do that and you can switch off your computer sound anyway if you're on the internet at work or home, if it's that annoying to you......but its still courteous to allow a visitor to choose sound on a video - autoplay should be optional, as long as its a muted video.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 08, 2024 Feb 08, 2024

Copy link to clipboard

Copied

People with Autoplay Blocking will not see video that contains an audio track.  It will be blocked such that they see only an empty space where the player should be.  See below for more about Media & Autoplay.

https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide

 

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 08, 2024 Feb 08, 2024

Copy link to clipboard

Copied

quote

People with Autoplay Blocking

 


By @Nancy OShea

 

The question is how many have autoplay blocking applied or a more pointed question is how many even know how to do it. In my experience no-one but geeky people, minorities mess around with their browser settings.

 

Some you win, some you lose  - that's always going to be the case, you can't please all of the people all of the time - either produce a fairly sedentary website, which is useless to most, or risk upsetting a minority and produce something a little more exciting - I don't have the definitive answer.

 

Does Chrome show and play the video assuming you can't block autoplay in that browser - at the last count that had 64% percent of the market, Firefox less than 3%

 

As I covered in an earlier post there's the option to switch off your computer sound whilst using the internet if youre that sensitive or are in an environment where sound may be disruptive, use it would be my advice!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 08, 2024 Feb 08, 2024

Copy link to clipboard

Copied

Autoplay blocking is the default setting on most mobile & some desktop browsers. 

 

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 08, 2024 Feb 08, 2024

Copy link to clipboard

Copied

quote

Autoplay blocking is the default setting on most mobile & some desktop browsers. 

 


By @Nancy OShea

 

Android autoplays a video by default, I don't know about the noise it makes though as I cant tell if the video on the website I'm currently viewing is muted by default or not, I guess it must be unless the android chrome browser does that job automatically. Chrome desktop will autoplay a video if its muted.......ok I'll deal with that because I'm not a great advocate of noise suddenly spewing out of your speakers. I dont see much wrong with autoplaying silent videos as an option whether the user likes it or not, so maybe browsers need to autoplay the video, even if its not muted by default, and do the job themsleves, I'm sure with the tech available today thats possibe.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 08, 2024 Feb 08, 2024

Copy link to clipboard

Copied

Read the Mozilla Developers article I posted above.  The perils & pitfalls are all spelled out there.

 

 

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 08, 2024 Feb 08, 2024

Copy link to clipboard

Copied

quote

Read the Mozilla Developers article I posted above.  The perils & pitfalls are all spelled out there.

 

By @Nancy OShea

 

There's too many perils and pitfalls associated with websites these days because of the advancement in technology and expectations - what next, l guess this animation stuff, things flying in left right and center as you scroll, will eventually drive users insane to the point browsers will be forced to bring in options to target those as well.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 17, 2024 Feb 17, 2024

Copy link to clipboard

Copied

LOL. You are probably right.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines