Html to ccs

Malcolm

Administrator
Administrator
Jan 2, 2018
1,072
298
95
Canada
codeforum.org
So you can't really convert HTML to CSS. HTML is a hypertext-markup language it helps you structure your webpage. While CSS - Cascade styling sheets is used to change the appearance of your webpage - e.g. background colours, text-size etc.

 

Anne

New Coder
Sep 3, 2019
28
1
3
Ok thanks malcolm.

Im trying to get the ccs code for a video i have on a banner on my site, to play when its viewed on mobile but struggling. I was sent a child theme file but using the whole file corrupts the design...i cut out the video part but seems to be in html...

Dont suppose u have any ideal on how i could achieve that do you?
 

Anne

New Coder
Sep 3, 2019
28
1
3
Yes thats it :) it autoplays in the main page.. It works fine in desktop but not when viewed on mobile...
 

Anne

New Coder
Sep 3, 2019
28
1
3
I agree!! Thanks so much! I will try it tmrw as I've just switched off for the night. Thanks so much
 
  • Like
Reactions: Malcolm

Anne

New Coder
Sep 3, 2019
28
1
3
ugh i just couldnt make it work :( I already have it on my desktop version but cant get it to work on mobile :(
 

Anne

New Coder
Sep 3, 2019
28
1
3
ok this is the desktop:
element.style {

}


style.css?v…=5.2.3:1752
.has-header-image .custom-header-media img, .has-header-video .custom-header-media video, .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
  1. height: 100%;
  2. left: 0;
  3. -o-object-fit: cover;
  4. object-fit: cover;
  5. top: 0;
  6. -ms-transform: none;
  7. -moz-transform: none;
  8. -webkit-transform: none;
  9. transform: none;
  10. width: 100%;
}


style.css?v…=5.2.3:1695
.has-header-image .custom-header-media img, .has-header-video .custom-header-media video, .has-header-video .custom-header-media iframe {
  1. position: fixed;
  2. height: auto;
  3. left: 50%;
  4. max-width: 1000%;
  5. min-height: 100%;
  6. min-width: 100%;
  7. min-width: 100vw;
  8. width: auto;
  9. top: 50%;
  10. padding-bottom: 1px;
  11. -ms-transform: translateX(-50%) translateY(-50%);
  12. -moz-transform: translateX(-50%) translateY(-50%);
  13. -webkit-transform: translateX(-50%) translateY(-50%);
  14. transform: translateX(-50%) translateY(-50%);
}


style.css?v…=5.2.3:2829
img, video {
  1. height: auto;
  2. max-width: 100%;
}


style.css?ver=5.2.3:164
audio, video {
  1. display: inline-block;
}


style.css?v…=5.2.3:1520
*, *:before, *:after {
  1. -webkit-box-sizing: inherit;
  2. -moz-box-sizing: inherit;
  3. box-sizing: inherit;
}



video[Attributes Style] {
  1. width: 2000px;
  2. height: 1201px;
}

user agent stylesheet
video {
  1. object-fit: contain;
}
Inherited from
header#masthead.site-header

?customize_…eview-0:743
header {
  1. color: rgba(09,58,72,1)!important;
}

Inherited from
div#page.site

style.css?v…=5.2.3:1532
#page {
  1. position: relative;
  2. word-wrap: break-word;
}

Inherited from
body.home.page-template-default.page.page-id-621.page-parent.logged-in.wp-custom-logo.wp-embed-responsive.is-twentyseventeen._masterslider._ms_version_3.5.3.twentyseventeen-customizer.twentyseventeen-front-page.has-header-image.page-one-column.title-tagline-hidden.colors-light.elementor-default.elementor-page.elementor-page-621.has-header-video.customize-partial-edit-shortcuts-shown

?customize_…eview-0:732
body {
  1. color: rgba(09,58,72,1)!important;
}


style.css?ver=5.2.3:418
body, button, input, select, textarea {
  1. color: #333;
  2. font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
  3. font-size: 15px;
  4. font-size: 0.9375rem;
  5. font-weight: 400;
  6. line-height: 1.66;
}

Inherited from
html.js.svg.background-fixed

style.css?ver=5.2.3:54
html {
  1. font-family: sans-serif;
  2. line-height: 1.15;
  3. -ms-text-size-adjust: 100%;
  4. -webkit-text-size-adjust: 100%;
}


user agent stylesheet
html {
  1. color: -internal-root-color;
}
Pseudo ::before element

style.css?v…=5.2.3:1520
*, *:before, *:after {
  1. -webkit-box-sizing: inherit;
  2. -moz-box-sizing: inherit;
  3. box-sizing: inherit;
}

Pseudo ::after element

