[ASK] All in One | Coding help | XtGem

Mwebvendor Graham.Any idea how to change the center play button in a flash player? using js or else?

# 2017-04-14 17:26 · (0)

Graham

Mwebvendor I dont think you really can without getting into major coding of custom plugins using php java etc
not all browsers /platforms even use flash some like chrome mostly use html5

# 2017-04-14 17:58 · (0)

Mwebvendor

Graham Why is not playing? if a click the play button? can you check this?
http://flickvid.com/update

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Play</title>
    <link rel="stylesheet" href="/update/css.css">
</head>
<body>
<div class="container">

    <div class="video-wrapper">
        <div class="embed-responsive embed-responsive-16by9">
            <embed class="embed-responsive-item" src="https://video.google.com/get_player?docid=0B2WVxZoN_MWSM0pMOUd1TmNnaTg&ps=docs&partnerid=30" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="500" height="400"></embed>
        </div>
    </div>
</div>
<script src="/update/js_3.js"></script>
</body>
</html>

Copy code

CSS

.video-wrapper {
    position: relative;
}

.video-wrapper > embed {
    width: 100%;
    vertical-align: middle;
}

.video-wrapper > embed.has-media-controls-hidden::-webkit-media-controls {
    display: none;
}

.video-overlay-play-button {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 10px calc(50% - 50px);
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    opacity: 0.95;
    cursor: pointer;
    background-image: linear-gradient(transparent, #000);
    transition: opacity 150ms;
}

.video-overlay-play-button:hover {
    opacity: 1;
}

.video-overlay-play-button.is-hidden {
    display: none;
}

Copy code

JS

var videoPlayButton,
    videoWrapper = document.getElementsByClassName('video-wrapper')[0],
    embed = document.getElementsByTagName('embed')[0],
    videoMethods = {
        renderVideoPlayButton: function() {
            if (videoWrapper.contains(embed)) {
                this.formatVideoPlayButton()
                embed.classList.add('has-media-controls-hidden')
                videoPlayButton = document.getElementsByClassName('video-overlay-play-button')[0]
                videoPlayButton.addEventListener('click', this.hideVideoPlayButton)
            }
        },

        formatVideoPlayButton: function() {
            videoWrapper.insertAdjacentHTML('beforeend', '\
                <svg class="video-overlay-play-button" viewBox="0 0 200 200" alt="Play video">\
                    <circle cx="100" cy="100" r="90" fill="none" stroke-width="15" stroke="#fff"/>\
                    <polygon points="70, 55 70, 145 145, 100" fill="#fff"/>\
                </svg>\
            ')
        },

        hideVideoPlayButton: function() {
            embed.play()
            videoPlayButton.classList.add('is-hidden')
            embed.classList.remove('has-media-controls-hidden')
            embed.setAttribute('controls', 'controls')
        }
    }

videoMethods.renderVideoPlayButton()

Copy code

# 2017-04-14 18:39 · (0)

Mwebvendor

Graham Its dinner time,,, ill be right back...

# 2017-04-14 18:40 · (0)

Graham

Mwebvendor To be honest I really have no idea without setting up a complete test page of my own
although if I try to open the file directly it still does not play and the styling does not work at all on Firefox and does not fully cover the old button on opera I can't test on ie or edge as this pc is using ubuntu not windows

# 2017-04-14 19:03 (edited 2017-04-14 19:10 by Graham ) · (0)

Mwebvendor

Graham Sorry if i bother you,,, forget about that,,, maybe i fixed it,, i set it to auto play. may i favor? can you test it in your browser? maybe its work for me only... thank a lot.... http://flickvid.com/update

# 2017-04-14 19:13 · (0)

Graham

Mwebvendor plays ok in chrome won't play for me in either firefox or opera

# 2017-04-14 19:49 · (0)

maltefky

Mwebvendor Pls webmasters how i grab iroking.com music to my xtgem site

# 2017-04-16 22:37 · (0)

Mwebvendor Hello graham,,, can i add multi search form in the twig code? im creat a multi search for, for pc and mobile view,, im using two division.

division 1 = view for pc only.
division 2= view for mobile only.

the inside of two division is search form in blog,

# 2017-04-18 09:35 · (0)

Mwebvendor

maltefky I dont know i how to grab it. heheh... if your site is a kind of video sharing? try to use youtube embed..

# 2017-04-18 09:37 · (0)