I created this single page site (https://pixelwatch-bycliff.web.app/) using HTML, CSS and JS but I thought of going extra by adding this video clip (https://www.pexels.com/video/multi-colored-vapor-1943483/) to the text (Wear OS) so the text would be vibrant while coming to life with the video. PS: I've tried doing it myself but can't get it to work, any help right now would be greatly appreciated.
Link to the files on github: https://github.com/ManLikeCliff/pixelwatch-bycliff
click to view the text
I think there are two ways for you to achieving it.
Making the text with overlayed on the video as .gif format. That is, you are basically inserting image file.
I believe you wanted to do with CSS. Then, you might as well think of layout wisely.
First, make your video goes back to the text. In this case, video could be set as a background. Then, give z-index to the overlay text above by giving position: absolute; attribute.
If you want, you may check here
Related
I want to make an iframe of this https://rustypipe.deepraven.co/video/8ci2hj7CSHI/ (which is a random youtube video). However I do not want for the search bar or the rustypipe logo to be seen. I want the iframe to be only focused on the video.
How do I achieve this with html and css?
This is what I mean:
I do not want this.
I want this.
UPDATE: I need it to be an iframe.
Add a <p> tag right above the <a> tag. Set the background to white, position absolute, and give it an appropriate width and height and there ya have it:
After, you can also use after css transform properties like scale to get to the size you want. Let me know if you have any questions!
Here is a screenshot of the additional tag in the HTML and the classes set on it
Let me know if that makes sense. We're basically just taking a white strip and putting it over the part we don't want.
Don't use my exact measurements, i'm sure you will find the perfect ones for yours :)
Unless you really need the iframe, you could embed only the video (copy the <video> tag from the website).
Most Browsers let you right click on the DOM Node in the inspector (press F12 to get there) and copy the HTML.
Inside the <video> tag, there are links to the video source, so you don't have to download the video.
If you do need the iframe, you will probably have to render the whole content (not a big deal for your case) and zoom into the part, that you want to see.
Here is a thread about that. The bottom comment also mentions this blog post.
I managed to add embedded assets to htmlText of my TextArea like described here (Sly_cardinal's post, currently the third one):
Unable to access embedded images in htmlText
But all the images appear in the top left corner (overlayed)!
Interesting is that the place where the images should be, is actually empty and the text wraps around it, like they were there. But they are all in the corner.
I'm using large p tags for the text and all html displays perfectly where it should be. My only problem are these images.
Hope somebody has at least an idea. Thanks.
P.D. sorry for not showing code, it's cluttered at the moment with other things. But I hope the description is enough to get some useful tips.
P.D. 2. I did a test now with exactly the same code but using normal path to png file instead of asset and that works!.
Is there a way to display an image on a webpage such that it won't be copied if the surrounding text is copied?
For instance, I'd like to be able to put a diagonal up arrow after hyperlinks opening in a new window, but I'd like users to be able to copy the link with its surrounding content without copying the up arrow image.
Possible without extravagant CSS?
EDIT: I don't care if the user has access to the image, I just want a streamlined copy-paste experience.
You could use a background image in the CSS of an element like a <div>, but if they want a copy of the image there are still ways of getting it.
If you use a CSS background-image on a div for example, it will not get copied.
Use div and background image for that div, if you can.
i have a image that i don't want it drag-able or selectable so that no drag to other places on the page. how is that done?
If you want your visitors/users to see the resource on your page there is no way to stop them downloading it or saving it.
Possible options:
You can use JavaScript to prevent the context-menu popping up on right-click (related article: http://javascript.about.com/library/blnoright.htm).
You can cover the image with a transparent .png or .gif so that clicking on the image simple returns the transparent image.
But if the user can see the image on the webpage then it's already on their computer.
In reality this is far harder than you may think it will be, I assume you don't want people stealing your images which is a fair enough thing but just remember all the different ways in which someone can get an image from a web site. Your can catch the right click event and stop them at least doing that, but they can always just take a screenshot and save that instead. This is a slippery slope and it always ends the same way, if they really want to steal it, they're going to.
Since the image is just a binary data, and all the data is written on client PC's, for displaying reason it's up to th euser what they'll do with the data. There's no way you can prevent them from saving the picture displayed on a website.
All you might do is make it a little bit harder, by blocking right clicking on image, (displaying alert on right click, or something like this). But if the user really wants to save the picture they will do this anyway.
Why should you do it?
I can suggest a javascript that will able it: http://www.brownielocks.com/stopcopying.html
But every one, even with little experience can view the source and copy it. and even if you block them from viewing the source, they can use wireshark and get the picture directly. Even if you use flash to show the picture one can screen-capture the screen and retrieve the picture.
Put a watermark on the picture and use http://www.tineye.com/ from time to time and search for your picture. If you find others that use your picture - sue them. It is the most effective way.
It is impossible to prevent someone to store an image (or other resources) on their computer as others already have mentioned.
But another trick to make it harder (impossible for inexperienced people I guess) is to use CSS and background images:
<div style='background: url("myimage.gif");'></div>
The image is now on the background of the <div> block and cannot be dragged or right clicked in order to save it.
Using some coding knowledge it is possible to ind out the myimage.gif part, which can be added after the base URL in order download the image and save it. For example if the HTML page is at http://www.example.com/mypage.html the image could be found at http://www.example.com/myimage.gif
As I mentioned it is still possible to save the image, but for inexperienced people it is a lot harder.
Note: In this example the image is just put in the HTML tag, but with proper use of a CSS file, it is even harder to find for inexperienced people.
You cannot prevent a user from saving something from the web to his PC. The nearest thing that comes to my mind is the -moz-user-select CSS property... https://developer.mozilla.org/en/CSS/-moz-user-select
This javascript snippet does exactly what OP asks:
document.addEventListener("dragstart", preventDrag);
function preventDrag(event) {
event.preventDefault();
}
First off, I would like to say that myspace is a pain. But, musicians love it, and I can make some money doing layouts for them. I overlayed a layer of .png's over myspace's original look, but need to utilize the myspace music player. So, I made a picture frame that surrounds the myspace player that has a transparent center so you can see the myspace player. unfortunately, the player doesn't have full functionality. It seems to respond correctly when I hover, but not when I click. does anyone know how to solve this problem?
You can see what I'm talking about here: myspace.com/gprettydesigns
add
pointer-events: none;
on your overlay to alow click events to pass through it. It's a fairly recent property so not all browser may understand it.
More informations on pointer-events on https://developer.mozilla.org/en/css/pointer-events
The best way would generally be to slice the image up into pieces and place them so that nothing overlays the music player.
Maybe you could use z-index to position the image underneath the player, more on this here: http://www.echoecho.com/csslayers.htm
Put the background image on a div then use z-index to position it behind the player. The advantage of putting a background image on a div and using z-index is that it'll be faster than using an actual inline image.
Clap clap clap to you! I've done sone MySpace tweaking and know it's a real PITA.
Change the CSS here:
#shell {
visibility:hidden;
z-index:200;
}
I don't remember if this is feasible or if they only accept inline CSS.
Not really question related but now you can also have bandpages on facebook via RootMusic. MySpace will probably be overrun in no time so I would also give them a look.
Good luck dealing with the spaghetti tables of MySpace.