By registering with us, you'll be able to discuss, share and private message with other members of our community.
SignUp Now!Awesome! Have a goodnightI agree!! Thanks so much! I will try it tmrw as I've just switched off for the night. Thanks so much
I'm so sorry my apologies, what I meant was the Code Forum editor! https://prnt.sc/p3lw2rView attachment 186These are the only options that I have on the three dots
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%);
}
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%);
}
<video controls autoplay="true" width="250">
<source src="path/to/your/video">
Sorry, your browser doesn't support embedded videos.
</video>
autoplay
attribute and setting it to true
this will allow it to automatically play when someone visits your page.Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.
We use essential cookies to make this site work, and optional cookies to enhance your experience.