Xidipity

Knowledge Base

youtube direct

 

Speciality: Youtube Direct
List Pages
quick links

 

Relevant Links

Xidipity WordPress Theme Knowledge Base Speciality Content Header Image

Appearance

 

panorama_fish_eye panorama_fish_eye panorama_fish_eye

Page Header
Xidipity WordPress Theme Knowledge Base Youtube Direct Image

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquet, lacus nec congue aliquam, lectus eros volutpat sapien, quis egestas quam nunc ultricies felis. Mauris nec eros erat. Nunc interdum interdum iaculis. Curabitur sodales faucibus erat, iaculis mattis diam pulvinar ac. Sed quis semper orci. Fusce urna massa, auctor ornare porttitor eu, rhoncus a risus. Aliquam ut diam lacus. Morbi faucibus ante a tellus lobortis, eget malesuada risus cursus. Nullam quis nulla ac eros placerat rutrum.

Page Footer

 

There is an additional video choice which which leverages an image which acts as a poster and loads a full screen youtube video from a link. The advantages of this approach are:

 
  1. easy to implement
  2. flexible
  3. offers a great viewing experience

 

Setup

Poster

The suggested solution is to add an image to your content which acts as a poster. The image above has a 16:9 aspect ratio and is sized 2560×1440 pixels.

 

Video ID

Go to the desired youtube video using your browser.  Click the share ( ​ ​ ) selection. A link will be displayed that looks similar to  ” https://youtu.be/xroy2VFphi4 “. The last eleven characters is the id (ie. xroy2VFphi4).

 

Template

The template for this task is as follows.

 

https://www.youtube.com/embed/ #id# ?autoplay=1&start=0

 

The “#id#” marker needs to be replace with the video id. The result looks as follows.

 

https://www.youtube.com/embed/xroy2VFphi4?autoplay=1&start=0

 

Add the updated template to the poster image as follows.

 
  1. single click image
  2. select (​ ​) to edit
  3. under display settings
    • align – as desired
    • size – as desired
    • link to – select “Custom url ” from drop down
    • URL – add updated template
  4. Click Update  button

 

When the image is clicked, the video will be loaded full screen.

Notes

Although the poster image provides a nice solution, the template will also work as a standard text link. For example.

 

View movie trailer

 


  • Since: v1.0.0

 

September 24, 2022