{"id":318,"date":"2019-03-06T08:46:19","date_gmt":"2019-03-06T08:46:19","guid":{"rendered":"http:\/\/mytribu.fr\/cmopc\/?p=318"},"modified":"2026-02-20T12:07:42","modified_gmt":"2026-02-20T12:07:42","slug":"td-du-mercredi-07-mars","status":"publish","type":"post","link":"http:\/\/mytribu.fr\/cmopc\/td-du-mercredi-07-mars\/","title":{"rendered":"Vid\u00e9o&amp;audio"},"content":{"rendered":"\n<p>Objectifs de la s\u00e9ance :<\/p>\n\n\n\n<p>Rappel : R\u00e9f\u00e9rencement : Placer dans son titre de page un mot clef inexistant dans Google. <\/p>\n\n\n\n<p>Exemple : <strong>zoorglug45<\/strong> puis attendre 15-20 jours pour le voir appara\u00eetre dans les r\u00e9sultats google.<\/p>\n\n\n\n<p><strong>Vid\u00e9o et audio dans un page html<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>int\u00e9grer cette <a href=\"https:\/\/mazwai.com\/#\/\">vid\u00e9o (mp4)&nbsp;<\/a> libre de droit dans une page de votre site<\/li>\n\n\n\n<li>une vid\u00e9o en fond d&rsquo;\u00e9cran de la page d&rsquo;accueil<\/li>\n\n\n\n<li>une vid\u00e9o avec un EMBED c&rsquo;est quoi ?<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>int\u00e9grer un <a href=\"https:\/\/www.musicscreen.be\/musique-libre-de-droit\/Catalogue\/5Keer.html\">fichier audio (mp3)<\/a> libre de droit<\/li>\n<\/ul>\n\n\n\n<p>&#8211; HTML et CSS<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Choix d&rsquo;un Template one page : <a href=\"https:\/\/mytribu.fr\/cmopc\/wp-content\/uploads\/2018\/03\/template_css1.zip\">template_css1<\/a><\/li>\n\n\n\n<li><\/li>\n<\/ul>\n\n\n\n<p>Exercice 1 : Int\u00e9gration d&rsquo;une vid\u00e9o en fond d&rsquo;\u00e9cran : La vid\u00e9o se trouve ici : <a href=\"https:\/\/mytribu.fr\/copiecat\/video1.mp4\">mytribu.fr\/copiecat\/video1.mp4<\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"fr\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n    &lt;title&gt;une vid\u00e9o en fond de page d'accueil&lt;\/title&gt;\n    &lt;link href=\"videofd.css\" rel=\"stylesheet\" type=\"text\/css\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n    &lt;div class=\"tv\"&gt;\n\n        &lt;video autoplay loop muted&gt;\n            &lt;source src=\"video1.mp4\" type=\"video\/mp4\"&gt;\n            \n        &lt;\/video&gt;\n\n    &lt;\/div&gt;\n&lt;div class=\"surimpression\"&gt;Bienvenue dans l'univers de la vid\u00e9o&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p><strong>Le css li\u00e9 a cette feuille : <\/strong>videofd.css<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@charset \"utf-8\";\n\/* CSS Document *\/\n* {\n\tmargin:0;\n}\n.tv {\n\tposition:relative;\n\theight: 100vh;\n\twidth: 100%;\n\toverflow: hidden;\n}\n.tv video {\n\t\n\tposition:absolute;\n\tmin-width: 100%\t;\n\tmin-height:100%;\n\ttop:50%;\n\tleft:50%;\n\ttransform : translate(-50%,-50%);\n\tz-index: 100%;\n}\n\n<\/code><\/pre>\n\n\n\n<p>On ajoute un calque noir semi-opaque pour bien voir le texte :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Styles pour la vid\u00e9o en arri\u00e8re-plan *\/\n        .tv {\n            position: relative;\n            width: 100%;\n            height: 100vh;\n            overflow: hidden;\n        }\n\n        video {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            filter: brightness(50%); \/* Assombrit la vid\u00e9o *\/\n        }\n\n        \/* Overlay pour le texte *\/\n        .surimpression {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: rgba(0, 0, 0, 0.4); \/* Assombrit encore un peu *\/\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            text-align: center;\n            color: white;\n            font-size: 3rem;\n            font-weight: bold;\n            font-family: Arial, sans-serif;\n            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);\n        }\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Objectifs de la s\u00e9ance : Rappel : R\u00e9f\u00e9rencement : Placer dans son titre de page un mot clef inexistant dans<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-318","post","type-post","status-publish","format-standard","hentry","category-non-classe","comments-off"],"_links":{"self":[{"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/posts\/318","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/comments?post=318"}],"version-history":[{"count":18,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/posts\/318\/revisions"}],"predecessor-version":[{"id":1564,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/posts\/318\/revisions\/1564"}],"wp:attachment":[{"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/media?parent=318"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/categories?post=318"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/tags?post=318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}