Jak wstawić wideo do obrazka, tak by wyglądało to jakby obraz wyświetlał się na ekranie ?

pytanie zadane 22 listopada 2017 w HTML i CSS przez DariuszH Gaduła (3,100 p.)

Jak wstawić video z yt do ekranu (monitor.jpg) przy pełnej responsywności, tzn. zmniejszanie okna przegladarki powoduje zmniejszenie proporcjonalne monitora jak i video. Mi na razie wychodzi tylko tyle, że zmniejsza się wysokość pliku wideo i uwidacznia się białe tło ekranu (który jest poniżej) :)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">


<script src="jquery.js"></script>
<script src="scripts.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css" type="text/css">

</head>

<body>


<div class="yt">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/tt7gP_IW-1w?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="monitor"></div>
    
</body>

</html>

.monitor{

width: 100%;
height: 50vh;
background-image: url('./monitor.jpg');
background-size:100% 100%;

}


div.yt {
	overflow: hidden;
	position: relative;
	height: 0;
	padding: 0 0 56.25%;
    
}

div.yt iframe { overflow: hidden; position: absolute; top: 0; left: 0; width:100%; height: 100%; }

1 odpowiedź

odpowiedź 22 listopada 2017 przez cz3ran Stary wyjadacz (13,380 p.)

Jeżeli chcesz użyć tego obrazka to proponuje zdefiniować kilka "stałych" wersji w zależności od szerokości ekranu, tutaj zrobiłem dla jakiejś większej rozdzielczości:

https://codepen.io/Czeran/pen/Zaxdme

Natomiast jeżeli chciałbym to zrobić full responsywnie, to dla filmiku zrobił bym border, przypominający ten ze screena (czarny, gruby, z zaokrąglonymi rogami na górze), a stopkę monitora dodał bym osobno jako w postaci tła dodawanego 'after'.

https://www.w3schools.com/cssref/sel_after.asp

komentarz 22 listopada 2017 przez DariuszH Gaduła (3,100 p.)

No też o tym myślałem. Wczoraj wpadłem na to umieszczając w css dla div z video gdzie jest ustalone padding 56.25% (dla szerokości monitora 16:9) i wstawiłem tam background z obrazkiem i wyszło że brzegi video pokrywają się z brzegami obrazka, to pomyślalem o border. Ale to nie rozwiązuje problemu.....np. będę chciał wstawić video z rodziną w jakąś piękną ramkę, którą znajdę jako plik jpg i co wtedy, nie zrobię tego jako border :) wstawić jako tako potrafię, wynika z prostych podstaw html,ale jak to responsywnie zrobić to jest już trudne...:)

komentarz 22 listopada 2017 przez DariuszH Gaduła (3,100 p.)

http://jsfiddle.net/m3Lbjmdj/

Dobrze, mam.. Tak jak sugerowałeś....dla każdej ze stron monitora ekranu zrobię obrazek który będzie border :) I do tego responsywny :)