Нажатие кнопки «Выполнить» на скрипке или фрагменте кода: сердце смещается с правой стороны на левую. Это движение хорош ⇐ CSS

[Anonymous]

Это также встречается во фрагменте кода!!!!
Изображение 1
Нажмите «Выполнить фрагмент кода».
Изображение 2
Лучше всего просматривать в полноэкранном режиме рабочего стола.
Когда я нажимаю кнопку «Выполнить» на скрипке:
Может кто-нибудь объяснить, что происходит?
Сердце движется слева направо.
Визуально это видно.
Маленький экран: вверх и вниз
Рабочий стол: справа налево.
Как это предотвратить? https://jsfiddle.net/uz79kreo/2/
Удаление этого из кода исправляет проблему:

Код: Выделить всё

  const tag = document.createElement("script");
tag.src = "https://www.youtube.com/player_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

Код: Выделить всё

/*global YT */
/*jslint browser:true */
/*jslint devel: true */
window.onload = function() {
const container = document.querySelector(".video-containerA");
const exitButton = document.querySelector(".exitA");

container.classList.add("slide");

container.addEventListener("transitionend", function() {
exitButton.classList.add("visible");
});
};

const videoPlayer = (function makeVideoPlayer() {
const players = [];
const tag = document.createElement("script");
tag.src = "https://www.youtube.com/player_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function shufflePlaylist(player, shuffle) {
player.setShuffle(shuffle);
player.playVideoAt(0);
player.stopVideo();
}

function onPlayerReady(event) {
const player = event.target;
player.setVolume(100);
const isShuffle = player.getIframe().dataset.shuffle === "true";
shufflePlaylist(player, isShuffle);
}

function addPlayer(video, playerOptions) {
playerOptions.playerVars = playerOptions.playerVars || {};
video.dataset.shuffle = playerOptions.shuffle;
playerOptions.events = playerOptions.events || {};
playerOptions.events.onReady = onPlayerReady;
players.push(new YT.Player(video, playerOptions));
}

function destroyPlayers() {
players.forEach(function(player) { // Use player array here
const playerElement = player.getIframe();
if (playerElement) {
const playerClass = playerElement.className;
console.log("Destroying player with class: " + playerClass);
player.destroy();
}
});
console.log("playerRemoved");
}

return {
addPlayer,
destroyPlayers
};
}());

const managePlayer = (function makeManagePlayer() {
const playerVars = {
autoplay: 0,
controls: 0,
disablekb: 1,
fs: 0,
iv_load_policy: 3
};
const defaults = {
height: 360,
host: "https://www.youtube-nocookie.com",
playerVars,
width: 640
};

function combinePlayerOptions(opts1 = {}, opts2 = {}) {
const combined = Object.assign({}, opts1, opts2);
Object.keys(opts1).forEach(function checkObjects(prop) {
if (typeof opts1[prop] === "object") {
combined[prop] = Object.assign({}, opts1[prop], opts2[prop]);
}
});
return combined;
}

function createPlayer(videoWrapper, playerOptions = {}) {
const video = videoWrapper.querySelector(".video");
const options = combinePlayerOptions(defaults, playerOptions);
return videoPlayer.addPlayer(video, options);
}

function playerAdder(wrapper, playerOptions) {
return function addPlayerCallback() {
initPlayer(wrapper, playerOptions);
};
}

function initPlayer(wrapper, playerOptions) {
createPlayer(wrapper, playerOptions);
}
return {
adder: playerAdder
};
}());

const players = (function uiLoadPlayer() {
function addPlayer(playerSelector, playerOptions) {
const parent = document.querySelector(playerSelector).parentElement;
const callback = managePlayer.adder(parent, playerOptions);
callback();
}

return {
add: addPlayer
};
}());

function onYouTubeIframeAPIReady() {
// Initialize the first player
players.add(".playA", {
playerVars: {
list: "",
listType:  "playlist"
},
shuffle: true
});
}

