{"id":9366,"date":"2022-11-12T02:34:45","date_gmt":"2022-11-12T02:34:45","guid":{"rendered":"https:\/\/stevepedwards.today\/DebianAdmin\/?p=9366"},"modified":"2022-11-12T02:34:45","modified_gmt":"2022-11-12T02:34:45","slug":"webdev-embedded-video-code-for-landing-page-link","status":"publish","type":"post","link":"https:\/\/stevepedwards.today\/DebianAdmin\/webdev-embedded-video-code-for-landing-page-link\/","title":{"rendered":"WebDev: Embedded Video Code for Landing Page Link"},"content":{"rendered":"
<\/div>\n

<\/path><\/svg><\/i> \"Loading\"<\/p>\n

<\/div>\n

\"\"<\/p>\n

HTML:<\/p>\n

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Document<\/title>\n    <script src=\"script.js\" defer><\/script>\n    <link rel=\"stylesheet\" href=\"styles.css\" \/>\n<\/head>\n<body>\n    <video id=\"background-video\" autoplay loop muted poster=\"VidPoster.png\">\n        <source src=\"video.mp4\" type=\"video\/mp4\">\n        <\/video>\n    <header class=\"header\">Header Text<\/header>\n        <section class=\"primary-container\">\n            <button class=\"one1\">stop Paul<\/button>\n            <button class=\"two1\">start Paul<\/button>\n        <\/section>\n\n        <img src=\"Paul.png\" class=\"paul rotate-image\"\n        alt=\"pic\"\/>\n    <footer class=\"footer\">Footer Text<\/footer>\n<\/body>\n<\/html><\/pre>\n
CSS:<\/p>\n
* {\n  box-sizing: border-box;\n  margin: 0;\n\n}\n\n\/* -------------------------------------------------------------- *\/\n\/*  These body and footer settings push the footer to the page bottom IF the footer is within the body container as it should be *\/\nbody {\n  background-color: gray;\n  min-height: 100vh;\n  display: flex;\n  \/* for the main columns to seperate header, divs and footer *\/\n  flex-direction: column;\n  \/* to center the alien image *\/\n  justify-content: center; \/* align horizontal; *\/\n  align-items: center; \/* align vertical *\/\n}\n.footer {\n  background-color: rgb(177, 247, 96);\n  margin-top: auto;\n  font-family: \"Courier New\", Courier, monospace;\n  \/* without flex, this centers just text *\/\n  text-align: center;\n  font-weight: bolder;\n  font-size: 1rem;\n}\n\/* ---------------------------------------------------------------- *\/\n\n.header {\n  background-color: rgb(97, 231, 103);\n  \/* animation: rotation 2s infinite linear; *\/\n  \/* margin-top: auto; *\/\n  font-family: \"Courier New\", Courier, monospace;\n  \/* without flex, this centers just text *\/\n  text-align: center;\n  font-weight: bolder;\n  font-size: 1rem;\n}\n\n.primary-container {\n  margin-top: 1em;\n  \/* min-height: fit-content; *\/\n  justify-content: center;\n  display: flex;\n  background-image: linear-gradient(236deg, #f1b13a 0%, #98d66e 50%);\n  font-size: 3rem;\n  font-family: cursive;\n}\n\n.secondary-container {\n  margin-top: 1em;\n  \/* min-height: fit-content; *\/\n  justify-content: center;\n  display: flex;\n  background-image: linear-gradient(236deg, #8979a3 0%, #e77566 50%);\n  font-size: 3rem;\n  font-family: cursive;\n}\n\n.one1 {\n  font-size: larger;\n  \/* max-width: fit-content; *\/\n  background-color: #e77566;\n  border: solid 2px black;\n}\n\n.one1:hover {\n  cursor: pointer;\n  background-color: red;\n}\n\n.one1:focus {\n  \/* eg Tab key color *\/\n  background: green\n}\n\n.two1 {\n  font-size: larger;\n  \/* max-width: fit-content; *\/\n  background-color: greenyellow;\n  border: solid 2px black;\n}\n\n.two1:hover {\n  cursor: pointer;\n  background-color: yellowgreen;\n}\n\n\/* focus is a good way to show an active button in a multi button view *\/\n.two1:focus {\n  \/* eg Tab key color *\/\n  background: greenyellow;\n}\n\n\/* center damn images!!?? up in main body! *\/\n.paul {\n  justify-content: center;\n  margin-top: 3em;\n  max-width: 300px;\n  max-height: 400px;\n  padding: 20px;\n  \/* img rotation *\/\n  -webkit-transform: rotate(0deg);\n}\n\n.one1 {\n  font-weight: bolder;\n  max-width: fit-content;\n\n  \/*  space all round *\/\n  margin: 3px;\n  \/* all round *\/\n  border: solid black 4px;\n  \/* pads all round element *\/\n  padding: 8px;\n}\n\n.two1 {\n  font-weight: bolder;\n  max-width: fit-content;\n  margin: 3px;\n  \/* all round *\/\n  border: solid black 4px;\n  \/* pads all round element *\/\n  padding: 8px;\n}\n\n\/* ----------- Rotation ------------- *\/\n.rotate {\n  animation: rotation 3s;\n}\n\n@keyframes rotation {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(359deg);\n  }\n}\n\n.linear {\n  animation-timing-function: linear;\n}\n\n.infinite {\n  animation-iteration-count: infinite;\n}\n\n\/* All the above HTML classes condense here *\/\n.rotate-image {\n  animation: rotation 0.5s linear infinite;\n}\n\/* ----------- Rotation ------------- *\/\n\n#background-video {\n  width: 100vw;\n  height: 100vh;\n  object-fit: cover;\n  position: fixed;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  z-index: -1;\n}\n<\/pre>\n
JS:<\/p>\n
const btn1 = document.querySelector(\".rotate-image\");\n\nconst btn2 = document.querySelector(\".rotate-image\");\n\nconst stopPaul = document\n  .querySelector(\".one1\")\n  .addEventListener(\"click\", function () {\n    console.log(\"hide rotate\");\n    btn1.classList.remove(\"rotate-image\");\n  });\n\nconst startPaul = document\n  .querySelector(\".two1\")\n  .addEventListener(\"click\", function () {\n    console.log(\"unhide rotate\");\n    btn2.classList.add(\"rotate-image\");\n  });\n<\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
<\/div>\n
<\/path><\/svg><\/i> \"Loading\"<\/p>\n
<\/div>\n
HTML: <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>Document<\/title> <script src=\"script.js\" defer><\/script> <link rel=\"stylesheet\" href=\"styles.css\" \/> <\/head> <body> <video id=\"background-video\" autoplay loop muted poster=\"VidPoster.png\"> <source src=\"video.mp4\" type=\"video\/mp4\"> <\/video> <header class=\"header\">Header Text<\/header> <section class=\"primary-container\"> <button class=\"one1\">stop Paul<\/button> <button class=\"two1\">start Paul<\/button> <\/section> <img src=\"Paul.png\" class=\"paul rotate-image\" alt=\"pic\"\/> <footer class=\"footer\">Footer Text<\/footer> ...\u00a0 WebDev: Embedded Video Code for Landing Page Link<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-9366","post","type-post","status-publish","format-standard","hentry","category-post"],"a3_pvc":{"activated":true,"total_views":4,"today_views":0},"_links":{"self":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts\/9366","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/comments?post=9366"}],"version-history":[{"count":0,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts\/9366\/revisions"}],"wp:attachment":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/media?parent=9366"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/categories?post=9366"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/tags?post=9366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}