{"id":4722,"date":"2023-12-01T01:37:46","date_gmt":"2023-12-01T01:37:46","guid":{"rendered":"https:\/\/williamcromar.com\/newmediawiki\/?p=4722"},"modified":"2024-01-11T11:27:26","modified_gmt":"2024-01-11T11:27:26","slug":"videomashhtml","status":"publish","type":"post","link":"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/","title":{"rendered":"videoMashHTML"},"content":{"rendered":"\n<div class=\"wp-block-columns has-white-background-color has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><\/div>\n\n\n\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><div class=\"wp-block-image is-style-rounded\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/4d-media\/\"><img loading=\"lazy\" decoding=\"async\" width=\"420\" height=\"420\" data-attachment-id=\"17\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/manraytrans\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" data-orig-size=\"420,420\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"manraytrans\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" alt=\"\" class=\"wp-image-17\" style=\"aspect-ratio:1;object-fit:cover;width:120px;height:undefinedpx\"\/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-small-font-size\"><strong><a href=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/4d-media\/\">4D media<\/a><\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><div class=\"wp-block-image is-style-rounded\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/concretepoetry\/\"><img loading=\"lazy\" decoding=\"async\" width=\"617\" height=\"640\" data-attachment-id=\"146\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/4d-media\/concretepoetry\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry.jpg\" data-orig-size=\"617,640\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"concretePoetry\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry.jpg\" alt=\"\" class=\"wp-image-146\" style=\"aspect-ratio:1;object-fit:cover;width:120px;height:undefinedpx\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry.jpg 617w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry-289x300.jpg 289w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry-300x311.jpg 300w\" sizes=\"auto, (max-width: 617px) 100vw, 617px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-small-font-size\"><strong><a href=\"https:\/\/williamcromar.com\/newmediawiki\/concretepoetry\/\">3 | concrete poetry<\/a><\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><div class=\"wp-block-image is-style-rounded\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"100\" height=\"100\" data-attachment-id=\"3818\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/concretepoetry\/tangent\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/tangent.jpg\" data-orig-size=\"100,100\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"tangent\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/tangent.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/tangent.jpg\" alt=\"\" class=\"wp-image-3818\" style=\"aspect-ratio:1;object-fit:cover;width:120px;height:undefinedpx\"\/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-small-font-size\"><strong>videoMashHTML<\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title\" style=\"cursor:inherit\">Contents<\/div>\n<label for=\"ez-toc-cssicon-toggle-item-69f10fb76755d\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69f10fb76755d\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#Intermediate_HTML_with_a_dash_of_CSS\" >Intermediate HTML (with a dash of CSS)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#Creating_a_curated_website\" >Creating a curated website<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#Bare_bones\" >Bare bones<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#Step_1_Semantic_HTML\" >Step 1: Semantic HTML<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#Semantic_elements_as_building_blocks_in_a_wireframe\" >Semantic elements as building blocks in a wireframe<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#Step_2_Descriptive_content_in_a_tabbed_hierarchy\" >Step 2: Descriptive content in a tabbed hierarchy<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#Structure_and_style\" >Structure and style<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#Step_3_External_CSS_to_style_fonts_links_and_sizes\" >Step 3: External CSS to style fonts, links, and sizes<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#Add_properties_to_elements\" >Add properties to elements<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#Step_4_Create_a_heading_centered_text_and_a_sticky_footer\" >Step 4: Create a heading, centered text, and a sticky footer<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#What_is_a_%E2%80%9Csticky%E2%80%9D_footer\" >What is a &#8220;sticky&#8221; footer?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#Step_5_Create_site_pages_customize_navigation_and_link\" >Step 5: Create site pages, customize navigation, and link<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#Content_and_refinement\" >Content and refinement<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#Step_6_Add_animated_background_images\" >Step 6: Add animated background images<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#Step_7_Add_iframes_and_customize_videos\" >Step 7: Add iframes and customize videos<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#Create_the_iframe\" >Create the iframe<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#Modify_with_CSS\" >Modify with CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#Modify_with_YouTube_API\" >Modify with YouTube API<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#A_word_of_caution_regarding_YouTube_API\" >A word of caution regarding YouTube API<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#Step_8_Add_final_refinements\" >Step 8: Add final refinements<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#Add_a_video_clipping_mask\" >Add a video clipping mask<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#Add_a_glow_effect\" >Add a glow effect<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#Add_citations_in_comments\" >Add citations in comments<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#Optional_refinements\" >Optional refinements<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#Go_live\" >Go live!<\/a><\/li><\/ul><\/nav><\/div>\n\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:100%\">\n<p class=\"has-text-align-center\"><em><strong><a href=\"https:\/\/williamcromar.com\/code_samples\/rps23\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\">Visit the videoMash site here &gt;<\/a><\/strong><\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Intermediate_HTML_with_a_dash_of_CSS\"><\/span>Intermediate HTML (with a dash of CSS)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>We&#8217;ll use HTML tools that allow a great deal of visual order to create a curated website in an exercise we call <strong>Video Mash<\/strong>.<\/p>\n\n\n\n<p><strong>Video Mash<\/strong> is a small, curated website that requires directory skills, a simple navigation link strategy, knowledge of embedding video via <strong>iframe<\/strong>, and control of screen real estate through the use of&nbsp;<strong>Semantic HTML<\/strong>. Though we&#8217;ll need a bit of CSS, the focus in this exercise is on expanding your HTML skills.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<iframe style=\"clip-path: circle(28% at 50% 50%);\naspect-ratio: 1\/1; width: 100%;\" src=\"https:\/\/www.youtube-nocookie.com\/embed\/q5N6GMwV9ds?rel=0&#038;&#038;mute=1&#038;controls=0&#038;showinfo=0&#038;autoplay=1&#038;modestbranding=1&#038;loop=1&#038;playlist=q5N6GMwV9ds&#038;start=0\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen kwframeid=\"3\"><\/iframe>\n\n\n\n<p class=\"has-text-align-center\"><em>TangenT ArT CollaboraTive, <strong>First Cut<\/strong> <strong>Sketch<\/strong>, 2010<\/em> \u2014 one of the video embeds in the sample site.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"669\" data-attachment-id=\"4731\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/709b\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/709b.png\" data-orig-size=\"2818,1841\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"709b\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/709b-1024x669.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/709b-1024x669.png\" alt=\"\" class=\"wp-image-4731\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/709b-1024x669.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/709b-300x196.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/709b-768x502.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/709b-1536x1003.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/709b-2048x1338.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>TangenT ArT CollaboraTive, <strong>709b<\/strong>, 2010-11<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Before doing the exercise, visit TangenT Art Collaborative&#8217;s&nbsp;<strong><a href=\"https:\/\/williamcromar.com\/709b\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\">709b<\/a><\/strong>, a web &#8220;installation&#8221; using embedded videos. The site demonstrates the importance of <strong>adjacency <\/strong>and<strong> positioning<\/strong> as formal principles. <strong>709B<\/strong> places multiple video embeds in one page, allowing them to be seen simultaneously. TangenT was active between 2008 and 2020, when the pandemic forced the collaborative to disband.<\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Creating_a_curated_website\"><\/span>Creating a curated website<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Below, we&#8217;ll go step by step through the creation of a website where we appropriate video and motion graphics, creating a story framed by some kind of iconic group. In our sample Video Mash, we chose <em><strong>Rock Paper Scissors<\/strong><\/em>. You can use that, or you can develop something similar with a small group of 3 or 4, like:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:50%\">\n<p class=\"has-text-align-center\"><strong>THREES<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>Earth, Air, Fire, Water<\/em><\/li>\n\n\n\n<li><em>Blood, Sweat, Tears<\/em><\/li>\n\n\n\n<li><em>Red, Green, Blue<\/em><\/li>\n\n\n\n<li><em>Father, Son, Holy Ghost<\/em><\/li>\n\n\n\n<li><em>Life, Liberty, Pursuit of Happiness<\/em><\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:50%\">\n<p class=\"has-text-align-center\"><strong>FOURS<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>Diamonds, Clubs, Hearts, Spades<\/em><\/li>\n\n\n\n<li><em>Cyan, Magenta, Yellow, Black<\/em><\/li>\n\n\n\n<li><em>Dawn, Day, Twilight, Night<\/em><\/li>\n\n\n\n<li><em>Leonardo, Michelangelo, Donatello, Raphael<\/em><\/li>\n\n\n\n<li><em>Solid, Liquid, Gas, Plasma<\/em><\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<p>You get the idea, right? With idea in hand, let&#8217;s code!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Bare_bones\"><\/span>Bare bones<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>Define a site in Dreamweaver in a directory folder named <strong>video-mash <\/strong>or something equally logical. Our folder was named <strong>rps23<\/strong>, standing for <em>Rock Paper Scissors<\/em> plus the year it was made. Place this folder in your local <strong>root folder<\/strong>. It will be a subdirectory in the root folder, in effect partitioning the work to become an autonomous mini-site in the same manner as your <strong>helloworld<\/strong> exercise.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"856\" height=\"730\" data-attachment-id=\"4737\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/vid-directory\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/vid-directory.png\" data-orig-size=\"856,730\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"vid-directory\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/vid-directory.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/vid-directory.png\" alt=\"\" class=\"wp-image-4737\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/vid-directory.png 856w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/vid-directory-300x256.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/vid-directory-768x655.png 768w\" sizes=\"auto, (max-width: 856px) 100vw, 856px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_1_Semantic_HTML\"><\/span>Step 1: Semantic HTML<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>In <strong>Hello World<\/strong>, you structured your site using <code>&lt;div&gt;<\/code> and <code>&lt;span&gt;<\/code> tags. These are great, but when you&#8217;ve created a highly structured complex web page, it gets hard to tell what kind of role has been assigned to one of these tags. Does that &lt;div&gt; hold a navigation bar? Even worse, when you get down to the closing tags, you can see this kind of nightmare:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<pre class=\"wp-block-code\"><code>         &lt;\/div&gt;\n      &lt;\/div&gt;\n   &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p>Even if you&#8217;ve been careful with tabs on your nesting &lt;div&gt; tags, it&#8217;s nearly impossible to tell which closing tag belongs to which element.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>If you just had something more descriptive, you might be able to keep track of the hierarchy. You could, for example, use <strong><a href=\"https:\/\/www.geeksforgeeks.org\/html-comments\/\" target=\"_blank\" rel=\"noreferrer noopener\">HTML comments<\/a><\/strong>.  The comment tag is distinctive: <code>&lt;!-- comment goes here --&gt;<\/code>. This is a way of making notes on the code that the browser won&#8217;t display:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<pre class=\"wp-block-code\"><code>         &lt;\/div&gt;&lt;!--end content--&gt;\n      &lt;\/div&gt;&lt;!--end footer--&gt;\n   &lt;\/div&gt;&lt;!--end container--&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p>But while we dearly love and encourage carefully commented code, this solution is a sludgy one, almost as bad as the problem it tries to solve. Fortunately there is something that brings clarity to the chaos: <strong><a href=\"https:\/\/www.geeksforgeeks.org\/html5-semantics\/\" target=\"_blank\" rel=\"noreferrer noopener\">Semantic HTML<\/a><\/strong>!<\/p>\n\n\n\n<p>A semantic element clearly describes its meaning to you. It also helps a browser that&#8217;s been trained to recognize semantic tags understand what and how to display an element, and it&#8217;s an accessible assist to users with a screen reader. Almost all modern browsers understand semantic tags.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>So if you have a footer with some content, all sitting within an overall container, your close looks like this:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<pre class=\"wp-block-code\"><code>         &lt;\/div&gt;\n      &lt;\/footer&gt;\n   &lt;\/container&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Semantic_elements_as_building_blocks_in_a_wireframe\"><\/span>Semantic elements as building blocks in a wireframe<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>Most websites have a structure. You may recognize elements like a header title, a bar for navigation, a main content area, perhaps a sidebar, and a footer at the bottom. Many contain code like <code>&lt;div id=\"header\"&gt;<\/code>, <code>&lt;div id=\"nav\"&gt;<\/code>, or <code>&lt;div id=\"footer\"&gt;<\/code> to indicate a header, navigation, or footer. In Semantic HTML some semantic elements can be used to intuitively and clearly define different parts of a web page without resorting to IDs or comments. We can visualize these in a wireframe:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"219\" height=\"258\" data-attachment-id=\"4748\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/img_sem_elements\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/img_sem_elements.gif\" data-orig-size=\"219,258\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"img_sem_elements\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/img_sem_elements.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/img_sem_elements.gif\" alt=\"\" class=\"wp-image-4748\"\/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>A <a href=\"https:\/\/en.wikipedia.org\/wiki\/Website_wireframe\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>wireframe structure<\/strong><\/a> of a typical website<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>We&#8217;ll keep our site structure pretty simple for this exercise. Open the link for Step 1 to inspect the code.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:50%\">\n<p class=\"has-text-align-center\"><strong><em><a href=\"https:\/\/williamcromar.com\/code_samples\/rps23\/zstep1\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\">Visit Step 1 &gt;<\/a><\/em><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In Dreamweaver, create a new HTML document in our new directory. Name the file <strong>index.html<\/strong>, and note it comes automatically loaded with a <code>&lt;head&gt;<\/code> pair, a <code>&lt;title&gt;<\/code> inside the head, a <code>&lt;body&gt;<\/code>, and other elements.<\/li>\n\n\n\n<li>Nested inside <code>&lt;body&gt;<\/code>, write in the semantic <code>&lt;container&gt;<\/code> tag. Don&#8217;t forget the close: <code>&lt;\/container&gt;<\/code>!<\/li>\n\n\n\n<li>Semantic elements can nest just like generic <code>&lt;div&gt;<\/code> tags. Inside <code>&lt;container&gt;<\/code>, add a <code>&lt;header&gt;<\/code>, <code>&lt;nav&gt;<\/code>, <code>&lt;main&gt;<\/code>, and <code>&lt;footer&gt;<\/code> tag. You can use Dreamweaver&#8217;s Menu <strong>Insert &gt;<\/strong> to add most of these, or you can write them by hand.<\/li>\n\n\n\n<li>Inside each element, create an empty <code>&lt;div&gt;<\/code>. If you use Dreamweaver&#8217;s menu to add this HTML element, it will contain the boilerplate text <em>Content for New Div Tag Goes Here<\/em>.<\/li>\n<\/ul>\n\n\n\n<p>Save and open the page in a browser. This doesn&#8217;t look like much, but open the source code and you&#8217;ll see the beginning of a structure.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_2_Descriptive_content_in_a_tabbed_hierarchy\"><\/span>Step 2: Descriptive content in a tabbed hierarchy<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>Open the link to Step 2 to see the sample code. You&#8217;ll see some comments to guide you with the steps below.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:50%\">\n<p class=\"has-text-align-center\"><strong><em><a href=\"https:\/\/williamcromar.com\/code_samples\/rps23\/zstep2\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\">Visit Step 2 &gt;<\/a><\/em><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>Let&#8217;s change the boilerplate to something we might use in the site:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>First, take some time to change the <code>&lt;title&gt;<\/code> tag content in the <code>&lt;head&gt;<\/code> so this title will display in a browser tab. Our sample site is <em>Rock Paper Scissors<\/em>. <\/li>\n\n\n\n<li>In <code>&lt;header&gt;<\/code>, title the work. Notice we&#8217;re adding a special character known as a non-breaking space \u2014 <code>&amp;nbsp;<\/code> \u2014 so that it won&#8217;t word-wrap when the browser resizes.<\/li>\n\n\n\n<li>In <code>&lt;nav&gt;<\/code>, create some <code>&lt;span&gt;<\/code> tags to contain a generic navigation flow: <em>previous<\/em>, <em>home<\/em>, and <em>next<\/em>. We&#8217;re using a few non-breaking spaces to visually separate the text. By the way, don&#8217;t worry that there&#8217;s nothing to link to at the moment. The code on this page will eventually become a template for other pages, and you&#8217;ll see this is a big time-saver.<\/li>\n\n\n\n<li>In <code>&lt;main&gt;<\/code>, just write a brief introductory phrase to introduce the site. In our sample, we used <em>let&#8217;s settle this like adults<\/em> as a cheeky phrase people use when playing the rock-paper-scissors game.<\/li>\n\n\n\n<li>Finally in &lt;footer&gt;, include something appropriate to suggest purpose and authorship. In our sample, we used <em>a web art installation by williamCromar 2023<\/em>.<\/li>\n<\/ul>\n\n\n\n<p>Save the file and inspect it in a browser. There&#8217;s not a lot to see, but the descriptive content is starting to create a sense of purpose.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Structure_and_style\"><\/span>Structure and style<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_3_External_CSS_to_style_fonts_links_and_sizes\"><\/span>Step 3: External CSS to style fonts, links, and sizes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>Open the link to Step 3 to see the sample code, and note that there is an external CSS document linked. You&#8217;ll see some <strong><a href=\"https:\/\/www.geeksforgeeks.org\/css-comments\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS comments<\/a><\/strong> there: <code>\/* comment goes here *\/<\/code>. These comments will guide you through the steps below.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:50%\">\n<p class=\"has-text-align-center\"><strong><em><a href=\"https:\/\/williamcromar.com\/code_samples\/rps23\/zstep3\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\">Visit Step 3 &gt;<\/a><\/em><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>In your directory, create a subdirectory and name it <strong>css<\/strong>. In Dreamweaver, create a new CSS file and give it a logical name. For the sample file, we named ours <strong>rps-styles.css<\/strong>.  Place it in the <strong>css<\/strong> folder.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Recall from the previous exercise: it&#8217;s easy to attach a CSS document using the <strong>Properties<\/strong> palette, finding the <strong>Class<\/strong> button, and selecting <strong>Attach Style Sheet&#8230;<\/strong> to navigate to our file.<\/li>\n\n\n\n<li>Once we&#8217;ve attached the CSS, we&#8217;ll use <strong>Properties: CSS: Page Properties<\/strong> to open the <strong>Page Properties<\/strong> dialog box. <\/li>\n\n\n\n<li>As we did in the previous exercise: we&#8217;ll select a Page font family, choose a text and background color, and style the links. As before, it will generate the code in the HTML head, so we have to copy and paste it into the CSS, and then delete it from the HTML.<\/li>\n\n\n\n<li>Now, for most of the elements, we want to create a unique color to help us visualize the sizes we&#8217;ll create. You can use CSS Designer or hand-code these element styles. Note that we are not creating classes or IDs here: we are styling by selector. So, for example, to apply style to the <code>&lt;header&gt;<\/code> tag, we simply write <code>header { }<\/code>.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Add_properties_to_elements\"><\/span>Add properties to elements<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>These are the color and size values for the elements in our sample. Breaking this down a bit:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Colors are just arbitrary <a href=\"https:\/\/www.websiteoptimization.com\/speed\/tweak\/hex\/\" target=\"_blank\" rel=\"noreferrer noopener\">shorthand hex notation<\/a> for gray tones, like <code>#ccc<\/code> and <code>#999<\/code>. These are temporary and will be changed later.<\/li>\n\n\n\n<li>Heights are accomplished by a combination of <code>height<\/code> and <code>padding<\/code> values. So, for example, the header is 100px tall: 60px for height plus + 2\u202220px for padding. Notice there is only padding for <code>&lt;main&gt;<\/code>, because its height can vary with its content.<\/li>\n\n\n\n<li>What about <code>width<\/code>? One of the benefits of Semantic HTML is that browsers assume a 100% width for structural elements like a header or footer, so no declaration is necessary!<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"wp-block-code\"><code>header {\n    background-color: #ccc; \n    color: #fff;\n    height: 60px;\n    padding: 20px;\n}\n\nnav {\n    background-color: #999;\n    color: #fff;\n    height: 20px;\n    padding: 20px;\n}\n\nmain {\n    color: #fff;\n    padding: 20px;\n}\n\nfooter {\n    background-color: #999;\n    color: #fff;\n    height: 20px;\n    padding: 20px;\n}<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p>Open the file in a browser window and inspect it. Notice how the width changes automatically as you resize the browser window horizontally.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_4_Create_a_heading_centered_text_and_a_sticky_footer\"><\/span>Step 4: Create a heading, centered text, and a sticky footer<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>Open the link to Step 4 now, commented as above to assist with the work.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:50%\">\n<p class=\"has-text-align-center\"><strong><em><a href=\"https:\/\/williamcromar.com\/code_samples\/rps23\/zstep4\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\">Visit Step 4 &gt;<\/a><\/em><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>We&#8217;re doing some formatting in this next step that provides more structure and a measure of <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/CSS\/CSS_layout\/Responsive_Design\" target=\"_blank\" rel=\"noreferrer noopener\">responsive design<\/a>. Though our code is not fully responsive in this exercise \u2014 that&#8217;s going to take more skill-building than we have time for \u2014 you&#8217;ll see how this page will work on a variety of browser window sizes.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select the title text and use the <strong>Properties<\/strong> palette <strong>HTML: Format: Heading 1<\/strong> to format it as <code>&lt;h1&gt;<\/code>. Observe the text change in size, but notice the header element does not change height.<\/li>\n\n\n\n<li>Now, select each element from open to close (for example: select &lt;header&gt; and all the contents up to and including the <code>&lt;\/header&gt;<\/code> close). For each element, use the <strong>Properties<\/strong> palette <strong>CSS: Align Center<\/strong> icon \u2014 it looks just like a justification icon from Word. Notice that the property and value <code>text-align: center;<\/code> are written directly in the CSS file now!<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_a_%E2%80%9Csticky%E2%80%9D_footer\"><\/span>What is a &#8220;sticky&#8221; footer?<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Now comes the tricky part: we need to create a &#8220;sticky&#8221; footer. That&#8217;s a footer that will stay at the bottom of the browser window no matter the size of the content in <code>&lt;main&gt;<\/code>&#8230; <em>except when that content is taller than the browser window!<\/em> In that case, we want the footer to &#8220;stick&#8221; to the bottom of the content, not the window. This seems like a super tricky thing to pull off, but the answer is deceptively easy, if not entirely intuitive. We find it in <a href=\"https:\/\/css-tricks.com\/couple-takes-sticky-footer\/\" target=\"_blank\" rel=\"noreferrer noopener\">Chris Coyier&#8217;s post on the topic at <strong>CSS Tricks<\/strong><\/a>, a widely respected developer site. The simplest coding solution involves the use of the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/calc\" target=\"_blank\" rel=\"noreferrer noopener\">CSS <strong>calc()<\/strong> function<\/a>:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<ul class=\"wp-block-list\">\n<li>In the CSS, find the <code>main<\/code> element and add a <code>min-height:<\/code> property with the <code>calc( )<\/code> function inserted as a value.<\/li>\n\n\n\n<li>Here&#8217;s the secret sauce: we can make the minimum height for <code>main<\/code> <em>variable<\/em> by subtracting the total height of all the other elements from 100% of the viewport height. \n<ul class=\"wp-block-list\">\n<li>In CSS, the viewport height can be expressed as a unit: <strong>vh<\/strong>. <code>100vh<\/code> is 100% of the viewport height.<\/li>\n\n\n\n<li>The total height of all other elements is 256px. The bottom line math is this:<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"wp-block-code\"><code>main {\n    color: #fff;\n<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">    min-height: calc(100vh - 256px);\n<\/mark>    padding-top: 20px;\n    padding-left: 20px;\n    padding-right: 20px;\n    text-align: center;\n}<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p>&nbsp;&nbsp;&nbsp;<strong>100px<\/strong> (header height + 2X padding) <br><strong>+&nbsp;&nbsp;60px<\/strong> (nav height + 2X padding) <br><strong>+&nbsp;&nbsp;20px<\/strong> (main top padding) <br><strong>+&nbsp;&nbsp;60px<\/strong> (footer height + 2X padding) <br><strong>+&nbsp;&nbsp;16px<\/strong> (2x default browser border) <br><strong>=&nbsp;256px<\/strong> (fixed heights to subtract from variable main height)<\/p>\n<\/div>\n<\/div>\n\n\n\n<p>By tying the minimum height of <code>&lt;main&gt;<\/code> to the viewport height, whenever the content height is <em>taller<\/em> than the viewport \u2014 that is, <em>more than the minimum<\/em> \u2014 the footer will stick to the bottom of the content, not the window. But whenever the content height is <em>shorter<\/em> than the viewport \u2014 that is, <em>less than the minimum <\/em>\u2014 the footer will stick to the bottom of the window, not the content. Get it?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_5_Create_site_pages_customize_navigation_and_link\"><\/span>Step 5: Create site pages, customize navigation, and link<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>Open the link to Step 5 now:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:50%\">\n<p class=\"has-text-align-center\"><strong><em><a href=\"https:\/\/williamcromar.com\/code_samples\/rps23\/zstep5\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\">Visit Step 5 &gt;<\/a><\/em><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>We&#8217;ve spent a lot of time just working on one page. Is it going to as long to create all the other pages?<\/p>\n\n\n\n<p>Thank goodness, NO! Most everything we&#8217;ve done for <strong>index.html<\/strong> will work for other pages. We&#8217;ll simply copy and paste <strong>index.html<\/strong> in the directory window, change file names, and then do some tweaking.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<ul class=\"wp-block-list\">\n<li>In the directory, copy <strong>index.html<\/strong> 3 or 4 times, depending on the pages needed.<\/li>\n\n\n\n<li>Rename the files. In the sample, we named them <strong>video01.html<\/strong>, <strong>video02.html<\/strong>, and <strong>video03.html<\/strong>.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"856\" height=\"864\" data-attachment-id=\"4818\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/vid-directory-2\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/vid-directory-2.png\" data-orig-size=\"856,864\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"vid-directory-2\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/vid-directory-2.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/vid-directory-2.png\" alt=\"\" class=\"wp-image-4818\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/vid-directory-2.png 856w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/vid-directory-2-297x300.png 297w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/vid-directory-2-150x150.png 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/vid-directory-2-768x775.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/vid-directory-2-100x100.png 100w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/vid-directory-2-300x303.png 300w\" sizes=\"auto, (max-width: 856px) 100vw, 856px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>Open each of the files in Dreamweaver to adjust navigation and create links:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In <strong>index.html<\/strong>, you&#8217;ll need at least one entry into the cycle of pages. In ours, we deleted <em>previous<\/em> and <em>home<\/em> along with all spans and non-breaking spaces associated with them. Your scheme can be similar, or not. An alternative, for example, could be changing <em>previous<\/em>, <em>home<\/em>, and <em>next<\/em> into <em>rock<\/em>, <em>paper<\/em>, and <em>scissors<\/em>, and linking to all the pages.<\/li>\n\n\n\n<li>On all other pages, we leave existing spans and text intact. This provides links to return home anytime or travel forward or backward along the cycle.<\/li>\n\n\n\n<li>Back in <strong>index.html<\/strong>, we select <em>next<\/em> and use the <strong>Properties<\/strong> palette <strong>HTML: Link<\/strong> to connect to <strong>video01.html<\/strong>. We use the folder icon to navigate and select that file. Note the code Dreamweaver creates.<\/li>\n\n\n\n<li>Now go into each file, and create links in the same manner, as appropriate to each page&#8217;s position in the cycle. For example, <strong>video01.html<\/strong> navigation will link <em>previous<\/em> to <strong>video03.html<\/strong>, <em>home<\/em> to <strong>index.html<\/strong>, and <em>next<\/em> to <strong>video02.html<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p>Use <strong>File &gt; Save All<\/strong> as a quick way to save all the work being done in multiple pages, then open the home page in a browser window and test all the links.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Content_and_refinement\"><\/span>Content and refinement<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Now the fun starts! We&#8217;ve manufactured the digital equivalent of a blank book, now let&#8217;s fill it. Video Mash is an <strong><a href=\"https:\/\/www.tate.org.uk\/art\/art-terms\/a\/appropriation\" target=\"_blank\" rel=\"noreferrer noopener\">appropriation project<\/a><\/strong> throwing lots of motion together on a page. Appropriation is an art-historical term that refers to the practice of artists using pre-existing objects or images in their art. Much of web art is based on mash-ups, remixes, and transformations. These are not the same as stealing or plagiarizing, though there is a gray area here one should be very mindful to avoid. The best way to stay out of trouble is to create a citation or a link back to the original material, which we will do.<\/p>\n\n\n\n<p>Our goal here is to appropriate existing motion graphic elements and <em>transform their content<\/em> by collaging them in HTML and CSS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_6_Add_animated_background_images\"><\/span>Step 6: Add animated background images<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>The humble looping GIF animation is a favorite of many artists working on the web, including this author. Visit the Step 6 link for the sample file to see how we used GIFS as background images:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:50%\">\n<p class=\"has-text-align-center\"><strong><em><a href=\"https:\/\/williamcromar.com\/code_samples\/rps23\/zstep6\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\">Visit Step 6 &gt;<\/a><\/em><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>For this step, we spend some time doing intelligent keyword searching in a browser for images that relate to our topic. This can take some time as you consider myriad choices! The material we found for 4 discrete pages includes the following. Click on each one for the source: <\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/web.archive.org\/web\/20161006223650\/http:\/\/wonderfulengineering.com\/this-robot-can-beat-you-in-rock-paper-scissors-every-time\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"309\" data-attachment-id=\"4825\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/the-robot-that-wins-rock-paper-scissors-every-time-2\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/The-Robot-That-Wins-Rock-Paper-Scissors-Every-Time-2.gif\" data-orig-size=\"480,309\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"The-Robot-That-Wins-Rock-Paper-Scissors-Every-Time-2\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/The-Robot-That-Wins-Rock-Paper-Scissors-Every-Time-2.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/The-Robot-That-Wins-Rock-Paper-Scissors-Every-Time-2.gif\" alt=\"\" class=\"wp-image-4825\"\/><\/a><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"600\" data-attachment-id=\"4835\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/rps2a\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/rps2a.gif\" data-orig-size=\"800,600\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"rps2a\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/rps2a.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/rps2a.gif\" alt=\"\" class=\"wp-image-4835\"\/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/gifer.com\/en\/EYKU\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/williamcromar.com\/code_samples\/rps23\/zstep6\/images\/EYKU.webp\" alt=\"\"\/><\/a><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/web.archive.org\/web\/20230819035017\/https:\/\/thumbs.gfycat.com\/RegalAssuredGossamerwingedbutterfly-size_restricted.gif\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"282\" data-attachment-id=\"4828\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/regalassuredgossamerwingedbutterfly-size_restricted\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/RegalAssuredGossamerwingedbutterfly-size_restricted.gif\" data-orig-size=\"500,282\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"RegalAssuredGossamerwingedbutterfly-size_restricted\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/RegalAssuredGossamerwingedbutterfly-size_restricted.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/RegalAssuredGossamerwingedbutterfly-size_restricted.gif\" alt=\"\" class=\"wp-image-4828\"\/><\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>First, some directory work:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>After collecting your moving images and making note of the sources, create a subdirectory in the root folder named <strong>images<\/strong>.<\/li>\n\n\n\n<li>Insert your images in that folder. If the names are unwieldy, you may choose to rename them.<\/li>\n<\/ul>\n\n\n\n<p>Now, to Dreamweaver:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to <strong>index.html<\/strong>.<\/li>\n\n\n\n<li>Use <strong>Properties<\/strong> palette <strong>CSS: Page Properties<\/strong> to open the <strong>Page Properties<\/strong> dialog box.<\/li>\n\n\n\n<li>Under <strong>Appearance (CSS)<\/strong>, <strong>Browse<\/strong> for the <strong>Background image:<\/strong> and select. You&#8217;ll see the URL populate the field. <\/li>\n\n\n\n<li>Under <strong>Repeat:<\/strong> select <strong>no-repeat<\/strong>. Click <strong>OK<\/strong>.<\/li>\n\n\n\n<li>Repeat for the other pages.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"816\" height=\"1024\" data-attachment-id=\"4837\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/vid-directory-3\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/vid-directory-3.png\" data-orig-size=\"856,1074\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"vid-directory-3\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/vid-directory-3-816x1024.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/vid-directory-3-816x1024.png\" alt=\"\" class=\"wp-image-4837\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/vid-directory-3-816x1024.png 816w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/vid-directory-3-239x300.png 239w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/vid-directory-3-768x964.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/vid-directory-3-300x376.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/vid-directory-3.png 856w\" sizes=\"auto, (max-width: 816px) 100vw, 816px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>Observe how Dreamweaver places the images. Depending on the size of the original, you may feel disappointed, but fear not: we can introduce some code by hand that can make the background responsive:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>This is the code Dreamweaver created in the <code>&lt;head&gt;<\/code> in our sample:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<pre class=\"wp-block-code\"><code>&lt;style type=\"text\/css\"&gt;\n   body {background-image: url(images\/rpc2.gif);\n   background-repeat: no-repeat;\n   }\n&lt;\/style&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>We&#8217;ll add the following properties and values, highlighted in red:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<pre class=\"wp-block-code\"><code>&lt;style type=\"text\/css\"&gt;\n   body {background-image: url(images\/rpc2.gif);\n   background-repeat: no-repeat;\n<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">   background-attachment: fixed;\n   background-position: center;\n   background-size: cover;\n<\/mark>   }\n&lt;\/style&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p>Observe the image again by opening it in a browser and resizing the window. You should see the background image shift to fill the entire viewport, no matter the size. Do this for each page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_7_Add_iframes_and_customize_videos\"><\/span>Step 7: Add iframes and customize videos<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>The <code>&lt;iframe&gt;<\/code> tag will allow us to embed videos from other sites. Visit Step 7 and click on the interesting new link elements to see the embedded videos on all the pages:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:50%\">\n<p class=\"has-text-align-center\"><strong><em><a href=\"https:\/\/williamcromar.com\/code_samples\/rps23\/zstep7\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\">Visit Step 7 &gt;<\/a><\/em><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>In this step, we&#8217;re seeking out videos that embody our theme: one for <em>rock<\/em>, one for <em>paper<\/em>, and one for <em>scissors<\/em>. Using keywords in a browser search for videos, we spend some time deliberating how these would affect each other when we juxtapose a pair of videos on one page. In the Rock-Paper-Scissors game, we know rock dulls scissors, paper covers rock, and scissors will cut paper. So that&#8217;s driving our choices, and it will also create an opportunity to make other minor refinements.<\/p>\n\n\n\n<p>Here are the videos we chose, embedded in iframes, and since they link back to the sources, you can find where we found them:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<iframe style=\"aspect-ratio: 1\/1; width: 100%; max-width: 540px;\" src=\"https:\/\/www.youtube-nocookie.com\/embed\/zRHtSuACTiM?controls=0&#038;mute=1&#038;autoplay=1&#038;loop=1&#038;playlist=zRHtSuACTiM&#038;start=11\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen kwframeid=\"1\"><\/iframe>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<iframe style=\"aspect-ratio: 1\/1; width: 100%; max-width: 540px;\" src=\"https:\/\/www.youtube-nocookie.com\/embed\/OmOEnfQk3bw?controls=0&#038;mute=1&#038;autoplay=1&#038;loop=1&#038;start=196\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen kwframeid=\"2\"><\/iframe>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<iframe style=\"aspect-ratio: 1\/1; width: 100%; max-width: 540px;\" src=\"https:\/\/www.youtube-nocookie.com\/embed\/q5N6GMwV9ds?controls=0&#038;mute=1&#038;autoplay=1&#038;loop=1&#038;playlist=q5N6GMwV9ds&#038;start=0\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen kwframeid=\"3\"><\/iframe>\n<\/div>\n<\/div>\n\n\n\n<p>You might find these YouTube videos present in a unique way. Their sound is muted, they resize, and they loop when they play, among other behaviors (and if you happen to see a warning instead of a video, refresh this browser screen). We&#8217;re going to learn how to customize video iframe presentation using a combination of CSS and the <strong><a href=\"https:\/\/developers.google.com\/youtube\/player_parameters\" target=\"_blank\" rel=\"noreferrer noopener\">YouTube iFrame Player API<\/a><\/strong>, both discussed below.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_the_iframe\"><\/span>Create the iframe<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>YouTube will generate an iframe embed for you:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"742\" height=\"1024\" data-attachment-id=\"4873\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/ytshare1\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ytshare1.png\" data-orig-size=\"1442,1990\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"ytshare1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ytshare1-742x1024.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ytshare1-742x1024.png\" alt=\"\" class=\"wp-image-4873\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ytshare1-742x1024.png 742w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ytshare1-217x300.png 217w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ytshare1-768x1060.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ytshare1-1113x1536.png 1113w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ytshare1-300x414.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ytshare1.png 1442w\" sizes=\"auto, (max-width: 742px) 100vw, 742px\" \/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Visit the video you wish to embed on YouTube and find the <strong>Share<\/strong> button.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"742\" height=\"1024\" data-attachment-id=\"4874\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/ytshare2\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ytshare2.png\" data-orig-size=\"1442,1990\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"ytshare2\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ytshare2-742x1024.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ytshare2-742x1024.png\" alt=\"\" class=\"wp-image-4874\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ytshare2-742x1024.png 742w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ytshare2-217x300.png 217w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ytshare2-768x1060.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ytshare2-1113x1536.png 1113w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ytshare2-300x414.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ytshare2.png 1442w\" sizes=\"auto, (max-width: 742px) 100vw, 742px\" \/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>After selecting <strong>Share<\/strong>, find the <strong>Embed<\/strong> button in the dialog box.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"729\" height=\"1024\" data-attachment-id=\"4875\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/ytshare3\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ytshare3.png\" data-orig-size=\"1354,1902\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"ytshare3\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ytshare3-729x1024.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ytshare3-729x1024.png\" alt=\"\" class=\"wp-image-4875\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ytshare3-729x1024.png 729w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ytshare3-214x300.png 214w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ytshare3-768x1079.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ytshare3-1093x1536.png 1093w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ytshare3-300x421.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ytshare3.png 1354w\" sizes=\"auto, (max-width: 729px) 100vw, 729px\" \/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Uncheck <strong>share player controls<\/strong> and <strong>check enable privacy-enhanced mode<\/strong>, then copy the code.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<p>The embed written on YouTube is this:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"wp-block-code\"><code>&lt;iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube-nocookie.com\/embed\/q5N6GMwV9ds?si=t0oDSbNDwxvfmUcW&amp;amp;controls=0\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen&gt;&lt;\/iframe&gt;<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube-nocookie.com\/embed\/q5N6GMwV9ds?si=t0oDSbNDwxvfmUcW&amp;controls=0\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Modify_with_CSS\"><\/span>Modify with CSS<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Some of that code, we don&#8217;t need. For other parts of it, we&#8217;ll work with CSS. So the first step is to get rid of the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Delete all instances of <code>width=\"XXX\" height=\"YYY\"<\/code>.<\/li>\n\n\n\n<li>Delete all instances of <code>title=\"YouTube video player\"<\/code>.<\/li>\n<\/ul>\n\n\n\n<p>Now, we head to CSS, where we will add the following element-level style:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<ul class=\"wp-block-list\">\n<li>A<code>spect-ratio:<\/code> value of <code>1\/1<\/code> will create a square proportion for the frame.<\/li>\n\n\n\n<li><code>Width:<\/code> value of <code>100%<\/code> will resize the frame to fit its container. Because the aspect-ratio is a square, the height will follow this width.<\/li>\n\n\n\n<li>Setting a <code>max-width<\/code> value will allow frames to stack when the viewport is in portrait mode, and present side-by-side when in landscape. In our sample, we set it to <code>540px<\/code>.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<pre class=\"wp-block-code\"><code>iframe {\n\taspect-ratio: 1\/1;\n\twidth: 100%;\n\tmax-width: 540px;\n}<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Modify_with_YouTube_API\"><\/span>Modify with YouTube API<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>The <strong>API<\/strong> in <strong><a href=\"https:\/\/developers.google.com\/youtube\/player_parameters\" target=\"_blank\" rel=\"noreferrer noopener\">YouTube API<\/a><\/strong> stands for&nbsp;<strong>Application Programming Interface<\/strong>. <em>Application Programming<\/em> refers to the specific player parameters found on the YouTube website. <em>Interface<\/em> can be thought of as a way for your code to conform to those parameters. Some of the parameters YouTube pushes to your site are defaults that can make an embed kind of a hot mess. Knowing the API allows you some control over those parameters, turning some on and others off.<\/p>\n\n\n\n<p>With YouTube&#8217;s more annoying embed functionality out of the way and other non-default functionality added, your iframe embed is cleaner and more professional on your site. The additions we made within the iframe tag after&nbsp;<code>controls=0<\/code>&nbsp;include the following (with the playlist video ID copied in from the embed URL). Each parameter is separated in the code string with a <strong>&amp;<\/strong>: <\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<ul class=\"wp-block-list\">\n<li><code>mute=1<\/code> (turns on mute)<\/li>\n\n\n\n<li><code>autoplay=1<\/code> (turns on autoplay)<\/li>\n\n\n\n<li><code>loop=1<\/code> (turns on looping)<\/li>\n\n\n\n<li><code>playlist=<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">q5N6GMwV9ds<\/mark><\/code> (works in conjunction with loop)<\/li>\n\n\n\n<li><code>start=X<\/code> (used in cases where the video starts somewhere other than the beginning \u2014 here, only for illustration)<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"wp-block-code\"><code>&lt;iframe src=\"https:\/\/www.youtube-nocookie.com\/embed\/<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">q5N6GMwV9ds<\/mark>?si=t0oDSbNDwxvfmUcW&amp;amp;controls=0<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">&amp;mute=1&amp;autoplay=1&amp;loop=1&amp;playlist=q5N6GMwV9ds&amp;start=0<\/mark>\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen&gt;&lt;\/iframe&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"A_word_of_caution_regarding_YouTube_API\"><\/span>A word of caution regarding YouTube API<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#ffeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><strong><em>CAUTION: YouTube&#8217;s API is shifting sand. Many controllable behaviors that made YouTube a desirable sharing site have been revoked in recent years. Most changes have involved pushing a &#8220;core user experience&#8221; to your embeds. I call BS: these are not &#8220;core&#8221; to any &#8220;experience&#8221; &#8230; they are marketing for YouTube!  If you don&#8217;t want to deal with YouTube&#8217;s increasingly pushy branding or chrome, visit a site like <a href=\"https:\/\/vimeo.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Vimeo<\/a>, which may yield better results.<\/em><\/strong><\/mark><\/p>\n\n\n\n<p><strong><em><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">Deprecated parameters I&#8217;ve successfully used in the past are long gone, often breaking the experience I intended in my artwork. They include the following:<\/mark><\/em><\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><s><strong>rel=0<\/strong>&nbsp;means YouTube will NOT display the related videos feature when playback ends.<\/s> <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><em><strong>(Deprecated in 2018: use a loop instead to avoid related videos.)<\/strong><\/em><\/mark><\/li>\n\n\n\n<li><s><strong>showinfo=0<\/strong>&nbsp;means YouTube will NOT display the video title and uploader identity before the video starts.<\/s> <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><em><strong>(Deprecated in 2018: the closest you can get to this is to use a loop.)<\/strong><\/em><\/mark><\/li>\n\n\n\n<li><s><strong>modestbranding=0<\/strong>&nbsp;means YouTube will NOT display a persistent logo in the control bar. Note it WILL still display a modest logo and link at the lower right when the player is paused.<\/s> <em><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">(Deprecated in 2023: the closest you can get to modestbranding is using controls=0.)<\/mark><\/strong><\/em><\/li>\n<\/ul>\n\n\n\n<p><strong><em><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">In short, <\/mark><\/em><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">caveat elit<\/mark><em><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">: let the developer beware.<\/mark><\/em><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_8_Add_final_refinements\"><\/span>Step 8: Add final refinements<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>We&#8217;ve attained the essential behavior we wished for in Step 7. But there are some cool things we can add in the Final Step. A few of these are optional refinements.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:50%\">\n<p class=\"has-text-align-center\"><strong><em><a href=\"https:\/\/williamcromar.com\/code_samples\/rps23\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\">Visit Final Step &gt;<\/a><\/em><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Add_a_video_clipping_mask\"><\/span>Add a video clipping mask<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>We&#8217;re going to play around with a cool effect using a <code>clip-path<\/code> property to make our videos appear to have a special shape that will also appear to glow. Before we do, let&#8217;s get rid of the temporary <code>background-colors<\/code> we&#8217;ve been using to &#8220;see&#8221; the header, nav, and footer elements.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Observe the footer from the CSS as an example. Instead of just deleting the property, we&#8217;re &#8220;commenting it out&#8221; with a CSS comment, seen here in red. This is an important habit to acquire! You can test whether you like changing something, and if you decide you&#8217;d rather keep it, you don&#8217;t have to remember what it was! Commenting out is also a powerful tool to use when you&#8217;re debugging ornery code problems.<\/p>\n\n\n\n<p>With that cleared up, let&#8217;s explore the clip-path pro<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"wp-block-code\"><code>footer {\n<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">    \/*background-color: #999;*\/\n<\/mark>    color: #fff;\n    height: 20px;\n    padding: 20px;\n    text-align: center;\n}<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p>With that cleared up, let&#8217;s explore the <strong><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/clip-path\" target=\"_blank\" rel=\"noreferrer noopener\">clip-path property<\/a><\/strong>. This is like having an Illustrator clipping mask right inside your code!<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>It&#8217;s deceptively easy to implement: observe the code we added to the <code>iframe<\/code> element in the CSS, here in red. Because it&#8217;s applied universally to the iframe element, every video will now be rendered as a circle. A version of the effect can be seen at the top of this wiki title.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"wp-block-code\"><code>iframe {\n<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">    clip-path: circle(28% at 50% 50%);\n<\/mark>    aspect-ratio: 1\/1;\n    width: 100%;\n    max-width: 540px;\n}<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Add_a_glow_effect\"><\/span>Add a glow effect<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Finally, let&#8217;s add a glow effect to the text and videos. This is not entirely decorative: in the case of text applied over moving backgrounds, it provides additional contrast for legibility. But it&#8217;s also just a cool way to manipulate a couple of drop-shadow properties.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>The first of these will be to add a <code>text-shadow:<\/code> property to the <strong>body, td, th<\/strong> element in the CSS document. The values here represent the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The first <code>0<\/code> is the horizontal offset.<\/li>\n\n\n\n<li>The second <code>0<\/code> is the vertical offset. We have no offset because we want this to look more like a glow effect and less like a drop shadow.<\/li>\n\n\n\n<li><code>6px<\/code> is the amount of blur applied.<\/li>\n\n\n\n<li><code>#f00<\/code> is a shorthand hexadecimal color code for pure red.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"wp-block-code\"><code>body,td,th {\n    font-family: Impact, Haettenschweiler, \"Franklin Gothic Bold\", \"Arial Black\", sans-serif;     \n    text-shadow: 0 0 6px #f00;\n}<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>The glow for the clipping mask is a bit more obscure, though the code is an easy one. Chris Coiyer at <strong><a href=\"https:\/\/css-tricks.com\/using-box-shadows-and-clip-path-together\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS Tricks<\/a><\/strong> provides the solution:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>First, in HTML, wrap the two video iframes in a <code>&lt;div&gt;<\/code>.<\/li>\n\n\n\n<li>Next, create a new class .iframe-wrap in CSS.<\/li>\n\n\n\n<li>Assign this class to the new &lt;div&gt;.<\/li>\n\n\n\n<li>Place a filter: drop-shadow( ) in .iframe-wrap and give it values in parentheses. The values we used:\n<ul class=\"wp-block-list\">\n<li>The first <code>0<\/code> is the horizontal offset.<\/li>\n\n\n\n<li>The second <code>0<\/code> is the vertical offset. Like the text, we have no offset because we want this to glow.<\/li>\n\n\n\n<li><code>40px<\/code> is the amount of blur applied.<\/li>\n\n\n\n<li><code>#f00<\/code> is pure red.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>HTML<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;main&gt;\n   <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">&lt;div class=\"iframe-wrap\"&gt;<\/mark>\n      &lt;iframe src=\"...&gt;&lt;\/iframe&gt;\n      &lt;iframe src=\"...&gt;&lt;\/iframe&gt;\n    <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">&lt;\/div&gt;<\/mark>\n&lt;\/main&gt;<\/code><\/pre>\n\n\n\n<p><strong>CSS<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">.iframe-wrap {\n    filter: drop-shadow(0px 0px 40px #f00);<\/mark>\n}<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Add_citations_in_comments\"><\/span>Add citations in comments<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>The last &#8220;mandatory&#8221; refinement here is to include citations in a comment between &lt;html&gt;  and &lt;head&gt;. We include the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>URLs for all images we downloaded for the backgrounds.<\/li>\n\n\n\n<li>Mention that the video embeds will open in YouTube, providing a link back.<\/li>\n\n\n\n<li>A statement of copyright. Here we apply a Creative Commons Attribution-ShareAlike 4.0 International license. We make it clear that the license applies only to material we authored \u2014 primarily, this is the code \u2014 and not to the appropriated content \u2014 the images and videos. Those remain under a license applied by the authors of those materials. Choosing this license means we are allowing anyone to use our code for any purpose, so long as we are given attribution (usually in the form of a URL in a comment as we did) and that such use must apply at least the same license level as we have here.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Optional_refinements\"><\/span>Optional refinements<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>There are a couple of minor tweaks here that are purely optional but fun to explore. <\/p>\n\n\n\n<p>The first of these is to change each page <code>&lt;title&gt;<\/code>. This is the text that shows up in a browser tab. In our sample, we used <em>Paper Covers Rock<\/em>, <em>Rock Dulls Scissors<\/em>, and <em>Scissors Cut Paper<\/em> as the titles for the three <strong>videoXX.html<\/strong> pages.<\/p>\n\n\n\n<p>The second was to replace the <em>previous<\/em>, <em>home<\/em>, and <em>next<\/em> navigation text with symbols or emojis. We decided to use pointing hands since <em>Rock Paper Scissors<\/em> is a game played with the hands.<\/p>\n\n\n\n<p>After we did this, we found the need to change the <code>nav<\/code> font size to make the symbols more legible, so we applied <code>font-size: 2rem;<\/code> to the <code>nav<\/code> element in CSS. What is <code>rem<\/code>? Well, there are absolute units and relative units of measure in CSS. The <code>px<\/code> value is equivalent to 1\/96 of an inch, hence is absolute. The rem value is a function of the font-size of the root element and hence is relative. If the absolute value of the root is <code>12px<\/code>, <code>2rem<\/code> is double that, or <code>24px<\/code>. Read more about relative units at <strong><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/CSS\/Building_blocks\/Values_and_units#numbers_lengths_and_percentages\" target=\"_blank\" rel=\"noreferrer noopener\">MDN Web Docs<\/a><\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Go_live\"><\/span>Go live!<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>You&#8217;ve completed a curated web &#8220;installation&#8221; artwork! Post the&nbsp;results of the Video Mash exercises&nbsp;to your server space&nbsp;through<strong>&nbsp;<a href=\"https:\/\/williamcromar.com\/newmediawiki\/sftp\/\">SFTP<\/a><\/strong>, and share it with the world!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>4D media 3 | concrete poetry videoMashHTML Visit the videoMash site here &gt; Intermediate HTML (with a dash of CSS) We&#8217;ll use HTML tools that allow a great deal of visual order to create a curated website in an exercise we call Video Mash. Video Mash is a small, curated website that requires directory skills,&#8230; <a href=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/\">read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[5,11],"tags":[],"class_list":["post-4722","post","type-post","status-publish","format-standard","hentry","category-4d-media","category-exercises"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>videoMashHTML - newMediaWiki<\/title>\n<meta name=\"description\" content=\"Video Mash HTML: create a web &quot;installation&quot; artwork using the power of Semantic HTML and iframes, with a dash of CSS and appropriation.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"videoMashHTML - newMediaWiki\" \/>\n<meta property=\"og:description\" content=\"Video Mash HTML: create a web &quot;installation&quot; artwork using the power of Semantic HTML and iframes, with a dash of CSS and appropriation.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/\" \/>\n<meta property=\"og:site_name\" content=\"newMediaWiki\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-01T01:37:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-11T11:27:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" \/>\n<meta name=\"author\" content=\"williamCromar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"williamCromar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"22 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/videomashhtml\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/videomashhtml\\\/\"},\"author\":{\"name\":\"williamCromar\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"headline\":\"videoMashHTML\",\"datePublished\":\"2023-12-01T01:37:46+00:00\",\"dateModified\":\"2024-01-11T11:27:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/videomashhtml\\\/\"},\"wordCount\":4325,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"image\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/videomashhtml\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"articleSection\":[\"4d media\",\"Exercises\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/videomashhtml\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/videomashhtml\\\/\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/videomashhtml\\\/\",\"name\":\"videoMashHTML - newMediaWiki\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/videomashhtml\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/videomashhtml\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"datePublished\":\"2023-12-01T01:37:46+00:00\",\"dateModified\":\"2024-01-11T11:27:26+00:00\",\"description\":\"Video Mash HTML: create a web \\\"installation\\\" artwork using the power of Semantic HTML and iframes, with a dash of CSS and appropriation.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/videomashhtml\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/videomashhtml\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/videomashhtml\\\/#primaryimage\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"contentUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"width\":420,\"height\":420},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/videomashhtml\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"videoMashHTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#website\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/\",\"name\":\"newMediaWiki\",\"description\":\"because all media are new\",\"publisher\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\",\"name\":\"williamCromar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\",\"width\":1754,\"height\":1754,\"caption\":\"williamCromar\"},\"logo\":{\"@id\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\"},\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/author\\\/williamcromar\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"videoMashHTML - newMediaWiki","description":"Video Mash HTML: create a web \"installation\" artwork using the power of Semantic HTML and iframes, with a dash of CSS and appropriation.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/","og_locale":"en_US","og_type":"article","og_title":"videoMashHTML - newMediaWiki","og_description":"Video Mash HTML: create a web \"installation\" artwork using the power of Semantic HTML and iframes, with a dash of CSS and appropriation.","og_url":"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/","og_site_name":"newMediaWiki","article_published_time":"2023-12-01T01:37:46+00:00","article_modified_time":"2024-01-11T11:27:26+00:00","og_image":[{"url":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","type":"","width":"","height":""}],"author":"williamCromar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"williamCromar","Est. reading time":"22 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#article","isPartOf":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/"},"author":{"name":"williamCromar","@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"headline":"videoMashHTML","datePublished":"2023-12-01T01:37:46+00:00","dateModified":"2024-01-11T11:27:26+00:00","mainEntityOfPage":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/"},"wordCount":4325,"commentCount":0,"publisher":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"image":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#primaryimage"},"thumbnailUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","articleSection":["4d media","Exercises"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/","url":"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/","name":"videoMashHTML - newMediaWiki","isPartOf":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#website"},"primaryImageOfPage":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#primaryimage"},"image":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#primaryimage"},"thumbnailUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","datePublished":"2023-12-01T01:37:46+00:00","dateModified":"2024-01-11T11:27:26+00:00","description":"Video Mash HTML: create a web \"installation\" artwork using the power of Semantic HTML and iframes, with a dash of CSS and appropriation.","breadcrumb":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#primaryimage","url":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","contentUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","width":420,"height":420},{"@type":"BreadcrumbList","@id":"https:\/\/williamcromar.com\/newmediawiki\/videomashhtml\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/williamcromar.com\/newmediawiki\/"},{"@type":"ListItem","position":2,"name":"videoMashHTML"}]},{"@type":"WebSite","@id":"https:\/\/williamcromar.com\/newmediawiki\/#website","url":"https:\/\/williamcromar.com\/newmediawiki\/","name":"newMediaWiki","description":"because all media are new","publisher":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/williamcromar.com\/newmediawiki\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3","name":"williamCromar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1","url":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1","contentUrl":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1","width":1754,"height":1754,"caption":"williamCromar"},"logo":{"@id":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1"},"url":"https:\/\/williamcromar.com\/newmediawiki\/author\/williamcromar\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/4722","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/comments?post=4722"}],"version-history":[{"count":20,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/4722\/revisions"}],"predecessor-version":[{"id":6008,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/4722\/revisions\/6008"}],"wp:attachment":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/media?parent=4722"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/categories?post=4722"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/tags?post=4722"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}