(function manageExitA() {
function hideContainer(containerSelector) {
const container = document.querySelector(containerSelector);
container.classList.add("hide");
}

function showContainer(containerSelector, exitSelector) {
const container = document.querySelector(containerSelector);
const exitButton = document.querySelector(exitSelector);
container.classList.remove("hide");
container.classList.add("slide");
container.addEventListener("animationend", function() {
exitButton.classList.add("visible");
});
}

function removePlayer() {
videoPlayer.destroyPlayers();
}

function resetPage() {
hideContainer(".video-containerA");
showContainer(".video-containerB", ".exitB");
removePlayer();
}

function exitClickHandler() {
resetPage();
players.add(".playB", {
playerVars: {
list: "-sCPEW3",
listType: "playlist",
loop: 0
}
});
}
const exit = document.querySelector(".exitA");
exit.addEventListener("click", exitClickHandler);
}());

(function manageExitB() {
function hideContainer(containerSelector) {
const container = document.querySelector(containerSelector);
container.classList.add("hide");
}

function showContainer(containerSelector, exitSelector) {
const container = document.querySelector(containerSelector);
const exitButton = document.querySelector(exitSelector);
container.classList.remove("hide");
container.classList.add("slide");
container.addEventListener("animationend", function() {
exitButton.classList.add("visible");
});
}

function removePlayer() {
videoPlayer.destroyPlayers();
}

function resetPage() {
hideContainer(".video-containerB");
showContainer(".video-containerC", ".exitC");
removePlayer();
}

function exitClickHandler() {
resetPage();
players.add(".playC", {
playerVars: {
list: "",
listType: "playlist"
},
shuffle: true
});
}

const exit = document.querySelector(".exitB");
exit.addEventListener("click", exitClickHandler);
}());

(function manageExitC() {
function hideContainer(containerSelector) {
const container = document.querySelector(containerSelector);
container.classList.add("hide");
}

function showContainer(containerSelector) {
const container = document.querySelector(containerSelector);
container.classList.remove("hide");
}

function removePlayer() {
videoPlayer.destroyPlayers();
}

function resetPage() {
hideContainer(".outer-containerA");
showContainer(".outer-containerB");
removePlayer();
}

function exitClickHandler() {
resetPage();
}

const exit = document.querySelector(".exitC");
exit.addEventListener("click", exitClickHandler);
}());

Код: Выделить всё

html,
body {
margin: 0;
padding: 0;
}

body {
background: #121212;
padding: 0 8px 0;
}

body:has(.modal.active) {
overflow: hidden;
}

button,
a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.outer-containerA {
background: #15202b;
}

.outer-containerA,
.outer-containerB,
.modal {
display: flex;
position: fixed;
inset: 0;
overflow: auto;
/* Enable scroll if needed */
}

.video-containerA,
.video-containerB,
.video-containerC {
flex: 1 0 0;
margin: auto;
max-width: 640px;
position: relative;
}

.ratio-keeper {
height: 0;
padding-top: 56.25%;
overflow: hidden;
position: relative;
background: #000;
}

.ratio-keeper iframe {
/*position: absolute;
top: 0;
left: 0;*/
width: 100%;
height: 100%;
}

.ratio-keeper iframe,
.curtain {
position: absolute;
inset: 0;
}

