Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 12
  1. #1
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Default Useful HTML Code for Autoplay Video Placeholders

    Maybe others will find this HTML autoplay code useful for inserting videos. I have attached my '.xar' file where the placeholder widgets (body HTML) can be edited with your own video sources. You can of course copy and paste the placeholders.

    Demo at https://video.initiostar.co.uk highlights the HTML code used in the Body section of each placeholder and the effect it has. For https, you may have to change the standard .htaccess file. In my case, the .htaccess code change is shown on the first page of the '.xar. file.
    Attached Files Attached Files

  2. #2
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,744

    Default Re: Useful HTML Code for Autoplay Video Placeholders

    Initiostar, no XAR file but your video demo website mostly does the job.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  3. #3
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Default Re: Useful HTML Code for Autoplay Video Placeholders

    Apologies xar now attached

  4. #4
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,744

    Default Re: Useful HTML Code for Autoplay Video Placeholders

    Quote Originally Posted by Initiostar View Post
    Apologies xar now attached
    Most kind.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  5. #5
    Join Date
    Jul 2016
    Location
    Florida, USA
    Posts
    105

    Default Re: Useful HTML Code for Autoplay Video Placeholders

    Hi,

    I'm trying to implement your code you provided, and the video is only displaying full browser screen. I want full banner width.

    Thanks in advance

  6. #6
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Default Re: Useful HTML Code for Autoplay Video Placeholders

    To create a video banner similar to the one seen in the demo, you would crop your original video to something like 1920px x 500px (or to a height that retains the content you want to display). There are many video editing tools, but I used https://cropvideo.co/. I am sure there are other ways to achieve the same effect, but you want to avoid distorting your content. Hopefully, this helps.

  7. #7
    Join Date
    Jul 2016
    Location
    Florida, USA
    Posts
    105

    Default Re: Useful HTML Code for Autoplay Video Placeholders

    Thanks for the reply. I'm unable to get the video how I want it. I've used that website to re-size the video, but it still wont stretch browser width (browser width for website is set to 1200) and its' taller than the size I changed it to. I even made it 1920x300 but still to tall.

  8. #8
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Default Re: Useful HTML Code for Autoplay Video Placeholders

    Hi Koko,

    I ran the code for the banner-width video, screenshot attached. The start point was a video 1920px x 1080px, which I reduced to a height of 144px; the result is in the image. I tried different page widths, but as expected this has no bearing on the result in this case.

    Can I suggest you check your code (which is shown in the attached image); it is different from the code used to fill a page width, which was the first example in the demo.

    Rdgs Gary
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	Banner Video.jpg 
Views:	66 
Size:	45.6 KB 
ID:	124197  

  9. #9
    Join Date
    Jul 2016
    Location
    Florida, USA
    Posts
    105

    Default Re: Useful HTML Code for Autoplay Video Placeholders

    Hi,

    I'm at a standstill. I'm really stumped on this. I cannot get it to maintain 300 in height. .web file attached in a test website using the placeholder with your code. Video is hosted on my server.
    Attached Files Attached Files

  10. #10
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Default Re: Useful HTML Code for Autoplay Video Placeholders

    I can see your issue, it looks like the video has been stretched in the crop, playback appears to show the full video, rather than the intended crop.

    If you add the original video source in your test.web, I maybe able to help. Unfortunately, what you may find with your video, is that cropping it (taking a horizontal slice) will loose its context. The code seems to work on any other 1920 x 1080 source.

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •