Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. add a hyperlink for html5 video

add a hyperlink for html5 video

Scheduled Pinned Locked Moved General Discussion
20 Posts 7 Posters 1.4k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • J Offline
    J Offline
    jakobox
    wrote on last edited by
    #4

    I know this topic is on the older side.. Just wanted to say that I too would really like to see the ability to link from a video (and not just an image). Hopefully this makes a future update!

    1 Reply Last reply
    0
    • mariusjopenM Offline
      mariusjopenM Offline
      mariusjopen
      Global Moderator
      wrote on last edited by
      #5

      Dear @zaza
      with a video-thumbnail it would work.

      Best!

      Marius

      www.mariusjopen.world

      1 Reply Last reply
      0
      • S Offline
        S Offline
        simonacf
        wrote on last edited by
        #6

        Any progress here guys? Would love this option. Video Thumbnails are sadly only availble for linking directly to projects, not to anything else. Or could you insert the exact markup you use for the html5 videos just for consistency? Thank you!

        1 Reply Last reply
        0
        • mariusjopenM Offline
          mariusjopenM Offline
          mariusjopen
          Global Moderator
          wrote on last edited by
          #7

          Dear @jakobox
          not yet. But we wrote it down.

          Best!

          Marius

          www.mariusjopen.world

          1 Reply Last reply
          0
          • M Offline
            M Offline
            Markus
            wrote on last edited by
            #8

            @mariusjopen Hey Marius,

            would the function be possible now? I'm working on a project that would be great. Just a simple link for the mp4 like the "Set Image Link" Function.

            Best!
            Markus

            1 Reply Last reply
            0
            • RichardR Offline
              RichardR Offline
              Richard
              Global Moderator
              wrote on last edited by
              #9

              Dear @Markus

              Still not possible directly through the "Add HTML5 Video", However working around with an HTML insert as Armin has mentioned earlier,

              Sorry that we do not have the direct option at the moment, and Thank you for your patience while we continue to develop.

              Sincerely
              Richard

              1 Reply Last reply
              0
              • M Offline
                M Offline
                Markus
                wrote on last edited by Markus
                #10

                Hey @Richard-Keith Thank you very much for the reply.

                Maybe you have an example of a code?
                However working around with an HTML insert as Armin has mentioned...

                That would be great!!! I would need it for a customer website or I can find a developer for this small money job?! If you know somebody please DM me :)

                Hopefully this makes a future update, too :)

                Best!
                Markus

                1 Reply Last reply
                0
                • RichardR Offline
                  RichardR Offline
                  Richard
                  Global Moderator
                  wrote on last edited by
                  #11

                  Dear @Markus

                  Sorry for the late reply! i do apologise, forgive me.

                  Currently i'm unable to hunt the code for you, but i still wish to help and can take a look into it during the week,
                  Would be great to come to a solution and this will help others as well!

                  Let me know how you got with this issue and if you found a solution, :)

                  Best Wishes & have a great weekend

                  Sincerely
                  Richard

                  1 Reply Last reply
                  0
                  • RichardR Offline
                    RichardR Offline
                    Richard
                    Global Moderator
                    wrote on last edited by
                    #12

                    Dear @Markus

                    Thank you for your patience,

                    We can use the HTML insert option to add a video to your page and also wrap the video in a link of you choice.

                    Screen Shot 2020-09-07 at 4.29.57 PM.png

                    This is a basic setup, i hope it helps you, and also some reference to what is occuring

                    https://www.w3schools.com/html/html5_video.asp
                    https://www.w3schools.com/tags/att_video_src.asp
                    https://www.w3schools.com/tags/tag_a.asp

                    Within these pages you can see some of the basic options we have to start with

                    Lets take a look at this piece of code :)

                    <a href="/category/regietest" target="_blank">
                        <video width="320" height="240" controls autoplay loop muted>
                            
                          <source src="https://rickei3.dreamhosters.com/wp-content/uploads/2020/08/Big_Buck_Bunny_1080_10s_1MB.mp4" type="video/mp4">
                          <source src="https://rickei3.dreamhosters.com/wp-content/uploads/2020/08/Big_Buck_Bunny_1080_10s_1MB.ogg" type="video/ogg">
                          
                        Your browser does not support the video tag.
                        </video>
                    </a>
                    

                    First we want to wrap the video in a link for you

                    Screen Shot 2020-09-07 at 4.33.50 PM.png

                    These <a> tags ( link tags ) exist as a box that contains the video content, the link is set to "/category/regietest" this relative url ( see relative & absolute in the links i provided ) can be used if you want to just link to another page on your website as you only have to use the end of your url structure:

                    Screen Shot 2020-09-07 at 4.42.26 PM.png

                    If you wish to link outside of your website use the whole url - absolute url

                    also you can see - target="_blank"
                    This is so when the link is clicked the browser knows to open the link in a new tab, if you wish to go straight to the linked page just remove this from the code.

                    Secondly the <video> tags:

                    Screen Shot 2020-09-07 at 4.33.50 PM copy.png

                    Here we can define some variables of the video:

                    set the width & height ( remove this is you wish the video's natural dimensions to be used )

                    controls: this will add play buttons and volume etc

                    Autoplay - automatically run on page load

                    loop - loop...

                    muted - muted... :)

                    Thirdly the <source> tags:

                    Screen Shot 2020-09-07 at 4.58.03 PM.png

                    Here we define the path to the video, we add two of these to have better coverage across browsers some browsers accept .mp4 - some .ogg

                    We have the same video but just in two formats and we define it with the type""
                    at the end.

                    These video paths can be from outside your website or if you upload a video to your media library:

                    Screen Shot 2020-09-07 at 4.50.28 PM.png

                    You can copy the url to add as the video source

                    Screen Shot 2020-09-07 at 4.50.43 PM.png

                    I hope this helps you on your Lay Theme Journey :)

                    Best wishes
                    Richard

                    1 Reply Last reply
                    0
                    • M Offline
                      M Offline
                      Markus
                      wrote on last edited by Markus
                      #13

                      @Richard-Keith Perfect!!!! Thank you very much!! I try it :)

                      1 Reply Last reply
                      0
                      • RichardR Offline
                        RichardR Offline
                        Richard
                        Global Moderator
                        wrote on last edited by
                        #14

                        Dear @Markus

                        Good Luck :)

                        1 Reply Last reply
                        0
                        • M Offline
                          M Offline
                          Markus
                          wrote on last edited by Markus
                          #15

                          @Richard-Keith
                          It's unfortunately not working... tried in two systems :( with some html versions and some mp4's.

                          It looks like the video is in the background, a layer in between in browser?! Right click shows the menu of a typical mp4-file ;(
                          for example (client-website secret still): https://unanau.com/de/video

                          Thanks & Best!
                          Markus

                          One Test of many :)

                          <a href="https://unanau.com/de/studio-team/" target="_blank">
                              <video width="100%" height="500" controls autoplay loop muted>
                                  
                                <source src="https://rickei3.dreamhosters.com/wp-content/uploads/2020/08/Big_Buck_Bunny_1080_10s_1MB.mp4" type="video/mp4">
                                <source src="https://rickei3.dreamhosters.com/wp-content/uploads/2020/08/Big_Buck_Bunny_1080_10s_1MB.ogg" type="video/ogg">
                                
                              Your browser does not support the video tag.
                              </video>
                          </a>
                          

                          Bildschirmfoto 2020-09-09 um 09.17.21.png

                          Bildschirmfoto 2020-09-09 um 09.16.16.png

                          Right-Click in the Browser. I don't see the video but in the background ist the video?!

                          Bildschirmfoto 2020-09-09 um 09.18.28.png

                          1 Reply Last reply
                          0
                          • RichardR Offline
                            RichardR Offline
                            Richard
                            Global Moderator
                            wrote on last edited by
                            #16

                            Dear @Markus

                            This is odd, and your correct the video is in the background,

                            I inspected and found that the video had been set somehow to Opacity:0 making it transparent:

                            Screen Shot 2020-09-10 at 4.22.31 PM.png

                            Add this to Custom CSS in "Lay Options- Custom HTML & CSS"

                            .col video {
                                opacity: 1 !important;
                            }
                            

                            Best
                            Richard

                            1 Reply Last reply
                            0
                            • M Offline
                              M Offline
                              Markus
                              wrote on last edited by Markus
                              #17

                              Perfect @Richard-Keith!! Thanks!! :)

                              It runs.

                              (The Opacity:0 is in all my laytheme systems I think. I changed nothing before there.)

                              Best and Big Thanks!!
                              Markus

                              1 Reply Last reply
                              0
                              • RichardR Offline
                                RichardR Offline
                                Richard
                                Global Moderator
                                wrote on last edited by Richard
                                #18

                                Dear @Markus

                                Your most welcome, great to hear :)

                                Best wishes and good luck on the rest of your Lay Theme journey.

                                Sincerely
                                Richard

                                1 Reply Last reply
                                0
                                • M Offline
                                  M Offline
                                  Markus
                                  wrote on last edited by Markus
                                  #19

                                  for the mobile version you need this too... playsinline

                                  https://forum.webflow.com/t/html5-video-autoplay-now-working-on-mobile/40584

                                  <video playsinline autoplay loop muted style="min-width:100%; min-height:100%;" >
                                   	<source type="video/mp4" src="//bg.cdn.ustudio.com/app/transcodes/TQAdh6DJdtuY.mp4">
                                   	<source type="video/webm" src="//bg.cdn.ustudio.com/app/transcodes/TuX1xml2yZsS.webm">
                                  </video>
                                  
                                  1 Reply Last reply
                                  0
                                  • RichardR Offline
                                    RichardR Offline
                                    Richard
                                    Global Moderator
                                    wrote on last edited by
                                    #20

                                    Dear @Markus

                                    Thank you so much for following up! great :)

                                    Have a wonderful day, and thank you for making this thread great

                                    Sincererly
                                    Richard

                                    1 Reply Last reply
                                    0
                                    Reply
                                    • Reply as topic
                                    Log in to reply
                                    • Oldest to Newest
                                    • Newest to Oldest
                                    • Most Votes


                                    I also code custom websites or custom Lay features.
                                    šŸ’æ Email me here: šŸ’æ
                                    info@laytheme.com

                                    Before you post:
                                    1. When using a WordPress Cache plugin, disable it or clear your cache.
                                    2. Update Lay Theme and all Lay Theme Addons
                                    3. Disable all Plugins
                                    4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                                    This often solves issues you might run into

                                    When you post:
                                    1. Post a link to where the problem is
                                    2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                                    3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                                    Online Users
                                    arminunruhA
                                    arminunruh
                                    G
                                    Glyph
                                    Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                                    laytheme.com
                                    • Login

                                    • Don't have an account? Register

                                    • Login or register to search.
                                    • First post
                                      Last post
                                    0
                                    • Recent
                                    • Tags
                                    • Popular
                                    • Users
                                    • Search