style.css?v…=5.2.3:1520
*, *:before, *:after {
  1. -webkit-box-sizing: inherit;
  2. -moz-box-sizing: inherit;
  3. box-sizing: inherit;
}

position
0
0
margin


border


padding


425.333 × 609

1




-16.667
0

Show all
  1. box-sizing:border-box;
  2. color:rgb(9, 58, 72);
  3. display:block;


This is the mobile:


.wp-custom-header-video-button {

}

.wp-custom-header-video-button .screen-reader-text {

}

.wp-custom-header-video-button .icon {

}

.wp-custom-header-video-button .icon use {

}

.video-container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.video-container video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

I cannot tell you how grateful i am for your help with this. I appreciate it so much
 

Malcolm

Administrator
Administrator
Jan 2, 2018
1,072
298
95
Canada
codeforum.org
Just make sure to use the code tags so it's easier for us to read your code :)

You can do this by clicking the three dots > Code.

You can view the help page for more help!

And no worries I'm glad to help :)
 

Anne

New Coder
Sep 3, 2019
28
1
3
Code:
wp-custom-header-video-button {

}

.wp-custom-header-video-button .screen-reader-text {

}

.wp-custom-header-video-button .icon {

}

.wp-custom-header-video-button .icon use {

}

.video-container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.video-container video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
 

Anne

New Coder
Sep 3, 2019
28
1
3
Code:
CodeForum.ORG

Home

Questions & Answers

What's new

Graphics

Resources

Members

Profile

Alerts

Settings

Html to ccs

 Thread starterAnne  Start dateYesterday at 12:58 AM  TagsNone

Reply

HTML & CSS

Unwatch

•••

Anne

New Coder

Yesterday at 12:58 AM

Add bookmark

#1

Can anyone recommend a good html to ccs convertor site?

Reply CommentReport •••

Malcolm

Malcolm

Administrator  Administrator

Yesterday at 1:00 AM

Add bookmark

#2

So you can't really convert HTML to CSS. HTML is a hypertext-markup language it helps you structure your webpage. While CSS - Cascade styling sheets is used to change the appearance of your webpage - e.g. background colours, text-size etc.

HTML - Tutorial What is HTML?

What is HTML? HTML is an abbreviation for Hypertext-Markup Language and is used to create the structure of a website. In other words, it’s considered the skeleton. A webpage is made up of many different types of tags that are used to structure a webpage. Exercise: “Go to any webpage, then...

codeforum.org codeforum.org

CSS - Tutorial What is CSS?

In a recent post, I mentioned that HTML was used to create the structure of a webpage (this thread can be located here). However, if we would just use HTML to code our website, we would get an ugly looking website and would be very unattractive for the viewer viewing your website. That’s where...

codeforum.org codeforum.org

 Like Reply CommentReport

Anne

New Coder

Yesterday at 1:03 AM

Add bookmark

#3

Ok thanks malcolm.

Im trying to get the ccs code for a video i have on a banner on my site, to play when its viewed on mobile but struggling. I was sent a child theme file but using the whole file corrupts the design...i cut out the video part but seems to be in html...

Dont suppose u have any ideal on how i could achieve that do you?

Reply CommentReport •••

Malcolm

Malcolm

Administrator  Administrator

Yesterday at 1:05 AM

Add bookmark

#4

Please help me clarify, you're trying to play a video when you visit your webpage?

 Like Reply CommentReport

Anne

New Coder

Yesterday at 1:06 AM

Add bookmark

#5

Yes thats it :) it autoplays in the main page.. It works fine in desktop but not when viewed on mobile...

Reply CommentReport •••

Malcolm

Malcolm

Administrator  Administrator

Yesterday at 1:09 AM

Add bookmark

#6

Try taking a look at this! I believe in research is the key to help you learn so I won't get you the code but will most certainly help you out :) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Attributes

 Like Reply CommentReport

Anne

New Coder

Yesterday at 1:10 AM

Add bookmark

#7

I agree!! Thanks so much! I will try it tmrw as I've just switched off for the night. Thanks so much

Like Reactions:Malcolm

Reply CommentReport •••

Malcolm

Malcolm

Administrator  Administrator

Yesterday at 1:13 AM

Add bookmark

#8

Anne said:

I agree!! Thanks so much! I will try it tmrw as I've just switched off for the night. Thanks so much

Awesome! Have a goodnight :)

 Like Reply CommentReport

Anne

New Coder

Yesterday at 1:14 AM

Add bookmark

#9

Thanks you too

Reply CommentReport •••

Anne

New Coder

Yesterday at 7:21 PM

Add bookmark

#10

