CSS - Allow videos to work with default browser controls from start

Discussion in 'Mixed Languages' started by Walker D, May 10, 2017.

  1. Walker D

    Walker D MDL Novice

    Dec 16, 2014
    25
    0
    0
    Hello, I hope someone can help me with this :p .. I'm not a programmer, but I have to deal with codes from time to time (so, pls, be gentle heh).

    I'm helping to set up a WordPress site that needs the embedded videos to not have references to the source, so that the user can continue on the site, and not go to lets say, youtube, to continue navigation (all videos will be from their channel btw ).
    I'm using the ARVE Plugin to block video items. However, I would like to leave the video with the standard controls offered by browsers. I've chose to do this with Dailymotion.

    I tried several things, but nothing worked yet ... ..till now, videos only show the default browser controls if I right click> Show Controls

    Would be possible to put some CSS commands that causes all the videos to appear with the default browser controls by default? ...If it was possible to add it to the embed code of ARVE of each individual video, it would be also be fine.

    I saw, for example, on the CSS-Tricks site an idea to change the display of these controls, referencing a Shadow DOM command, for html5 embedded videos. I tried to do something like that, but I could not make it work.

    Code:
    video::-webkit-media-controls-overlay-enclosure {
        display:true !important;
    }
    
    video::-webkit-media-controls-enclosure {
        display:true !important;
    }
    
    video::-webkit-media-controls {
        display:true !important;
    }
    This is what ARVE is writing when embedding video btw:

    Code:
    [arve url="video link adress" align="center" maxwidth="1140" parameters="controls=true ui-start-screen-info=false ui-logo=false endscreen-enable=false" /]

    Apparently you can do it with javascript too, but I don't know how to

    Hope someone has some ideas.. (if you need any info, feel free to ask me)

    Thanks
     
  2. kaljukass

    kaljukass MDL Addicted

    Nov 26, 2012
    790
    261
    30
    If you have a specific thing, perhaps then is possible to understand what you mean,
    but this faulty and random stuff here does not explain anything.
    Please some specific examples, how it is now and what you want to change.
     
  3. Walker D

    Walker D MDL Novice

    Dec 16, 2014
    25
    0
    0
    #3 Walker D, May 11, 2017
    Last edited: May 11, 2017
    (OP)
    I want to have dailymotion videos embedded in the wordpress page, but without the dailymotion controls. Instead I want the browser ones to appear by default.

    Removing the controls and links is easy; as I said before, I can do it with the ARVE plugin. Using browser controls is the hard part for me.

    Ex.:

    Before (Dailymotion controls)
    [​IMG]

    After (Browser default controls from Shadow DOM. Should show as video loads or after pressing play)
    [​IMG]


    I would want something on those lines.. ..can be done differently too.
     
  4. kaljukass

    kaljukass MDL Addicted

    Nov 26, 2012
    790
    261
    30
    You can do this if you have at least a video address (URL), but you do not have Dailymotion video address, so you can just use an <iframe> or embeded code. So you can see on your web page a part of the other web page and the other web page you can not somehow change.
     
  5. Walker D

    Walker D MDL Novice

    Dec 16, 2014
    25
    0
    0
    Um.. not sure if I understood this part about not being able to change the referenced page.. ..Both images above are from the same dailymotion vĂ­deo, already embedded in my blog. The Second one has the Dailymotion controls removed and the default browser controls on.. the only thing is that I had to right click> Show controls for them to appear.. So having them there is not possible?