.curtain {
/*position: absolute;
height: 100%;
width: 100%;
inset:0;*/
--wide: 8.8%;
--angle1: 0;
--angle2: -90;
background:  repeating-linear-gradient(calc(var(--angle1) * 1deg),
#ffffff00 0,
#ffffff00 var(--wide),
#ffffff1a calc(var(--wide) + 1px),
#0000004d calc(var(--wide) + 2px),
#ffffff00 calc(var(--wide) + 5px)),
repeating-linear-gradient(calc(calc(var(--angle2) + 90) * 1deg),
#ffffff00 0,
#ffffff00 var(--wide),
#ffffff1a calc(var(--wide) + 1px),
#0000004d calc(var(--wide) + 2px),
#ffffff00 calc(var(--wide) + 5px));
background-color: #222;
border-bottom: 2px solid #191919;
background-repeat: no-repeat;
overflow: hidden;
}

.video-containerA.slide .curtain {
transition: 8s ease-in-out;
transition-delay: 2.5s;
transform: translateY(-100%);
}

@keyframes slide {
to {
transform: translateY(-100%);
}
}

.video-containerB.slide .curtain,
.video-containerC.slide .curtain {
animation: slide 8s ease-in-out forwards;
animation-delay: 2.5s;
}

.video-containerA.slide .curtain,
.video-containerB.slide .curtain,
.video-containerC.slide .curtain {}

.containerB,
.containerC {
margin: auto;
}

.buttonContainerA,
.buttonContainerB {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 569px;
gap: 10px;
}

.playButton,
.linkButton {
flex-basis: 183px;

/*
width of each button */
margin: 0;

/*
spacing between buttons */
cursor: pointer;
}

.modal {
/*background: rgba(0, 0, 0, 0.4);*/
transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
transform: translate(0, -25%);
opacity: 0;
pointer-events: none;
z-index: -99;
border-radius: 50%;
--units: 8px;
--brick1: #222;
--brick2: #222;
--lines: #121212;
--gp-ln: 50%/calc(var(--units) * 10) calc(var(--units) * 5);
--gp-cn: 50%/calc(var(--units) * 5) calc(var(--units) * 5);
background:
repeating-conic-gradient(from 90deg at 95% 55%, var(--lines) 0% 25%, #fff0 0% 100%) var(--gp-cn),
repeating-linear-gradient(180deg, var(--lines) 0 5%, #fff0 0 50%, var(--lines) 0 55%, var(--brick2) 0 100%) var(--gp-ln),
repeating-linear-gradient(90deg, var(--brick1) 0 47.5%, var(--lines) 0 50%, var(--brick1) 0 97.5%, var(--lines) 0 100%) var(--gp-ln);
}

.modal.active {
opacity: 1;
transform: scale(1);
z-index: 1000;
pointer-events: initial;
border-radius: 0;
overflow: auto;
padding: 8px 8px;
}

.inner-modal {
position: relative;
margin: auto;
}

.btnA-primary {
color: #fff;
background-color: #0d6efd;
border-color: #0d6efd;
}

.btnA,
.btnB {
display: inline-block;
line-height: 1.5;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
background-color: #0d6efd;
border: 1px solid transparent;
box-sizing: border-box;
padding: 6px 12px;
font-size: 16px;
border-radius: 4px;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: normal;
}

.btnA:hover {
background-color: #0056b3;
border-color: #0a58ca;
color: #fff;
}

.played {
border-color: #0a58ca;
background-color: #0056b3;
box-shadow: 0 0 0 2px rgb(255 0 0);
}

.btnB-primary {
color: #2fdcfe;
background-color: #000;
border-color: #2fdcfe;
}

.btnB {
border: 1px solid #2fdcfe;
}

.btnB:hover {
background-color: #121212;
}

/*.btnA:focus,*/
.btnB:focus {
outline: 0;
box-shadow: 0 0 0 2px rgba(47 254 185 / 100%);
}

.exitA,
.exitB,
.exitC {
transform: translateY(100%);
position: absolute;
inset: auto 0 -6px 0;
/*top: auto;
bottom: -6px;*/
margin: auto;
/*8right: 0;
left: 0;*/
width: 47px;
height: 47px;
background: black;
border-radius: 50%;
border: 5px solid red;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transition: opacity 2s ease-in;
transition-delay: 1s;
pointer-events:  none;
}

.exitA::before,
.exitA::after,
.exitB::before,
.exitB::after,
.exitC::before,
.exitC::after {
content: "";
position: absolute;
width: 100%;
height: 5px;
background: red;
transform: rotate(45deg);
}

.exitA::after,
.exitB::after,
.exitC::after {
transform: rotate(-45deg);
}

.exitA.visible,
.exitB.visible,
.exitC.visible {
opacity: 1;
pointer-events: auto;
cursor: pointer;
}

.exitD,
.close {
position: absolute;
margin: 6px auto 0;
left: 0;
right: 0;
width: 47px;
height: 47px;
background: black;
border-radius: 50%;
border: 5px solid red;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}

.exitD::before,
.exitD::after,
.close::before,
.close::after {
content: "";
position: absolute;
width: 100%;
height: 5px;
background: red;
transform: rotate(45deg);
}

.exitD::after,
.close::after {
transform: rotate(-45deg);
}

.containerC {
margin: auto;
background: none;

/*
teal */
}

.flex {
display: flex;
flex-direction: column;
align-items: center;
background: none;
}

.blue-margin-bottom {
margin-bottom: 16px;
background: none;
}

.orange-margin {
margin-left: 12px;
margin-right: 12px;
background: none;
}

.title-text {
margin: 0;
color: #0059dd;
font-size: 20px;
line-height: 1.5;
text-overflow: ellipsis;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
font-family: "Karla", sans-serif;
font-weight: 700;
font-style: normal;
}

.yellow-padding-margin {
margin-top: 4px;
padding-left: 40px;
padding-right: 40px;
background: none;
}

.center-text {
padding: 0;
margin: 0;
text-align: center;
color: #0059dd;
font-size: 16px;
line-height: 1.5;
overflow-wrap: normal;
font-family: "Karla", sans-serif;
font-weight: 500;
font-style: normal;
background: none;
}

.exitE {
position: relative;
margin: 7px auto 0;
inset: 0 0 0 0;
width: 47px;
height: 47px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
background: black;
border-radius: 50%;
border: 5px solid #0059dd;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}

.exitE::before,
.exitE::after {
content: "";
position: absolute;
width: 100%;
height: 5px;
background: #0059dd;
transform: rotate(45deg);
}

.exitE::after {
transform: rotate(-45deg);
}

.my-footer {
box-sizing: border-box;
border-top: 1px solid #15c;
background: #121212;
text-align: center;
word-wrap: break-word;
padding: 22px 8px 0;
font-family: Verdana, Arial, sans-serif;
font-size: 13.33px;
line-height: 1.5;
vertical-align: baseline;
margin-top: auto;
}

.margin-top {
margin-top: 10px;
}

.my-footer a {
text-decoration: none;
}

.divider::before,
.divider::after {
content: "";
position: relative;
top: 4px;
margin: 0 7.4px;
border: none;
height: 12px;
border-left: 1px solid #f6b26b;
}

.footer-top {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 0 13px;
padding: 0;
list-style: none;
}

.footer-top li {
display: flex;
}

.footer-top a {
color: #0059dd;
font-weight: 700;
}

.my-footer .green-text {
color: #38761d;
font-weight: 400;
}

.orange-text {
color: #b45f06;
font-weight: 700;
}

.footer-mid {
margin-bottom: 49px;
color: #0059dd;
font-family: Arial, sans-serif;
font-size: 24px;
font-weight: 700;
}

.footer-base {
color: #0059dd;
padding: 0;
}

.outer-containerA.hide,
.video-containerA.hide,
.video-containerB.hide,
.video-containerC.hide,
.outer-containerB.hide,
.containerB.hide,
.containerC.hide {
display: none;
}

/*.hide {
display: none;
}*/

.flex-container {
width: 100%;
height:  100%;
position: fixed;
inset: 0 0 0 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}

.heart {
position: relative;
font-size: 0;
width: 137px;
height: 33px;
}

[class*="heart-piece-"] {
position: absolute;
top: -5px;
width: 10px;
height: 10px;
border-radius: 5px;

}

.heart-piece-0 {
left: 0;
height: 30px;
top: -15px;
background-color: #0059dd;
}

.heart-piece-1 {
left: 16px;
height: 60px;
top: -31px;
background-color: #0059dd;
}

.heart-piece-2 {
left: 32px;
height: 80px;
top: -37px;
background-color: #0059dd;
}

.heart-piece-3 {
left: 48px;
height: 90px;
top: -31px;
background-color: #0059dd;
}

.heart-piece-4 {
left: 64px;
height: 94px;
top: -23px;
background-color: #0059dd;
}

.heart-piece-5 {
left: 80px;
height: 90px;
top: -31px;
background-color: #0059dd;
}

.heart-piece-6 {
left: 96px;
height: 80px;
top: -37px;
background-color: #0059dd;
}

.heart-piece-7 {
left: 112px;
height: 60px;
top: -31px;
background-color: #0059dd;
}

.heart-piece-8 {
left: 128px;
height: 30px;
top: -15px;
background-color:  #0059dd;
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/782 ... right-side