This is the only way I’m aware of. Does anyone know of any other ways this can be done using html code?
Are there any other ways to implement click image to play video through html only?
<div onclick="thevid=document.getElementById('thevideo'); thevid.style.display='block'; this.style.display='none'">
<img src="vidthumb.jpg" style="cursor:pointer" /></div>
<div id="thevideo" style="display:none">
</div>
Hi there asasass,
here is an HTML/CSS method…
[code]
untitled document body { background: #000; } #cb { display: none; } label { display: block; width: 9em; line-height:1.8em; border: 0.06em solid #666; border-radius: 0.5em; background: linear-gradient(to bottom, #fff, #999); text-align: center; cursor:pointer } label:before { content: 'show youtube'; } iframe { display: none; width: 40em; height: 28.5em; margin: auto; border: 0; } #cb:checked~label:before { content: 'hide youtube'; } #cb:checked~ iframe { display: block; } [/code]coothead
I was looking for something that was purely html only.
Please be careful not to hold your breath whilst looking. 
coothead
You realize that the code that you posted as an example is NOT PURE HTML, don’t you? (Not sure what you consider “PURE HTML”, so maybe I shouldn’t say that.) We’re just going from your example and cleaning it up a tad.
What I mean, or meant was, any code that would work on this type of site? http://htmledit.squarefree.com/ I would call that pure html, what would you call it?
I would call it HTML with CSS properties written inline.
Why is it important that your code work in that particular site? Is that how you write and test your code? Is this a project that you are developing? or what?
I’m just more familiar with that type of code set, I understand it better.
Believe it or not, I understand what you mean. I felt that way for a few weeks when I was first learning how to integrate CSS with my HTML. However, after writing more and longer pages, I realized that I was causing myself a miserable amount of additional work by using inline styles so I forced myself to write the CSS separately and put it between <style> tags in the <head> of the page. It was like unlocking the secret power of CSS. I found that reading the code and modifying it was a thousand times easier than using inline styles. I am a bit stubborn about changing certain ways of doing things that I’m comfortable with, I like my ruts, but changing the way I wrote CSS was “life changing” (literary exaggeration), totally worthwhile.
Today, I write code with a common text editor and test using various browsers. There’s no better way. 
I’m afraid that you won’t find anyone (or anyone who knows what they are doing) here willing to offer bad code practices and inline styling is the worst practice of all unless there is a specific reason for it (e.g. you are limited to inline code by your system).
You don’t seem to have clarified why the code must be inline other than that’s because you like it. … and that’s not a good enough reason to do it wrong.
I checked the website you mentioned, <style> elements do work on it.
In fact, the example code actually works on it.
style elements are for testing your styles before you move them into the external stylesheet - you should never actually implement them in a live page because then when someone wants to visit 100 pages on your site they have to download the styles 100 times instead of only once - and that will make your pages so slow to load that they wiill go elsewhere instead.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.