I'm trying to play a video in my C# WinForm.
Here is what I have so far:
I have a webViewer control in my form, and the following code:
// Play YouTube video in webBrowser1
string url = "https://www.youtube.com/watch?v=5aCbWqKl-wU";
string html = "<html><head>";
html += "<meta content='IE=Edge' http-equiv='X-UA-Compatible'/>";
html += "<iframe id='video' src='https://www.youtube.com/embed/{0}' style=\"padding: 0px; width: 100%; height: 100%; border: none; display: block;\" allowfullscreen></iframe>";
html += "</body></html>";
webBrowser1.DocumentText = string.Format(html, url.Split('=')[1]);
Here is what it looks like when I run my app:
The problem is that the video does not fill up the entire webViewer (which is the white part in the image).
I have the webViewer1.Anchor property set to all, so when I resize the form, the webViewer resizes based on the form.
Note:
When the user clicks the fullscreen button the problem is fixed. But this is a bad solution for me because it's a bad experience for the user. Plus, the user may not know that they need to click the fullscreen button. This is what that looks like:
How do I make the video take up the entire webViewer without the user having to click the fullscreen button?
Also, as a side-question, when the user clicks the "YouTube" button, it opens Internet Explorer, and not the default browser. How do I fix this?
You need to fix the styling of your page:
// Play YouTube video in webBrowser1
string url = "https://www.youtube.com/watch?v=5aCbWqKl-wU";
string html = "<html style='width: 100%; height: 100%; margin: 0; padding: 0;'><head>";
html += "<meta content='IE=Edge' http-equiv='X-UA-Compatible'/>";
html += "</head><body style='width: 100%; height: 100%; margin: 0; padding: 0;'>";
html += "<iframe id='video' src='https://www.youtube.com/embed/{0}' style=\"padding: 0px; width: 100%; height: 100%; border: none; display: block;\" allowfullscreen></iframe>";
html += "</body></html>";
webBrowser1.DocumentText = string.Format(html, url.Split('=')[1]);
This ensures that the HTML and BODY tags occupy 100% of the page, and that allows the child iframe to occupy 100% of the page. That generates this HTML:
<html style='width: 100%; height: 100%; margin: 0; padding: 0;'>
<head>
<meta content='IE=Edge' http-equiv='X-UA-Compatible'/>
</head>
<body style='width: 100%; height: 100%; margin: 0; padding: 0;'>
<iframe id='video' src='https://www.youtube.com/embed/5aCbWqKl-wU' style="padding: 0px; width: 100%; height: 100%; border: none; display: block;" allowfullscreen></iframe>
</body>
</html>
I think you need to set up an Aspect Ratio.
Checkout the document here
https://www.w3schools.com/howto/howto_css_responsive_iframes.asp
I am using vs2019. I don’t know why. After trying it, it is in a black state and does not display the video.
The rendered result for Html.DisplayFor on a boolean value is a disabled checkbox. I just want to change its color. I've looked on many websites, including this one, but most of the help around this topic is for people who want to change the display to between two text values.
I created a custom css file and referenced it in my layout page, but it does not do anything.
input[type="checkbox"].disabled {
color: #ccc
}
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - ASI Dashboard</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/css/styles/custom.css"/>
#RenderSection("Style",false)
</head>
Declared the section in my razor page.
#section style{
}
I can see in the chrome inspector that the HTML is written such that
#Html.DisplayFor(model => model.xx.yy) returns <input class="check-box" disabled="disabled" type="checkbox"/> on my page. The types match, so why does the color still not change? I know I must be missing something. What am I doing wrong?
EDIT: After looking at the element itself, all of the "color" elements are striked through, and I can see my custom style. It would seem it has no other color references to go by except mine, yet the checkbox is still the dull grey instead of changing colors.
element.style {
}
input[type="checkbox"] {
color: #e83e8c;
background-color: #6f42c1;
border-color: #ff6a00;
}
input[type=checkbox], input[type=radio] {
box-sizing: border-box;
padding: 0;
}
button, input {
overflow: visible;
}
button, input, optgroup, select, textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
*, ::after, ::before {
box-sizing: border-box;
}
user agent stylesheet
input[type="checkbox" i]:disabled {
<strike>background-color: initial;</strike>
}
user agent stylesheet
input:disabled {
<strike>background-color: -internal-light-dark-color(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
border-color: rgba(118, 118, 118, 0.3);</strike>
}
user agent stylesheet
input[type="checkbox" i] {
-webkit-appearance: checkbox;
box-sizing: border-box;
margin: 3px 3px 3px 4px;
}
user agent stylesheet
input:disabled {
<strike>color: -internal-light-dark-color(rgb(84, 84, 84), rgb(170, 170, 170));</strike>
cursor: default;
}
user agent stylesheet
input[type="checkbox" i] {
<strike>background-color: initial;</strike>
cursor: default;
margin: 3px 0.5ex;
padding: initial;
border: initial;
}
user agent stylesheet
input {
-webkit-writing-mode: horizontal-tb !important;
text-rendering: auto;
<strike>color: -internal-light-dark-color(black, white);</strike>
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
-webkit-appearance: textfield;
<strike>background-color: -internal-light-dark-color(rgb(255, 255, 255), rgb(59, 59, 59));
-webkit-rtl-ordering: logical;
cursor: text;
margin: 0em;
font: 400 13.3333px Arial;
padding: 1px 2px;
border-width: 2px;
border-style: inset;
<strike>border-color: -internal-light-dark-color(rgb(118, 118, 118), rgb(195, 195, 195));</strike>
border-image: initial;
}
body {
margin: 0;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
}
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
--font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
#media (min-width: 768px)
html {
font-size: 16px;
}
html {
font-size: 14px;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
*, ::after, ::before {
box-sizing: border-box;
}
*, ::after, ::before {
box-sizing: border-box;
}
EDIT: I have included a screenshot of the inspector. The attributes are seen correctly, but they do not apply.
Screenshot of inspector
You are trying to use disabled as a class of the input type checkbox. So input[type="checkbox"].disabled works when you have HTML like this:
<input type="checkbox" class="check-box disabled" />
But that is not the case here. Your HTML is coming like this:
<input type="checkbox" class="check-box" disabled="disabled" />
You are getting an attribute added (which is the default behaviour of the HTML disabling). Hence what you need to change your CSS style is to use either one of the below:
input[type="checkbox"][disabled] {
// customize here
}
OR
input[type="checkbox"]:disabled {
// customize here
}
NOTE: I have never checked the 2nd one myself but have tried the 1st one. It works!
At the bottom of it all, it turns out this was just me not understanding how to manually input the HTML instead of relying on #Html.DisplayFor.
Forcing the HTML as
<input class="custom-control-input" type="checkbox" checked="#Model.Class.Item" disabled />
I left this link in the head section of my layout:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
Then, I used the google chrome inspector to find the right css elements.
<style>
.custom-control-input:disabled ~ .custom-control-label::before {
background-color: red;
}
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
background-color: green;
}
.custom-control-input:checked ~ .custom-control-label::before {
border-color: grey;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='green' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
}
</style>
I just want to show image , that is stored in the backend. But the image is not shown. I get this error:
downloadIcon.jpg:1 GET http://localhost:4200/assets/hepchat/images/downloadIcon.jpg 404 (Not Found)
I do it like this:
return $"<img src='./images/downloadIcon.jpg' alt=\"Download\"/>";
And I have a css class like this:
.msgdownload {
position: relative;
width: 50px;
height: 25px;
display: block;
}
.msgdownload::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
And I dont want to do in the css class something like this:
background: url(../hepchat/images/download.jpg) no-repeat bottom;
Because then I cant have alternative text, when the image is not found.
Thank you.
You can solve it by putting the image to the /src/assets folder.
Something like:
/src/assets/hepchat/images/downloadIcon.jpg
I am attempting to design a site for someone who wants both the Contact Us page in the bottom portion of the menu and above their logo in the top right corner.
As such here is the client code:
This is the top menu above the logo:
<ul class="topnavigation" style="width:1000px; border-bottom-style: none; height: 40px;">
<li class="highlight" style="width:100px; height: 40px; font-family:Calibri; float:right;">Contact Us</li>
<li style="width:100px; height:40px; font-family:Calibri; border-left:1px solid white; border-right:1px solid white; float:right;">Home</li>
</ul>
And this is the menu under the logo:
<ul class="navigation" style="width:1000px; height:40px; border-bottom:none;">
<li style="width:150px; font-family:Calibri; height: 40px; border-right:1px solid white;">About Us</li>
<li style="width:150px; font-family:Calibri; border-right:1px solid white; height: 40px;">Applications</li>
<li style="width:200px; font-family:Calibri; border-right:1px solid white; height: 40px;">Features and Benefits</li>
<li style="width:200px; font-family:Calibri; border-right:1px solid white; height: 40px;">Technical Specs</li>
<li style="width:150px; font-family:Calibri; border-right:1px solid white; height: 40px;">Contact</li>
<li style="width:145px; font-family:Calibri; border-right:none; height: 40px;">Recognition</li>
</ul>
To highlight which page the user selected I used some javascript (which I have been trying to learn lately) and CSS
JavaScript:
$(document).ready(function () {
var str = location.href.toLowerCase();
$('.topnavigation li a').each(function () {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$("li.highlight").removeClass("highlight");
$(this).parent().addClass("highlight");
}
});
$('.navigation li a').each(function () {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$("li.highlight").removeClass("highlight");
$(this).parent().addClass("highlight");
}
});
});
CSS:
ul.navigation
{
margin: 0px;
padding: 0px;
list-style: none;
background-color:#0071BB;
height:34px;
border-bottom:none;
}
ul.navigation li
{
float: left;
position: relative;
top: 0px;
left: 0px;
}
ul.navigation li a:last-child{}
ul.navigation a
{
color:white;
display: block;
padding: 8px 8px;
text-decoration: none;
}
/*background color of LI*/
ul.navigation li.highlight
{
background:Darkblue;
}
/*Text color for A*/
ul.navigation li.highlight a
{
color:white;
}
ul.navigation li:hover
{
color:white;
background-color:darkblue;
background: darkblue;
}
a, a:visited
{
color:#000;
}
ul.topnavigation
{
margin: 0px;
padding: 0px;
list-style: none;
background-color:#0071BB;
height:34px;
border-bottom:none;
}
ul.topnavigation li
{
float: left;
position: relative;
top: 0px;
left: 0px;
}
ul.topnavigation li a:last-child{}
ul.topnavigation a
{
color:white;
display: block;
padding: 8px 8px;
text-decoration: none;
}
/*background color of LI*/
ul.topnavigation li.highlight
{
background:Darkblue;
}
/*Text color for A*/
ul.topnavigation li.highlight a
{
color:white;
}
ul.topnavigation li:hover
{
color:white;
background-color:darkblue;
background: darkblue;
}
With this implementation if the user clicks on any page it highlights the page. But if they click on the Contact Us in the top corner is only highlights the Contact Us in the bottom menu and not the top menu. I found that strange and is a question in itself for me because I would expect it to highlight the top portion and not the bottom portion. (If anyone can answer that as well I would appreciate it - because I don't see how it is recognizing it).
So, how can I have both the top contact page navigation and bottom contact page navigation highlight at the same time. I am assuming that this will be done with java script and not on the C# code.
I have attempted to combine the two such as
$('.navigation li a' & '.topnavigation li a').each(function () {
but realized this probably wouldn't work because it is indexing. Although I am not sure. I attempted to set them as an "if equivalent" so if both href were the same then it would highlight them. Nothing I have done has worked (although amusingly I have gotten some odd results highlighting other navs).
So, any suggestions? Point me in the right direction? Something I am not seeing or how can this be done? Is this going to be needed to be done in C#? Can JavaScript do it?
Please let me know. This is the first question I have asked so I am frustrated on this.
You really don't need an each here, nor do you need to combine selectors unless you're doing something special based on their root class. You just need a way to match things up. Here is a demo - http://jsfiddle.net/jayblanchard/AEY5h/
EDIT: The original code still works (you need to remove e.preventDefault(); for your site)
$('li a').click(function(e) {
e.preventDefault(); // just for this demo
var thisHREF = $(this).attr('href'); // get the href of the clicked item
$('li').removeClass('highlight'); // remove all the classes
$('a[href="' + thisHREF + '"]').closest('li').addClass('highlight'); // add the class to the items that have the same href
});
To highlight the elements where your page matches up add the following (outside of the above block)-
var currentPage = location.pathname.substring(1);
$('a[href="' + currentPage + '"]').closest('li').addClass('highlight'); // adds highlight to current page element
In the fiddle I have replaced the location info with jsfiddle's info so that both Contact Us elements are highlighted - http://jsfiddle.net/jayblanchard/AEY5h/1/
You can combine jQuery selectors using a comma like this:
$('.navigation li a, .topnavigation li a').each(function () {
Notice that the comma is included inside the single quotes.
jQuery errors, Remove default .highlight class from list-items
In your .topnavigation menu, don't provide preselected .highlight classes.
You have a preselected item with class .highlight, which may be why it appears that your script is working to highlight the item in your .topnavigation menu, but not your .navigation menu.
Also, your jQuery has some errors and I recommend combining selectors since the .each() function is the same for both.
This corrected version should do the trick (if there are no preselected items with .highlight):
$(document).ready(function () {
var str = location.href.toLowerCase();
$('.topnavigation li a, .navigation li a').each(function () {
if (str.indexOf($(this).attr('href').toLowerCase()) > -1) {
$(this).parent().addClass("highlight");
}
});
});
Example JSFiddle: http://jsfiddle.net/gfullam/0rppzomt/
The correct way to combine multiple selectors into one with jQuery is not like this:
$('.navigation li a' & '.topnavigation li a')
but rather like this:
$('.navigation li a, .topnavigation li a')
Here's a link to more documentation on the multiple selector usage. Make that change in your javascript and you should properly be selecting all the elements you're trying to target.
I have the following situation:
I've got a header, content, and a footer.
Now the header and footer have a fixed height and are always on the screen.
css for footer and header:
#footer {
background-color:#e6e6e6;
width:100%;
height:46px;
bottom:0;
left:0;
position:fixed;
border-top:1px solid #7F8C8D;
z-index:101;
}
#header {
border-bottom:1px solid black;
height:45px;
background-color:#828282;
color:#FFF;
position:absolute;
top:0;
left:0;
right:0;
z-index:105;
width:100%;
box-sizing:border-box;
}
As for the content i have the following:
#content {
background: #9cbbe3 url(../img/backgr.gif) repeat-x;
right:0;
left:0;
background-size:auto;
position: absolute; top: 0px; bottom: 0px;
overflow: auto;
}
Now this works! at first...
But then i go and maximize and minimize the window, and i end up with two scroll-bars.
When i refresh the page the problem is fixed. and re-sizing works as far as I've noticed. but when maximizing and restoring the window i end up with two scroll-bars.
How can i solve this preferably using CSS?
Maybe this works out for you:
html, body { overflow: hidden; }
Try changing your overflow
overflow: auto;
to:
overflow: hidden;