Video module - Event Engine

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Video module - Event Engine</title> <meta name="viewport" content="width=device-width, maximum-scale=1"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="format-detection" content="telephone=no"> <meta name="description" content="The video module allow you to put a video anywhere on the page. It presents you with a standard interface to allow you to select the video type you wish to use "/> <meta name="author" content="Event Engine CMS Ltd"/> <link rel="canonical" href="https://help.eventengine.tv/article/37-video-module"/> <meta name="twitter:card" content="summary"/> <meta name="twitter:title" content="Video module" /> <meta name="twitter:description" content="The video module allow you to put a video anywhere on the page. It presents you with a standard interface to allow you to select the video type you wish to use "/> <link rel="stylesheet" href="//d3eto7onm69fcz.cloudfront.net/assets/stylesheets/launch-1732006970485.css"> <style> body { background: #ffffff; } .navbar .navbar-inner { background: #4169ea; } .navbar .nav li a, .navbar .icon-private-w { color: #ffffff; } .navbar .brand, .navbar .nav li a:hover, .navbar .nav li a:focus, .navbar .nav .active a, .navbar .nav .active a:hover, .navbar .nav .active a:focus { color: #ffffff; } .navbar a:hover .icon-private-w, .navbar a:focus .icon-private-w, .navbar .active a .icon-private-w, .navbar .active a:hover .icon-private-w, .navbar .active a:focus .icon-private-w { color: #ffffff; } #serp-dd .result a:hover, #serp-dd .result > li.active, #fullArticle strong a, #fullArticle a strong, .collection a, .contentWrapper a, .most-pop-articles .popArticles a, .most-pop-articles .popArticles a:hover span, .category-list .category .article-count, .category-list .category:hover .article-count { color: #4169ea; } #fullArticle, #fullArticle p, #fullArticle ul, #fullArticle ol, #fullArticle li, #fullArticle div, #fullArticle blockquote, #fullArticle dd, #fullArticle table { color:#151c32; } </style> <link rel="apple-touch-icon-precomposed" href="//d3eto7onm69fcz.cloudfront.net/assets/ico/touch-152.png"> <link rel="shortcut icon" type="image/png" href="//d3eto7onm69fcz.cloudfront.net/assets/ico/favicon.ico">  <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebSite","url":"https://help.eventengine.tv","potentialAction":{"@type":"SearchAction","target":"https://help.eventengine.tv/search?query={query}","query-input":"required name=query"}} </script> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Event Engine","item":"https://help.eventengine.tv"},{"@type":"ListItem","position":2,"name":"Event Engine","item":"https://help.eventengine.tv/collection/1-event-engine"},{"@type":"ListItem","position":3,"name":"Video module","item":"https://help.eventengine.tv/article/37-video-module"}]} </script> <style> @import url('https://fonts.googleapis.com/css?family=Poppins:400,600'); body { font-family: 'Poppins', sans-serif; } .navbar-inner { background: #151c32 !important; padding-top: 5px; padding-bottom:5px; } a.brand span { font-weight: 600; font-size: 34px; } h1,h2,h3,h4,h5,h6,h1.title { font-weight:600; } #searchBar button { background: #4169ea; } .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; </style> </head> <body> <header id="mainNav" class="navbar"> <div class="navbar-inner"> <div class="container-fluid"> <a class="brand" href="https://eventengine.tv"> <span>Event Engine</span> </a> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="nav-collapse collapse"> <nav role="navigation"> <ul class="nav"> <li id="home"><a href="/">Knowledgebase <b class="caret"></b></a></li> <li id="contact"><a href="#" class="contactUs" onclick="window.Beacon('open')">Contact</a></li> <li id="contactMobile"><a href="#" class="contactUs" onclick="window.Beacon('open')">Contact</a></li> </ul> </nav> </div> </div> </div> </header> <section id="contentArea" class="container-fluid"> <div class="row-fluid"> <section id="main-content" class="span9"> <div class="contentWrapper"> <article id="fullArticle"> <h1 class="title">Video module</h1> <a href="javascript:window.print()" class="printArticle" title="Print this article" aria-label="Print this Article"><i class="icon-print"></i></a> <p> The video module allow you to put a video anywhere on the page. It presents you with a standard interface to allow you to select the video type you wish to use and whether or not you want it to auto play. </p> <p> Simply drag the module to where you would like it to appear. </p> <p> <img src="//d33v4339jhl8k0.cloudfront.net/docs/assets/5cace2b72c7d3a392f9cd3b9/images/5cb09ded0428631d263c117d/file-zxTScmwKK2.png"> </p> <h2>The video module</h2> <p> As per the screenshot below, you can see the popup configuration panel that allows you to add your video. To add your video to the page you can select whether or not you want to use a video from your media library or the embed option. </p> <p> The embed option allows you to add the copied code from YouTube or Vimeo for example when you select the share option. </p> <p> <img src="//d33v4339jhl8k0.cloudfront.net/docs/assets/5cace2b72c7d3a392f9cd3b9/images/5cb09df62c7d3a392f9cfaf8/file-AejJGnsVLg.png"> </p> <p> Finally the advanced tab allows for responsive settings, entry animations and more. </p> <p> Press “Save” to lock in your changes. </p> </article> <section class="articleFoot"> <i class="icon-contact"></i> <p class="help">Still need help? <a id="sbContact" href="#" class="contactUs" onclick="window.Beacon('open')">Contact Us</a> <a id="sbContactMobile" href="#" class="contactUs" onclick="window.Beacon('open')">Contact Us</a> </p> <time class="lu" datetime=2019-04-12 >Last updated on April 12, 2019</time> </section> </div> </section> <aside id="sidebar" class="span3"> <form action="/search" method="GET" id="searchBar" class="sm" autocomplete="off"> <input type="hidden" name="collectionId" value="5cace8c80428631d263beccd"/> <input type="text" name="query" title="search-query" class="search-query" placeholder="Search" value="" aria-label="Search" /> <button type="submit"> <span class="sr-only">Toggle Search</span> <i class="icon-search"></i> </button> <div id="serp-dd" style="display: none;" class="sb"> <ul class="result"> </ul> </div> </form> <h3>Categories</h3> <ul class="nav nav-list"> <li ><a href="/category/4-getting-started">Getting started <i class="icon-arrow"></i></a></li> <li ><a href="/category/64-responsive-design">Responsive Design <i class="icon-arrow"></i></a></li> <li ><a href="/category/98-troubleshooting">Troubleshooting <i class="icon-arrow"></i></a></li> <li class="active" ><a href="/category/5-page-builder">Page Builder <i class="icon-arrow"></i></a></li> <li ><a href="/category/6-customization">Customization <i class="icon-arrow"></i></a></li> <li ><a href="/category/7-design">Design <i class="icon-arrow"></i></a></li> <li ><a href="/category/8-blogging">Blogging <i class="icon-arrow"></i></a></li> <li ><a href="/category/15-forms">Forms <i class="icon-arrow"></i></a></li> </ul> </aside> </div> <div id="noResults" style="display:none;">No results found</div> <footer> <p>© <a href="https://eventengine.tv">Event Engine CMS Ltd</a> 2024. <span>Powered by <a rel="nofollow noopener noreferrer" href="https://www.helpscout.com/docs-refer/?co=Event+Engine+CMS+Ltd&utm_source=docs&utm_medium=footerlink&utm_campaign=Docs+Branding" target="_blank">Help Scout</a></span> </p> </footer> </section> <script id="beaconLoader" type="text/javascript">!function(e,t,n){function a(){var e=t.getElementsByTagName("script")[0],n=t.createElement("script");n.type="text/javascript",n.async=!0,n.src="https://beacon-v2.helpscout.net",e.parentNode.insertBefore(n,e)}if(e.Beacon=n=function(t,n,a){e.Beacon.readyQueue.push({method:t,options:n,data:a})},n.readyQueue=[],"complete"===t.readyState)return a();e.attachEvent?e.attachEvent("onload",a):e.addEventListener("load",a,!1)}(window,document,window.Beacon||function(){});</script> <script type="text/javascript">window.Beacon('init', '25503943-ccaa-4154-8c3c-1ad11629d331')</script> <script type="text/javascript"> function hashChanged() { var hash = window.location.hash.substring(1); if (hash === 'contact') { window.Beacon('open') } } if (window.location.hash) { hashChanged() } window.onhashchange = function () { hashChanged() } window.addEventListener('hashchange', hashChanged, false); </script> <script src="//d3eto7onm69fcz.cloudfront.net/assets/javascripts/app3.min.js"></script> <script> // keep iOS links from opening safari if(("standalone" in window.navigator) && window.navigator.standalone){ // If you want to prevent remote links in standalone web apps opening Mobile Safari, change 'remotes' to true var noddy, remotes = false; document.addEventListener('click', function(event) { noddy = event.target; while(noddy.nodeName !== "A" && noddy.nodeName !== "HTML") { noddy = noddy.parentNode; } if('href' in noddy && noddy.href.indexOf('http') !== -1 && (noddy.href.indexOf(document.location.host) !== -1 || remotes)){ event.preventDefault(); document.location.href = noddy.href; } },false); } </script> </body> </html>

CINXE.COM

Video module - Event Engine