<div id="film">...</div>
<script>
jwplayer("film").setup({
width:640,
height:360,
playlist: [{
file: "https://videolink.mp4",
image: "https://videopic.jpg",
tracks: [{
file: "http://video.srt",
label: "English",
kind: "captions",
"default": true
}]
}],
captions: {
color: '#FFFFFF',
fontSize: 10,
backgroundOpacity: 50
}
});</script>
I want to hide this code when users view with right click "Page source". How can I do it?
example 720pizle.com/izle/altyazi/american-sniper.html there is no embed code or video link in source code
You can't totally hide it, but you could use a tool to make it slightly more difficult to read for someone who isn't that technical. However, anyone with basic technical knowledge will be able to figure out the actual embed code using a developer tool (such as the Chrome dev tools, Firebug, etc).
http://www.dynamicdrive.com/dynamicindex9/encrypter.htm
That will make the code harder to read.
It isn't 100% secure though.
For instance, your code:
<div id="film">...</div>
<script>
jwplayer("film").setup({
width:640,
height:360,
playlist: [{
file: "https://videolink.mp4",
image: "https://videopic.jpg",
tracks: [{
file: "http://video.srt",
label: "English",
kind: "captions",
"default": true
}]
}],
captions: {
color: '#FFFFFF',
fontSize: 10,
backgroundOpacity: 50
}
});</script>
Would turn into:
<script>
<!--
document.write(unescape("%3Cdiv%20id%3D%22film%22%3E...%3C/div%3E%0A%3Cscript%3E%0Ajwplayer%28%22film%22%29.setup%28%7B%0A%20%20%20%20width%3A640%2C%0A%20%20%20%20height%3A360%2C%0A%20%20%20%20playlist%3A%20%5B%7B%0A%20%20%20%20%20%20%20%20file%3A%20%22https%3A//videolink.mp4%22%2C%0A%20%20%20%20%20%20%20%20image%3A%20%22https%3A//videopic.jpg%22%2C%0A%20%20%20%20%20%20%20%20tracks%3A%20%5B%7B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20file%3A%20%22http%3A//video.srt%22%2C%20%0A%20%20%20%20%20%20%20%20%20%20%20%20label%3A%20%22English%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20kind%3A%20%22captions%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22default%22%3A%20true%20%0A%20%20%20%20%20%20%20%20%7D%5D%0A%7D%5D%2C%0A%20captions%3A%20%7B%0A%20%20%20%20%20%20%20%20color%3A%20%27%23FFFFFF%27%2C%0A%20%20%20%20%20%20%20%20fontSize%3A%2010%2C%0A%20%20%20%20%20%20%20%20backgroundOpacity%3A%2050%0A%20%20%20%20%7D%0A%7D%29%3B%3C/script%3E"));
//-->
</script>
But someone could un encrypt it using a tool, or just use Firebug, etc, to see the actual output.
Yes It is possible. create session variable in php and try to run video code
Related
I'm doing a Frontend Mentor challenge and I've ran into a problem when publishing my project to Vercel.
The background image can't load. Everything works on my local machine, but when deployed, the only image that doesn't load is that background image.
I'm using the Vite buildtool, React and TailwindCSS.
The image path is ./public/images/bg-mobile.svg
I imported the image in my tailwind.config.cjs and use it as a tailwin "bg-" class.
If anyone knows what I'm doing wrong, I'd be really happy to know.
//tailwind.config.cjs
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
colors: {
"huddle-violet": "hsl(257, 40%, 49%)",
"huddle-magenta": "hsl(300, 69%, 71%)",
},
backgroundImage: {
"desktop": "url('./images/bg-desktop.svg')",
"mobile": "url('./images/bg-mobile.svg')"
},
},
},
plugins: [require('prettier-plugin-tailwindcss')],
};
//index.html
<body class="bg-huddle-violet bg-mobile bg-contain bg-no-repeat">
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
Link to the hosted site
Link to the Github repo
The relative path being used is wrong.
./ with this you mean one heirarchy up.
But according to your question ./public/images/bg-mobile.svg
So try replacing ./ with / it should work.
Final code:
backgroundImage: {
"desktop": "url('/images/bg-desktop.svg')",
"mobile": "url('/images/bg-mobile.svg')"
},
backgroundImage: {
"desktop": "url('/images/bg-desktop.svg')",
"mobile": "url('/images/bg-mobile.svg')"
},
I'm building a webpage that allows my users the ability to enter rich text and ultimately upload that rich text to my database. I am using Quill.js as my rich text editor via the Quill CDN. I have setup Quill successfully. The Quill editor and toolbar containers are setup as so:
<div class="quill-toolbar" id="toolbar" style="margin-left: 50px; margin-right: 50px"></div>
<div class="quill-editor" id="editor" style="margin-left: 50px; margin-right: 50px"></div>
I have also written a script to initialize Quill.js with the "snow" themed editor enabled. That script is below:
<script>
var FontAttributor = Quill.import('formats/font');
FontAttributor.whitelist = [
'sans-serif', 'sofia', 'slabo', 'roboto', 'inconsolata', 'ubuntu'
];
Quill.register(FontAttributor, true);
var toolbarOptions = [
['bold', 'italic', 'underline', 'strike'],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'font': [] }],
[{ 'align': [] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }],
[{ 'indent': '-1' }, { 'indent': '+1' }],
['link', 'image', 'video', 'formula'],
];
var quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions,
},
placeholder: 'Start writing...',
theme: 'snow'
});\
</script>
My struggle appears when I try to position the Quill toolbar properly. Using inline CSS, I was able to position the Quill editor in the center of the screen with 50 pixel margins, like you saw when I setup the toolbar and editor containers: style="margin-left: 50px; margin-right: 50px". However, I am unable to do the same with the Quill toolbar.
How can I setup the toolbar so it has 50 pixel margins on each side of the toolbar as well as the editor?
Status Update
I have continued to experiment with CSS changes to add margins to the toolbar. The easiest solution I could find was to set margins to the <body> for the page. However, now I am having a problem with my navigation bar. The <body> appears like this <body style="margin-left: 50px">. However, the navigation bar is now misplaced, and if I add a negative margin like this: <div class="topnav" style="margin-left: -50px">, their is a gap on the right side of the navigation bar. Why is this happening. It changing the margins of the <body> the best solution?
I am using Ckeditor as rich editor for text input in the Chrome browser. I also have added some html id tag for easy parsing by bs4 after the system getting the data.
The following is my setting in the html:
CKEDITOR.replace( 'editor', {
toolbar : 'Basic',
uiColor : '#9AB8F3',
height : '70%',
startupShowBorders: false,
})
And in the config.js:
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' }
];
// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
config.removeButtons = 'Underline,Subscript,Superscript';
// Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';
// Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';
config.allowedContent = True;
};
Although I have already followed the instruction to allow all html tag content to be preserved with config.allowedContent = *; in the config.jd. However, it seems not working as I got the following results when getting data (by CKEDITOR.instances.editor.getData()):
<span style='font-size:11.0pt;'> content </span>
instead of this that I want:
<span id="news_content" style='font-size:11.0pt;'> content </span>
In other words, it still strips out all the html tag I added.
When I checked the source code, I found that the same textarea content was produced twice with the one with the tag being put in hidden format, i.e.,
<textarea name="editor" id="editor" rows="100" cols="40" style="visibility: hidden; display: none;">
And the editor produces another version in the real textarea that allows me to edit. However, this is useless because all the html tags are stripped there.
So, my question is, how to preserve the html tag in the real textarea so that I can parse the html with id tags after editing and submission. Could anyone advise on this? Thanks a lot.
I may not be able to answer my own question, but I like to share my solution with those encountering similar situation.
In short, finally I give up using ckeditor or any plug-in editor as many of them will strip off the html tag, which is essential to me in the subsequent process.
Thanks to html5, my solution is using editable div. The setting is very simple as below:
css:
#my-content {
box-shadow: 0 0 2px #CCC;
min-height: 150px;
overflow: auto;
padding: 1em;
margin: 5px;
resize: vertical;
outline: none;
}
html:
<div id="my-content" class="editable" style="width:900px; height:400px; text-overflow: ellipsis; overflow-y: scroll;"></div>
js script:
$('.editable').each(function(){
this.contentEditable = true;
});
So far, I am happy with it, it shows what exactly the html code showing and preserve all the tags I added. The only downside is it does not provide any toolbar for format editing. My solution is to make one for it, and via the following link you can get a very good tutorial as to making a toolbar with a ready-to-use demo as illustration.
https://code.tutsplus.com/tutorials/create-a-wysiwyg-editor-with-the-contenteditable-attribute--cms-25657
Hope this helps.
One of my websites went online a few weeks back. The design included an embed tweet within a div which displayed properly at that time.
However while checking today, I noticed the embed tweet has moved to the right in Mozilla. Now what's puzzling me is that I didn't even touch the code, so has twitter or Mozilla updated one of their properties???
heres a link to my site.
OK the problem is solved finally managed overwriting the css created by twitter.
I simply used the following scc selector
"div_containing_twitter_script" iframe {properties}
So if I placed the code in a div with "twitter" as an id the code would be
#twitter iframe {property:value}
Nevertheless thanks a lot for trying to help me out...
If Twitter feeds are not showing you can use this following code.
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> <p></p> <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 5,
interval: 1000,
width: 180,
height: 200,
theme: {
shell: {
background: '#88d4ff',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#333333',
links: '#00aeef'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
behavior: 'default'
}
}).render().setUser('#YourUser').start(); /* Need to change User ID*/
</script>
I'm sure a lot of people use the twitter widget that twitter provides.
Here's the code they provide:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 3,
interval: 6000,
width: 420,
height: 250,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#666666'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('apumpkinpatch').start();
</script>
You can see an example here how when you click the "feedback" tab on left side of screen, the twitter widget appears over the div. Any idea what I can do to prevent this?
I think the class for the widget is .twtr-doc according to the inspector. Anyone know if there is a css attribute I should be adding to it to stop this from happening?
EDIT -: took out IE part of question to just open it up in another question so I can mark the first answer as correct.
Re: the twitter widget being on top of the feedback div, you need to use z-index property in your styles to correct this.
Try adding z-index:100 to your feedback div. I do not have IE or I would help you debug that.