Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • March 31, 2016 at 11:57 am #605807
    yarabe73

    Hi I’ve got a homepage with a colorsection with an ID: home
    The color section contains 1 layerslider with text and a selfhosted background video.

    My question: How can I set a custom ID for the (selfhosted mp4) video? I need the video to play once and then to only loop the last few seconds (so not the entire video) below is the script that should do the trick but I need to be able to set the ID of the video to: video.. Also for the below script to work do I need to set the video loop to false in section.php?

    I’ve added this to the child theme functions.php:

    function add_custom_script(){
    ?>
    <script type=”text/javascript”>
    var vidElem = document.getElementById(‘video’);
    vidElem.addEventListener(“ended”, function () {
    vidElem.currentTime = 15;
    vidElem.play();
    }, false);
    </script>
    <?php
    }
    add_action(‘wp_footer’, ‘add_custom_script’);

    thanks in advance!

    Cindy

    March 31, 2016 at 8:41 pm #606218
    Josue

    Hi Cindy,

    Can you post the link to your website please?

    Regards,
    Josue

    April 1, 2016 at 7:36 am #606522
    yarabe73

    Hi Josue,

    I’ve created an admin for you

    cheers Cindy

    April 1, 2016 at 8:09 am #606532
    Vinay

    Hey!

    If you rightclick and view source in the below code youc an see the id=”player_64_1067842201_1741576568″

      <video class="avia_video" controls id="player_64_1067842201_1741576568">
                        <source src="http://www.change-agents.nl/wp-content/uploads/2016/03/changeagents9.mp4" type="video/mp4" />
                    </video>

    Best regards,
    Vinay

    April 1, 2016 at 8:30 am #606538
    yarabe73

    Hi Vinay,

    I’ve already tried that… but that id changes every time you reload the page?

    cheers, Cindy

    April 1, 2016 at 8:36 am #606541
    yarabe73

    Is it possible to set a static ID for this video as it’s the only video in the entire site…

    Cindy

    April 1, 2016 at 4:22 pm #606763
    Yigit

    Hi!

    Please add following code to Functions.php file in Appearance > Editor

    function my_custom_id(){
?>
 <script>
jQuery(window).load(function(){
jQuery('#video video').attr('id','your-custom-id');
});
 </script>
<?php
}
add_action('wp_footer', 'my_custom_id');

    and that should change the ID of your video on your #video color section

    Best regards,
    Yigit

    April 1, 2016 at 6:24 pm #606809
    yarabe73

    Hi Yigit,

    Thanks! That does work I’ve set the ID of the video now… Do I now also set the default video_loop in section.php to false? As it seems that the script I’ve posted with my question isn’t working yet…

    cheers Cindy

    April 4, 2016 at 5:09 am #607341
    Ismael

    Hey!

    We replaced the code with:

    function add_custom_script(){
?>
<script type="text/javascript">
(function($){
$('#cavideo').bind("play ended", function () {
        $(this).currentTime = 15; 
        $(this).play();
	}, false);
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');

    Regards,
    Ismael

    April 4, 2016 at 8:52 am #607447
    yarabe73

    Hi Ismael,

    Thanks for the update. I understand what you tried to do…. However this is still not working the video still loops from the beginning… I’ve tried to set the video_loop in section.php to false to see if that would do the trick, but then the video (of course?) doesn’t loop at all. It seems that my video does get the id of #cavideo but somehow we’re not able yet to control it the way we want…

    April 4, 2016 at 9:17 am #607455
    Ismael

    Hi!

    It’s actually working when I test it. The video starts again in the boat, not the blue water thingy or whatever it is. Make sure that you’re not looking on a cached version of the site. Remove browser cache or hard refresh the page.

    UPDATE: We adjusted the code a bit.

    Best regards,
    Ismael

    April 4, 2016 at 9:53 am #607463
    yarabe73

    Guys… you all rock!! *raising my coffee cup to all* This works like a charm…. Thank you so much for all your quick support. You’ve just made my day :D

    cheers, keep up the good work!

    Cindy

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Control selfhosted background video’ is closed to new replies.