Wordpress video embed guide
Wordpress guide
Wordpress can embed Motion Storyline video either as hosted video or as Netlify hosted HTML.
Quick note - the traditional way usually involves rendering your project as a video and downloading your final version. You would then upload it to your favorite host such as YouTube or Vimeo. This is fairly straightforward and won't be covered in this guide.
The second way is similar and unique to Motion Storyline.
Quick note - the traditional way usually involves rendering your project as a video and downloading your final version. You would then upload it to your favorite host such as YouTube or Vimeo. This is fairly straightforward and won't be covered in this guide.
The second way is similar and unique to Motion Storyline.
Get your Netlify url
After you have a finished video you are happy with, go to the topbar option of Publish. You will be prompted to login with Netlify to your Netlify account (create one if you haven't already). Deploy the site, and allow enough time for your page url to generate. At this url you will be able to see your HTML video.
Netlify also allows you to update this url from your dashboard if you wish.
Netlify also allows you to update this url from your dashboard if you wish.
Add an iframe
With the url of your Netlify hosted HTML video you will create an iframe element inside your Wordpress site and set the src attribute to this url. There are a number of ways to do this using plugins or by editing code.
An example url is used below, and you would place your url in.
An example url is used below, and you would place your url in.
<iframe src="https://charming-brigadeiros-4d8f21.netlify.app"></iframe>
This will behave like an embedded video once it loads. Be sure to match the (s) in (https:) so secure content loads on a secure page. Mismatches can cause errors such as not loading the iframe content.
Add interactivity
You can optionally add interaction to your iframe to make it interactive. This normally involves adding javascript code to a button or link that will open the iframe inside of a modal when the user wishes to play it.
The Motion Storyline home page uses the very opinionated method of unhiding a modal that loads the iframe content.
HTML
The Motion Storyline home page uses the very opinionated method of unhiding a modal that loads the iframe content.
HTML
<button onclick="document.querySelector('#animationModal').classList.remove('hidden')">
Play
</button>
<div id="animationModal" class="modal hidden" onclick="if (event.target == this) {
document.querySelector("#animationModal").classList.add("hidden")}">
<div class="modal-content">
<iframe src="http://charming-brigadeiros-4d8f21.netlify.app"></iframe>
</div>
</div> CSS
.hidden {
display: none;
}
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0px;
border: 1px solid #888;
width: 90vw;
height: 70vh;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s;
}
.modal {
position: fixed;
z-index: 200;
padding-top: 5vh;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
overflow: auto;
background-color: #333;
background-color: rgba(0,0,0,0.4);
background: #333;
background: rgba(0,0,0,0.4);
}Also consider setting the src attribute of the iframe with javascript after a user clicks so the iframe loads only once the modal appears instead of loading in when the page loads.