Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
Embeddable (responsive) video content
Here’s a(nother) simple way to embed responsive video content on your site. Choose from:
- A link to a video you’ve added to the Links panel
<txp::embed link="5" />(the link ID). - A video file you’ve uploaded to the Files panel
<txp::embed file="my-video.mp4" />(name, because there’s no way to grab files by ID). - An external video on a hosted site:
<txp::embed url="https://youtube.com/embed/abc123ab" />(must be the ‘embed’ URL and not the regular ‘watch’ URL).
The shortcode called “embed” that handles this is shown here. Note that I’ve omitted any <meta> content but it could be added for any content you’ve pre-uploaded to Txp. The video is wrapped in a videoResponsive container which, with the accommpanying CSS, ensures the video scales across devices to full width.
<if::yield name="link">
<txp:variable name="content" trim>
<txp:linklist id='<txp:yield name="link" />'><txp:link_url /></txp:linklist>
</txp:variable>
<div class="videoResponsive">
<iframe src="<txp:variable name="content" />" frameborder="0" allowfullscreen></iframe>
</div>
</if::yield>
<if::yield name="file">
<txp:variable name="content" trim>
<file::download_link filename='<txp:yield name="file" />' />
</txp:variable>
<video controls="controls" src="<txp:variable name="content" />">
Your browser does not support the video element. <a href="<txp:variable name="content" />">Download the video directly</a>.
</video>
</if::yield>
<if::yield name="url">
<div class="videoResponsive">
<iframe src="<txp:yield name="url" />" frameborder="0" allowfullscreen></iframe>
</div>
</if::yield>Accompanying style rules for the responsive container:
/**
* Make embedded elements responsive.
*/
video {
width: 100%;
height: auto;
}
.videoResponsive {
padding-bottom: 56.25%;
height: 0;
position: relative;
padding-top: 30px;
overflow: hidden;
}
.videoResponsive iframe,
.videoResponsive object,
.videoResponsive embed {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}Hope it’s useful.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: Embeddable (responsive) video content
Nice!
The unspecific url has the advantage that the use can embed from many different services, but it also places the onus on them picking the right url.
In the case of YouTube, you could add a snippet to detect when it’s a YouTube url, grab the video id and use the correct embed address regardless of what YTurl the users specifies. You can then also use the https://www.youtube-nocookie.com/embed/{YT-id} url. A disadvantage is that the resulting code isn’t quite as succinct as you have it now.
The other thing that sprang to mind is now that support for aspect-ratio is so much better, you can use that in place of the padding hack:
iframe {
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
}You can always use supports not to add a padding-hack fallback as described here on css-tricks.
TXP Builders – finely-crafted code, design and txp
Offline
Re: Embeddable (responsive) video content
Nice additions! I haven’t investigated the new CSS stuff so yeah, anything like that would be grand. And yes, a few people have been caught out in the wild by grabbing the non-embed YT links. So a system to make it more intelligent would be a definite improvement.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Pages: 1