-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Qol 8600 new create a video embed component on swe (#442)
* Added 'tech in use' section * QOL-8676 Improvement: Documentation for the 'promotional banner' component * QOL-8600 -New: Create a Video embed component on SWE * QOL-8600 -New: Create a Video embed component on SWE
- Loading branch information
Showing
12 changed files
with
368 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| .qg-video-wrapper{ | ||
| .qg-video-nav-container { | ||
| display: flex; | ||
| justify-content: right; | ||
| align-items: center; | ||
| margin-top: 0.2em; | ||
| height: 1.5em; | ||
| .qg-video-duration-text { | ||
| font-size: 0.8em; | ||
| } | ||
| & * { | ||
| padding:3px; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,173 @@ | ||
| <!DOCTYPE html> | ||
|
|
||
| <html lang="en"> | ||
|
|
||
| <head> | ||
|
|
||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | ||
|
|
||
| <title>Video component</title> | ||
|
|
||
| <meta name="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate eius facere hic molestiae quasi sapiente. Accusantium beatae consectetur cumque, eaque fugit labore officia quisquam quod reprehenderit suscipit! Consectetur, magni!" content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate eius facere hic molestiae quasi sapiente. Accusantium beatae consectetur cumque, eaque fugit labore officia quisquam quod reprehenderit suscipit! Consectetur, magni!"> | ||
| <meta name="keywords" content="KEYWORDS"> | ||
| <meta name="DCTERMS.creator" scheme="AGLSTERMS.GOLD" content="c=AU; o=The State of Queensland; ou=DEPARTMENT NAME; ou=UNIT NAME"> | ||
| <meta name="DCTERMS.publisher" scheme="AGLSTERMS.AglsAgent" content="corporateName=The State of Queensland; jurisdiction=Queensland"> | ||
| <meta name="DCTERMS.created" content="2010-11-04"> | ||
| <meta name="DCTERMS.modified" content="2011-03-05"> | ||
| <meta name="DCTERMS.title" content="Add your heading"> | ||
| <meta name="DCTERMS.alternative" content="Add your heading"> | ||
| <meta name="DCTERMS.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate eius facere hic molestiae quasi sapiente. Accusantium beatae consectetur cumque, eaque fugit labore officia quisquam quod reprehenderit suscipit! Consectetur, magni!" content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate eius facere hic molestiae quasi sapiente. Accusantium beatae consectetur cumque, eaque fugit labore officia quisquam quod reprehenderit suscipit! Consectetur, magni!"> | ||
| <meta name="DCTERMS.subject" scheme="AGLSTERMS.APAIS" content="SUBJECT"> | ||
| <meta name="AGLSTERMS.function" scheme="AGLSTERMS.AGIFT" content="FUNCTION"> | ||
| <meta name="DCTERMS.type" scheme="DCTERMS.DCMIType" content="Text"> | ||
| <meta name="AGLSTERMS.documentType" scheme="AGLSTERMS.agls-document" content="guidelines"> | ||
| <meta name="DCTERMS.audience" scheme="AGLSTERMS.agls-audience" content=""> | ||
| <meta name="DCTERMS.jurisdiction" scheme="AGLSTERMS.AglsJuri" content="Queensland"> | ||
|
|
||
| <!-- Open graph --> | ||
| <meta property="og:title" content="Queensland Government"> | ||
| <meta property="og:Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate eius facere hic molestiae quasi sapiente. Accusantium beatae consectetur cumque, eaque fugit labore officia quisquam quod reprehenderit suscipit! Consectetur, magni!" content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate eius facere hic molestiae quasi sapiente. Accusantium beatae consectetur cumque, eaque fugit labore officia quisquam quod reprehenderit suscipit! Consectetur, magni!"> | ||
| <meta property="og:image" content="/assets/v4/latest/images/coat-of-arms/coa-thumbnail.png"> | ||
| <meta property="og:url" content=""> | ||
| <meta property="og:type" content="article" /> | ||
|
|
||
| <!-- Twitter --> | ||
| <meta name="twitter:card" content="summary" /> | ||
| <meta name="twitter:title" content="Queensland Government" /> | ||
| <meta name="twitter:Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate eius facere hic molestiae quasi sapiente. Accusantium beatae consectetur cumque, eaque fugit labore officia quisquam quod reprehenderit suscipit! Consectetur, magni!" content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate eius facere hic molestiae quasi sapiente. Accusantium beatae consectetur cumque, eaque fugit labore officia quisquam quod reprehenderit suscipit! Consectetur, magni!" /> | ||
| <meta name="twitter:image" content="/assets/v4/latest/images/coat-of-arms/coa-thumbnail.png" /> | ||
|
|
||
| <!--#include virtual="/assets/includes-local/head-assets.html"--> | ||
|
|
||
| </head> | ||
|
|
||
| <body data-qg-accessibility="true"> | ||
| <!--#include virtual="/assets/includes-local/analytics.html"--> | ||
| <!--#include virtual="/assets/includes-local/header/access.html"--> | ||
|
|
||
|
|
||
|
|
||
| <!--#include virtual="/assets/includes-local/header/header.html"--> | ||
| <div class="qg-global-breadcrumb qg-breadcrumb"> | ||
| <div class="container-fluid qg-site-width"> | ||
| <nav id="qg-breadcrumb" aria-label="breadcrumb" class="qg-breadcrumb-nav row"> | ||
| <ol class="qg-breadcrumb-list"> | ||
| <li class="qg-breadcrumb-list-item"> | ||
| <a href="/" class="qg-breadcrumb-list-item__link"> | ||
| Home | ||
| </a> | ||
| </li> | ||
| <li class="qg-breadcrumb-list-item"> | ||
| <a href="../" class="qg-breadcrumb-list-item__link"> | ||
| Web Template Documentation | ||
| </a> | ||
| </li> | ||
| <li class="qg-breadcrumb-list-item"> | ||
| <a href="../components.html" class="qg-breadcrumb-list-item__link"> | ||
| Components | ||
| </a> | ||
| </li> | ||
| <li class="qg-breadcrumb-list-item"> | ||
| <a href="../components.html" class="qg-breadcrumb-list-item__link"> | ||
| Components | ||
| </a> | ||
| </li> | ||
| <li class="qg-breadcrumb-list-item"> | ||
| <a href="#" class="qg-breadcrumb-list-item__link"> | ||
| Video component | ||
| </a> | ||
| </li> | ||
| </ol> | ||
| </nav> | ||
| </div> | ||
| </div> | ||
| <div class="container-fluid qg-site-width"> | ||
| <div id="qg-content"> | ||
| <div id="qg-one-col" class="row wide"> | ||
|
|
||
| <div id="qg-primary-content" role="main"> | ||
| <h1 class="category">Video</h1> | ||
| <p>This component can be used to embed videos into your content. </p> | ||
|
|
||
| <div class="qg-tmplt-example"> | ||
| <section class="qg-video-wrapper mb-3"> | ||
| <h3 class="qg-video-title">Title</h3> | ||
| <p class="qg-video-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eveniet incidunt magnam nobis obcaecati quam repudiandae sed voluptas voluptatum. Amet deleniti enim error hic magni nisi rem repellat sit. Aperiam.</p> | ||
| <div class="qg-video-nav-container"> | ||
| <span title="Video duration" class="qg-video-duration-text" >Duration 0.0</span> | ||
| <span>|</span> | ||
| <i aria-hidden="true" class="fa fa-cc" title="closed captions icon"><span class="sr-only">Closed captions icon:</span></i> | ||
| </div> | ||
|
|
||
| <div class="embed-responsive embed-responsive-16by9"> | ||
| <iframe title="YouTube Video" class="embed-responsive-item" allowfullscreen | ||
| src="https://www.youtube.com/embed/NpmB80pWUsk?rel=0"> | ||
| </iframe> | ||
| </div> | ||
| </section> | ||
| <section class="qg-accordion qg-accordion-v2" aria-label="Accordion Label"> | ||
| <article> | ||
| <button class="acc-heading qg-accordion--closed"> | ||
| <a class="qg-accordion--ga"> | ||
| <span class="accordion-label"><span class="title">Show/hide Transcript</span></span> | ||
| </a> | ||
| </button> | ||
| <div class="collapsing-section" id="id-panel-content-101102"> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad amet beatae consequuntur culpa cum doloribus ea eaque enim facilis illum incidunt ipsum iste maxime mollitia neque nulla pariatur, ullam vel!</p> | ||
| </div> | ||
| </article> | ||
| </section> | ||
| </div> | ||
| <h3>HTML</h3> | ||
|
|
||
| <pre><code class="language-markup"> | ||
|
|
||
| <section class="qg-video-wrapper mb-3"> | ||
| <h3 class="qg-video-title">Title</h3> | ||
| <p class="qg-video-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eveniet incidunt magnam nobis obcaecati quam repudiandae sed voluptas voluptatum. Amet deleniti enim error hic magni nisi rem repellat sit. Aperiam.</p> | ||
| <div class="qg-video-nav-container"> | ||
| <span title="Video duration" class="qg-video-duration-text" >Duration 0.0</span> | ||
| <span>|</span> | ||
| <i aria-hidden="true" class="fa fa-cc" title="closed captions icon"><span class="sr-only">Closed captions icon:</span></i> | ||
| </div> | ||
|
|
||
| <div class="embed-responsive embed-responsive-16by9"> | ||
| <iframe title="YouTube Video" class="embed-responsive-item" allowfullscreen | ||
| src="https://www.youtube.com/embed/%asset_metadata_video.url^replace:.*v=:^replace:&.*:%?rel=0"> | ||
| </iframe> | ||
| </div> | ||
| </section> | ||
| <section class="qg-accordion qg-accordion-v2" aria-label="Accordion Label"> | ||
| <article> | ||
| <button class="acc-heading qg-accordion--closed"> | ||
| <a class="qg-accordion--ga"> | ||
| <span class="accordion-label"><span class="title">Show/hide Transcript</span></span> | ||
| </a> | ||
| </button> | ||
| <div class="collapsing-section" id="id-panel-content-101102"> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad amet beatae consequuntur culpa cum doloribus ea eaque enim facilis illum incidunt ipsum iste maxime mollitia neque nulla pariatur, ullam vel!</p> | ||
| </div> | ||
| </article> | ||
| </section> | ||
| </code></pre> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <br /> | ||
| <br /> | ||
| <br /> | ||
| <!--#include virtual="/assets/includes-local/footer/footer.html"--> | ||
|
|
||
| <script> | ||
| var qg = qg || {}; | ||
| qg.swe = qg.swe || {}; | ||
| // Used by the feedback form. | ||
| qg.swe.franchiseTitle = 'Franchise Title'; | ||
| </script> | ||
|
|
||
| <!--#include virtual="/assets/includes-local/footer/footer-scripts.html"--> | ||
|
|
||
| </body> | ||
|
|
||
| </html> |
Oops, something went wrong.