nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

video html tag

NFlourish

Our client really wants to have a video underlay as part of the hero/banner when you arrive at the site. It appears that the "video" tag is not supported by the Hub text card widget.

Am I correct, and what is the chance we can actually get the video tag added to the supported tags so it isn't stripped from our saved site?

Trouver plus de publications taguées avec

Accepted answers

BrianRollison

Hi Nicholas Floersch‌ -- yes they are, changelog was updated yesterday
ArcGIS Hub

All comments

NFlourish

This has been fixed! Yay!

A demo of it working is shown here:

TechDemo

Anonymous User

We'll look into it.

FWIW, our design team says auto play background violates WCAG 2.1 - Understanding Success Criterion 2.2.2: Pause, Stop, Hide

NFlourish

Graham Hudgins‌ - here is a live example of the video tag not working. TechDemo

What surprises me is that it saves the video tag in the source of the text card, so when I got to edit the card, the video tag is there. But when rendered, we can inspect the page and see no video tag is rendered.

NFlourish

Graham Hudgins‌ - this code is what we're trying to get going. 
I think the <section> tags are also a problem, but those are easy to replace with DIVs. 
The Video tag, though seems to be totally ignored as soon as you exit editing the text card.

<style>
body {
  background: #CCC;
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif; }nav {
  background: #333;
  color: #FFF;
  font-weight: bold;
  height: 50px;
  padding: 20px;
  text-transform: uppercase;
  text-align: center; }.masthead {
  height: 800px;
  position: relative;
  margin: 0;
  padding: 0; }.fullscreen-bg {
  height: 100%;
  overflow: hidden;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0; }.fullscreen-bg__video {
  background-position: center;
  object-fit: cover;
  object-position: 50% 50%;
  height: 100%;
  width: 100%; }.overlay {
  color: #FFF;
  margin: auto;
  position: absolute;
  padding: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5); }
  .overlay h1 {
    font-size: 48px;
    margin: 0;
    padding: 0; }
  .overlay p {
    width: 90%;
    margin: auto;
    padding: 0 0 30px 0; }
  .overlay button {
    background: #00a8e7;
    color: #FFF;
    font-size: 14px;
    font-weight: bold;
    border: 0;
    padding: 15px 40px; }.content {
  padding: 10px; }@media (max-width: 767px) {
  .fullscreen-bg {
    background: url("img/coast.jpg") center center/cover no-repeat; }
  .fullscreen-bg__video {
    display: none; } }</style>
</head>
<body>
<nav>
  <p>navigation</p>
</nav>
<section class="masthead">
    <div class="fullscreen-bg">
      <video loop muted autoplay poster="http://www.stone-env.net/permian/coast.jpg" class="fullscreen-bg__video">
          <source src="http://www.stone-env.net/permian/coast.webm" type="video/webm">
          <source src="http://www.stone-env.net/permian/coast.mp4" type="video/mp4">
      </video>
    </div>
    <div class="overlay">
      <h1>TITLE</h1>
      <p>Cool Science Title</p>
      <button>Explore the data</button>
    </div>
</section>
<section class="content">
  <h2>This is a sub heading</h2>
  <p>This is a paragraph.</p>
</section>

Anonymous User

one more thing - you mind sending us an example HTML of what you're trying

Anonymous User

We'll look into this - thanks for telling us!

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.