ugh i just couldnt make it work :( I already have it on my desktop version but cant get it to work on mobile :(

Reply CommentReport •••

Malcolm

Malcolm

Administrator  Administrator

Yesterday at 8:36 PM

Add bookmark

#11

Can you provide some of the code?

 Like Reply CommentReport

Anne

New Coder

Yesterday at 8:37 PM

Add bookmark

#12

Hey, which part? Desktop or the mobile one i tried?

Reply CommentReport •••

Malcolm

Malcolm

Administrator  Administrator

Today at 3:04 AM

Add bookmark

#13

I’d say both so we can tell what exactly is going on with your code

 Like Reply CommentReport

Anne

New Coder

19 minutes ago

Add bookmark

#14

ok this is the desktop:

element.style {

}

style.css?v…=5.2.3:1752

.has-header-image .custom-header-media img, .has-header-video .custom-header-media video, .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {

height: 100%;

left: 0;

-o-object-fit: cover;

object-fit: cover;

top: 0;

-ms-transform: none;

-moz-transform: none;

-webkit-transform: none;

transform: none;

width: 100%;

}

style.css?v…=5.2.3:1695

.has-header-image .custom-header-media img, .has-header-video .custom-header-media video, .has-header-video .custom-header-media iframe {

position: fixed;

height: auto;

left: 50%;

max-width: 1000%;

min-height: 100%;

min-width: 100%;

min-width: 100vw;

width: auto;

top: 50%;

padding-bottom: 1px;

-ms-transform: translateX(-50%) translateY(-50%);

-moz-transform: translateX(-50%) translateY(-50%);

-webkit-transform: translateX(-50%) translateY(-50%);

transform: translateX(-50%) translateY(-50%);

}

style.css?v…=5.2.3:2829

img, video {

height: auto;

max-width: 100%;

}

style.css?ver=5.2.3:164

audio, video {

display: inline-block;

}

style.css?v…=5.2.3:1520

*, *:before, *:after {

-webkit-box-sizing: inherit;

-moz-box-sizing: inherit;

box-sizing: inherit;

}

video[Attributes Style] {

width: 2000px;

height: 1201px;

}

user agent stylesheet

video {

object-fit: contain;

}

Inherited from

header#masthead.site-header

?customize_…eview-0:743

header {

color: rgba(09,58,72,1)!important;

}

Inherited from

div#page.site

style.css?v…=5.2.3:1532

#page {

position: relative;

word-wrap: break-word;

}

Inherited from

body.home.page-template-default.page.page-id-621.page-parent.logged-in.wp-custom-logo.wp-embed-responsive.is-twentyseventeen._masterslider._ms_version_3.5.3.twentyseventeen-customizer.twentyseventeen-front-page.has-header-image.page-one-column.title-tagline-hidden.colors-light.elementor-default.elementor-page.elementor-page-621.has-header-video.customize-partial-edit-shortcuts-shown

?customize_…eview-0:732

body {

color: rgba(09,58,72,1)!important;

}

style.css?ver=5.2.3:418

body, button, input, select, textarea {

color: #333;

font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;

font-size: 15px;

font-size: 0.9375rem;

font-weight: 400;

line-height: 1.66;

}

Inherited from

html.js.svg.background-fixed

style.css?ver=5.2.3:54

html {

font-family: sans-serif;

line-height: 1.15;

-ms-text-size-adjust: 100%;

-webkit-text-size-adjust: 100%;

}

user agent stylesheet

html {

color: -internal-root-color;

}

Pseudo ::before element

style.css?v…=5.2.3:1520

*, *:before, *:after {

-webkit-box-sizing: inherit;

-moz-box-sizing: inherit;

box-sizing: inherit;

}

Pseudo ::after element

style.css?v…=5.2.3:1520

*, *:before, *:after {

-webkit-box-sizing: inherit;

-moz-box-sizing: inherit;

box-sizing: inherit;

}

position

0

0

margin

‒

‒

border

‒

‒

padding

‒

‒

425.333 × 609

‒

1

‒

‒

‒

‒

-16.667

0

Show all

box-sizing:border-box;

color:rgb(9, 58, 72);

display:block;

This is the mobile:

.wp-custom-header-video-button {

}

.wp-custom-header-video-button .screen-reader-text {

}

.wp-custom-header-video-button .icon {

}

.wp-custom-header-video-button .icon use {

}

.video-container {

position: absolute;

top: 0;

bottom: 0;

width: 100%;

height: 100%;

overflow: hidden;

}

.video-container video {

min-width: 100%;

min-height: 100%;

width: auto;

height: auto;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}
 

Malcolm

Administrator
Administrator
Jan 2, 2018
1,072
298
95
Canada
codeforum.org
Try:

HTML:
<video controls autoplay="true" width="250">
    <source src="path/to/your/video">
    Sorry, your browser doesn't support embedded videos.
</video>
So what we're doing is adding the autoplay attribute and setting it to true this will allow it to automatically play when someone visits your page.