Is there any possible way to do this without JavaScript? (was without id)

HTML & CSS
1

My Code: https://jsfiddle.net/n0s5o9tw/2/

My question is, is there any possible way to use this code without an id?

Is there another way to do this code without using, getElementById?

<div onclick="thevid=document.getElementById('thevideo'); thevid.style.display='block'; this.style.display='none'">

<a style="display:inline-block;background-color:orange; width: 256px; height: 256px; cursor: pointer; border-radius:50px; border: 5px solid #33B927;"></a>
</div>

<div id="thevideo" style="display: none;">
<iframe width="256" height="256" src="https://www.youtube.com/embed/'" style="background-color:#000000;width: 256px; height: 256px; cursor: pointer; border-radius:50px; border: 5px solid #711B93;"frameborder="0" allowfullscreen></iframe>
</div>
2

You could change the ID to a class if you like, and then there are various ways to target it. My go-to option is usually querySelector(.thevideo) or querySelectorAll(.thevideo).

3

Can you show me examples in JSFiddle? Would this be by using html, or CSS?

4

Before we go to solutions, I think that we need to understand the problem better.

Why are you not wanting to use an id. What problems are you having with it?

5

I have cleaned up the code by separating out the CSS and Scripting, which results in much improved code that is vastly easier to work with and maintain. See https://jsfiddle.net/n0s5o9tw/3/ for an example.

The HTML:

<div id="activateVideo">
  <a></a>
</div>

<div id="theVideo" class="hidden">
  <iframe src="https://www.youtube.com/embed/'" frameborder="0" allowfullscreen></iframe>
</div>

The CSS:

.hidden {
  display: none;
}
#activateVideo a {
  display: inline-block;
  background-color: orange;
  width: 256px;
  height: 256px;
  cursor: pointer;
  border-radius:50px;
  border: 5px solid #33B927;
}
#theVideo iframe {
  background-color: #000000;
  width: 256px;
  height: 256px;
  cursor: pointer;
  border-radius:50px;
  border: 5px solid #711B93;
}

And the JavaScript:

var activateVideo = document.getElementById("activateVideo");
var theVideo = document.getElementById("theVideo");

function toggle(el) {
  el.classList.toggle("hidden");
 }
 
function videoHandler(evt) {
	toggle(activateVideo);
  toggle(theVideo);
}

activateVideo.addEventListener("click", videoHandler, false);
1 Like
6

Can you do this with inline css or html, or do you have to use java script?

7

That’s a good question - I’ll move this thread over to the HTML/CSS forum so that experts there can weigh in on the subject.

8

Styling and structure (that is, CSS and HTML) is not a problem. Now, can a video behave like a video and play without Javascript?

I think not but I never tried. My reasoning is that neither CSS or HTML capture user actions beside the click on a link. Now, CSS3 and HTML 5 is something that I need to look at seriously, because I know it adds a whole bunch of stuff that I haven’t needed so I didn’t look at it.

And one of those things included in HTML5 is the video tag.

I’m curious why so much inline CSS though. In general, it is very early 90’s and, what is more important, very inefficient way to use CSS. Makes you work so much harder

9

You could do this with CSS using the :target pseudo-class, although this wouldn’t work with inline styles AFAIK; also you’ll need the ID as a fragment identifier.

CSS

#activateVideo {
  display: inline-block;
  background-color: orange;
  width: 256px;
  height: 256px;
  cursor: pointer;
  border-radius:50px;
  border: 5px solid #33B927;
}

#theVideo {
  display: none;
}

#theVideo iframe {
  background-color: #000000;
  width: 256px;
  height: 256px;
  cursor: pointer;
  border-radius:50px;
  border: 5px solid #711B93;
}

#activateVideo:target {
  display: none;
}

#activateVideo:target ~ #theVideo {
  display: inline-block;
}

HTML

<a id="activateVideo" href="#activateVideo"></a>

<div id="theVideo">
  <iframe src="https://www.youtube.com/embed/'" frameborder="0" allowfullscreen></iframe>
</div>

Here’s a fiddle. May I ask why you’d want to use inline styles though? Usually you’ll only apply inline styles for dynamically generated CSS like e.g. animation.

1 Like
10

Main reason would be familiarity with that code format.

11

Yes, I just read about that in your other thread. Well, if you want to stick to inline-styles only, then no, there’s no way to do this I’m afraid. :-\ I’d strongly suggest not to limit yourself by deliberately maintaining bad coding practices… also, what @PaulOB said of course.

2 Likes
12

Maybe it’s time to start familiarising yourself with better, more contemporary, useful and maintainable coding formats.

2 Likes
13

Can we introduce him to some of those improvements here?

1 Like
14

Yes!.. if he is interested in learning.

1 Like
15

This guy has no interest whatsoever in learning modern methodology - period. :mask:

He started another thread…

How do you add target=“_blank” to this code?

…fully twelve hours after you made this post. :scream:

“You can lead a horse to water, but you can’t make him drink” :alien:

coothead

1 Like
16

As well as this one:-
How would I get inline style links to work?
The title says it all. :rolling_eyes:

1 Like
17

Hi there @SamA74,

:scream:

Perhaps an administrator should prevent
him/her from wasting our time any further. :ok:

coothead

1 Like
18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.